TypeScript 是 JavaScript 的一個超集，它添加了靜態類型檢查和面向對象編程的特性。JSX 是一種 JavaScript 的語法擴展，主要用于 React 組件的聲明性渲染。TypeScript 完美地支持 JSX，并允許你為 React 組件和它們的 props 添加類型注解。

TypeScript 中的 JSX 簡介

在 TypeScript 中使用 JSX，你可以：

1. 定義組件類型：你可以為組件定義 prop 類型，以確保傳遞給組件的 props 是正確的。
2. 增強類型檢查：TypeScript 的類型檢查可以幫助你捕獲在 JSX 中可能出現的錯誤。
3. 使用 TypeScript 的其他特性：例如，接口、枚舉、泛型等，以在 React 組件中提供更豐富的類型系統。

使用方法

1. 配置 TypeScript 項目

確保你的項目中安裝了 TypeScript 和相應的依賴項（例如 @types/react 和 @types/react-dom）。

在 tsconfig.json 中，你需要啟用 jsx 選項，并設置其值為 "react" 或 "react-jsx"（取決于你的 TypeScript 版本）。

{"compilerOptions": {"target": "es5","lib": ["dom", "dom.iterable", "esnext"],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx" // 或者 "react"},"include": ["src"]
}

2. 定義組件類型

你可以使用 TypeScript 的接口或類型別名來定義組件的 prop 類型。

import React from 'react';interface GreetingProps {name: string;enthusiasmLevel?: number;
}const Greeting: React.FC<GreetingProps> = ({ name, enthusiasmLevel = 1 }) => {if (enthusiasmLevel <= 0) {throw new Error('你至少需要有一點熱情！');}const result = `嗨，${name + getExclamationMarks(enthusiasmLevel)}`;return <div>{result}</div>;
};// 輔助函數
function getExclamationMarks(numChars: number) {return Array(numChars + 1).join('!');
}

3. 使用組件

現在你可以在你的 JSX 中使用 Greeting 組件，并傳遞正確的 props。TypeScript 將為你提供類型檢查和自動補全。

import React from 'react';
import { Greeting } from './Greeting';function App() {return (<div className="App"><Greeting name="TypeScript" enthusiasmLevel={10} />{/* TypeScript 會檢查這里的 props 是否符合 GreetingProps 的定義 */}</div>);
}export default App;

4. 使用 JSX 的其他特性

你還可以在 TypeScript 中使用 JSX 的其他特性，例如條件渲染、列表渲染、事件處理等。TypeScript 將為你提供強大的類型支持和代碼補全功能。