React 是一個用于構建用戶界面的強大 JavaScript 庫。結合
TypeScript，您可以獲得類型安全和更好的開發體驗。本文將詳細介紹如何從頭開始創建一個基于 TypeScript 的 React
項目。
1. 為什么選擇 TypeScript？
在深入創建項目之前，我們先了解一下為什么 TypeScript 對 React 項目如此有益：
- 類型安全： TypeScript 允許您定義變量、函數參數和返回值的類型，從而在開發過程中捕獲許多常見的錯誤。
- 更好的代碼可維護性： 明確的類型定義使代碼更易于理解和維護，尤其是在大型團隊項目中。
- 增強的 IDE 支持： 現代 IDE（如 VS Code）對 TypeScript 有出色的支持，提供自動補全、代碼導航和重構功能。
- 提前發現錯誤： 在編譯階段就能發現潛在的錯誤，而不是在運行時才發現。
2. 環境準備
在開始之前，請確保開發環境中安裝了以下工具：
- Node.js： React 項目需要 Node.js 環境來運行。可以從 Node.js 官網 下載并安裝。
- npm 或 Yarn： 包管理器，Node.js 安裝時通常會自帶 npm。如果喜歡 Yarn，也可以單獨安裝。
3. 創建 React 項目
最簡單和推薦的方式是使用 Create React App (CRA) 來創建一個基于 TypeScript 的 React 項目。CRA 是一個官方支持的工具，可以快速搭建一個配置完善的 React 開發環境。
使用 Create React App
在您的終端中運行以下命令：
npx create-react-app my-ts-react-app --template typescript
# 或者如果您使用 yarn
# yarn create react-app my-ts-react-app --template typescript
my-ts-react-app是項目的名稱，可以替換為任何想要的名稱。--template typescript標志告訴 CRA 使用 TypeScript 模板來初始化項目。
命令執行完成后，CRA 會自動安裝所有必要的依賴，并創建一個完整的 React 項目結構。
4. 項目結構概覽
進入新創建的項目目錄：
cd my-ts-react-app
您會看到類似以下的目錄結構：
my-ts-react-app/
├── public/
├── src/
│ ├── App.css
│ ├── App.test.tsx
│ ├── App.tsx // 核心組件
│ ├── index.css
│ ├── index.tsx // 入口文件
│ ├── react-app-env.d.ts // TypeScript 類型定義
│ ├── reportWebVitals.ts
│ └── setupTests.ts
├── .gitignore
├── package.json
├── README.md
├── tsconfig.json // TypeScript 配置文件
└── yarn.lock (或 package-lock.json)
其中幾個重要的文件和目錄：
src/App.tsx：主要 React 組件，在這里編寫大部分 UI 代碼。src/index.tsx：項目的入口文件，負責渲染根 React 組件。tsconfig.json：TypeScript 的配置文件，在這里調整 TypeScript 的編譯選項。react-app-env.d.ts：包含 Create React App 自動生成的類型聲明，通常無需修改。
5. 運行項目
現在，您可以運行您的 React 項目了：
npm start
# 或者
# yarn start
瀏覽器會自動打開 http://localhost:3000，并顯示一個默認的 React 應用頁面。
6. 編寫 TypeScript React 代碼示例
現在我們來修改 src/App.tsx，添加一些帶有 TypeScript 類型的代碼。
import React, { useState } from 'react';
import './App.css';// 定義 Props 的接口
interface WelcomeProps {name: string;age?: number; // 可選屬性
}// 函數組件使用 React.FC<Props> 或 (props: Props) => JSX.Element
const Welcome: React.FC<WelcomeProps> = ({ name, age }) => {return (<div><h1>Hello, {name}!</h1>{age && <p>You are {age} years old.</p>}</div>);
};function App() {const [count, setCount] = useState<number>(0); // useState 明確指定類型const increment = (): void => { // 函數返回類型為 voidsetCount(prevCount => prevCount + 1);};return (<div className="App"><header className="App-header"><Welcome name="TypeScript User" age={30} /><Welcome name="Guest" /> {/* 不傳入 age 也是允許的 */}<p>Count: {count}</p><button onClick={increment}>Increment</button></header></div>);
}export default App;
代碼解釋：
interface WelcomeProps： 我們定義了一個接口來描述Welcome組件接收的 props。這使得代碼更具可讀性，并且在您使用Welcome組件時會獲得類型檢查。age?: number;：?表示age是一個可選屬性。const Welcome: React.FC<WelcomeProps> = (...)： 推薦使用React.FC（Function Component）泛型來為函數組件指定 props 類型。useState<number>(0)： 在使用useState時，您可以通過泛型參數明確指定 state 的類型，盡管 TypeScript 通常能夠推斷出簡單類型的類型。increment: (): void => { ... }： 顯式聲明函數的返回類型為void，表示它不返回任何值。
7. 額外的 TypeScript 配置（可選）
tsconfig.json 文件是 TypeScript 項目的核心配置文件。CRA 已經為您配置了一個合理的默認值，但您可能需要根據項目需求進行一些調整。
一些常用的配置項：
"target": "es5"： 指定編譯后的 JavaScript 版本。通常保持為es5以獲得更好的瀏覽器兼容性。"jsx": "react-jsx"： 指定 JSX 的處理方式。"strict": true： 啟用所有嚴格的類型檢查選項，強烈推薦開啟，這有助于編寫更健壯的代碼。"baseUrl": "src"： 允許您進行模塊路徑別名設置，例如import SomeComponent from 'components/SomeComponent'。
可以查閱 TypeScript 文檔 了解更多 tsconfig.json 的配置選項。
