??♀️簡介
TypeScript 為 JavaScript 添加了靜態類型，這有助於在潛在錯誤運行之前捕獲它們。與 React 搭配使用時，TypeScript 透過強制類型安全性來增強您的元件。在本文中，我們將逐步介紹將 TypeScript 與 React 結合使用的基本概念。
⚛️ 如何將 TypeScript 與 React 結合使用？
首先，您需要在 React 專案中安裝 TypeScript。如果您從頭開始，請建立一個啟用 TypeScript 的新 React 應用程式：
npx create-react-app my-app --template typescript
登入後複製
對於現有項目，您可以透過執行以下命令來新增 TypeScript：
npm install typescript @types/react @types/react-dom
登入後複製
現在，您可以開始使用 .tsx 檔案而不是 .js 或 .jsx，而您的 React 元件將受益於 TypeScript 的功能。
React 元件 Props 的類型
在 React 中定義元件時，可以指定其 props 的類型，使元件的使用更加清晰、安全。這是一個基本範例：
type UserProps = {
name: string;
age: number;
};
const UserCard = ({ name, age }: UserProps) => (
<div>
<h1>{name}</h1>
<p>{age} years old</p>
</div>
);
登入後複製
在此範例中，UserCard 需要兩個屬性：名稱（字串）和年齡（數字）。如果您嘗試傳遞不正確的類型，TypeScript 將顯示錯誤。
ReactNode 與 ReactElement
您可能想知道何時使用 ReactNode 或 ReactElement 來輸入 React 元件。
範例：
type CardProps = {
children: ReactNode;
};
const Card = ({ children }: CardProps) => <div>{children}</div>;
// Usage
<Card><p>Hello, World!</p></Card>
登入後複製
這裡使用 ReactNode 是因為子元素可以是任何可渲染元素，而不僅僅是 React 元素。
類型與介面
定義道具或其他物件的形狀時，類型和介面都可以使用。那麼，有什麼區別呢？
-
類型：最適合創建聯合類型或更複雜的組合。
-
介面：當您計劃擴充或實作其他類型時通常會更好。
這是一個比較：
// Using type
type ButtonProps = {
label: string;
onClick: () => void;
};
// Using interface
interface LinkProps {
href: string;
openInNewTab?: boolean;
}
登入後複製
雖然兩者相似，但介面可以更自然地擴充：
interface IconButtonProps extends ButtonProps {
icon: string;
}
登入後複製
如何使用 TypeScript 輸入 Props？
要為元件鍵入 props，請聲明類型或介面並將其作為元件 props 的類型註解傳遞。
範例：
type AlertProps = {
message: string;
severity: 'error' | 'warning' | 'info';
};
const Alert = ({ message, severity }: AlertProps) => (
<div className={`alert ${severity}`}>{message}</div>
);
登入後複製
如何輸入功能組件 Props？
要輸入功能元件的 props，您可以使用 React.FC;或明確宣告 props。雖然 React.FC 很常用，但現在許多人更喜歡顯式類型。
這是一個使用明確類型的範例：
type BadgeProps = {
text: string;
color: string;
};
const Badge = ({ text, color }: BadgeProps) => (
<span style={{ backgroundColor: color }}>{text}</span>
);
登入後複製
在此範例中，Badge 有兩個屬性，文字和顏色，兩者都輸入為字串。
⛓ 使用 TypeScript React Hooks
React hooks 也可以在 TypeScript 中輸入，以確保元件中狀態和效果邏輯的類型安全性。
以下是如何透過 TypeScript 使用 useState 和 useEffect：
import { useState, useEffect } from 'react';
const Counter = () => {
const [count, setCount] = useState<number>(0);
useEffect(() => {
console.log(`Count is: ${count}`);
}, [count]);
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment</button>
<p>Count: {count}</p>
</div>
);
};
登入後複製
在此範例中，鍵入 useState 掛鉤以確保 count 始終為數字，並且 useEffect 會在當前計數發生變化時記錄當前計數。
透過遵循這些最佳實踐，您將能夠在 React 應用程式中充分發揮 TypeScript 的潛力，從而產生更健壯、可維護的程式碼。
在開始之前，如果您也在使用 SQL，請查看我們的 Ultimate SQL Cheatsheet，以透過基本和進階查詢來提高您的 SQL 技能！
以上是使用 React 掌握 TypeScript：逐步指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
