使用 React 掌握 TypeScript：逐步指南

??‍♀️簡介

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 元件。

• ReactNode：表示任何可以由 React 渲染的內容。這包括字串、數字、JSX、陣列和 null。

• ReactElement：指實際的 React 元素，比較具體，不包含字串或 null。

範例：

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中文網其他相關文章！