React 是一個(gè)用于構(gòu)建用戶界面的強(qiáng)大 JavaScript 庫。結(jié)合
TypeScript，您可以獲得類型安全和更好的開發(fā)體驗(yàn)。本文將詳細(xì)介紹如何從頭開始創(chuàng)建一個(gè)基于 TypeScript 的 React
項(xiàng)目。

1. 為什么選擇 TypeScript？

在深入創(chuàng)建項(xiàng)目之前，我們先了解一下為什么 TypeScript 對(duì) React 項(xiàng)目如此有益：

• 類型安全： TypeScript 允許您定義變量、函數(shù)參數(shù)和返回值的類型，從而在開發(fā)過程中捕獲許多常見的錯(cuò)誤。
• 更好的代碼可維護(hù)性： 明確的類型定義使代碼更易于理解和維護(hù)，尤其是在大型團(tuán)隊(duì)項(xiàng)目中。
• 增強(qiáng)的 IDE 支持： 現(xiàn)代 IDE（如 VS Code）對(duì) TypeScript 有出色的支持，提供自動(dòng)補(bǔ)全、代碼導(dǎo)航和重構(gòu)功能。
• 提前發(fā)現(xiàn)錯(cuò)誤： 在編譯階段就能發(fā)現(xiàn)潛在的錯(cuò)誤，而不是在運(yùn)行時(shí)才發(fā)現(xiàn)。

2. 環(huán)境準(zhǔn)備

在開始之前，請確保開發(fā)環(huán)境中安裝了以下工具：

• Node.js： React 項(xiàng)目需要 Node.js 環(huán)境來運(yùn)行?？梢詮?Node.js 官網(wǎng) 下載并安裝。
• npm 或 Yarn： 包管理器，Node.js 安裝時(shí)通常會(huì)自帶 npm。如果喜歡 Yarn，也可以單獨(dú)安裝。

3. 創(chuàng)建 React 項(xiàng)目

最簡單和推薦的方式是使用 Create React App (CRA) 來創(chuàng)建一個(gè)基于 TypeScript 的 React 項(xiàng)目。CRA 是一個(gè)官方支持的工具，可以快速搭建一個(gè)配置完善的 React 開發(fā)環(huán)境。

使用 Create React App

在您的終端中運(yùn)行以下命令：

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 是項(xiàng)目的名稱，可以替換為任何想要的名稱。
• --template typescript 標(biāo)志告訴 CRA 使用 TypeScript 模板來初始化項(xiàng)目。

命令執(zhí)行完成后，CRA 會(huì)自動(dòng)安裝所有必要的依賴，并創(chuàng)建一個(gè)完整的 React 項(xiàng)目結(jié)構(gòu)。

4. 項(xiàng)目結(jié)構(gòu)概覽

進(jìn)入新創(chuàng)建的項(xiàng)目目錄：

cd my-ts-react-app

您會(huì)看到類似以下的目錄結(jié)構(gòu)：

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)

其中幾個(gè)重要的文件和目錄：

• src/App.tsx：主要 React 組件，在這里編寫大部分 UI 代碼。
• src/index.tsx：項(xiàng)目的入口文件，負(fù)責(zé)渲染根 React 組件。
• tsconfig.json：TypeScript 的配置文件，在這里調(diào)整 TypeScript 的編譯選項(xiàng)。
• react-app-env.d.ts：包含 Create React App 自動(dòng)生成的類型聲明，通常無需修改。

5. 運(yùn)行項(xiàng)目

現(xiàn)在，您可以運(yùn)行您的 React 項(xiàng)目了：

npm start
# 或者
# yarn start

瀏覽器會(huì)自動(dòng)打開 http://localhost:3000，并顯示一個(gè)默認(rèn)的 React 應(yīng)用頁面。

6. 編寫 TypeScript React 代碼示例

現(xiàn)在我們來修改 src/App.tsx，添加一些帶有 TypeScript 類型的代碼。

import React, { useState } from 'react';
import './App.css';

// 定義 Props 的接口
interface WelcomeProps {
  name: string;
  age?: number; // 可選屬性
}

// 函數(shù)組件使用 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 => { // 函數(shù)返回類型為 void
    setCount(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： 我們定義了一個(gè)接口來描述 Welcome 組件接收的 props。這使得代碼更具可讀性，并且在您使用 Welcome 組件時(shí)會(huì)獲得類型檢查。
• age?: number;： ? 表示 age 是一個(gè)可選屬性。
• const Welcome: React.FC<WelcomeProps> = (...)： 推薦使用 React.FC（Function Component）泛型來為函數(shù)組件指定 props 類型。
• useState<number>(0)： 在使用 useState 時(shí)，您可以通過泛型參數(shù)明確指定 state 的類型，盡管 TypeScript 通常能夠推斷出簡單類型的類型。
• increment: (): void => { ... }： 顯式聲明函數(shù)的返回類型為 void，表示它不返回任何值。

7. 額外的 TypeScript 配置（可選）

tsconfig.json 文件是 TypeScript 項(xiàng)目的核心配置文件。CRA 已經(jīng)為您配置了一個(gè)合理的默認(rèn)值，但您可能需要根據(jù)項(xiàng)目需求進(jìn)行一些調(diào)整。

一些常用的配置項(xiàng)：

• "target": "es5"： 指定編譯后的 JavaScript 版本。通常保持為 es5 以獲得更好的瀏覽器兼容性。
• "jsx": "react-jsx"： 指定 JSX 的處理方式。
• "strict": true： 啟用所有嚴(yán)格的類型檢查選項(xiàng)，強(qiáng)烈推薦開啟，這有助于編寫更健壯的代碼。
• "baseUrl": "src"： 允許您進(jìn)行模塊路徑別名設(shè)置，例如 import SomeComponent from 'components/SomeComponent'。

可以查閱 TypeScript 文檔 了解更多 tsconfig.json 的配置選項(xiàng)。

到此這篇關(guān)于基于TypeScript 的React 項(xiàng)目創(chuàng)建的文章就介紹到這了,更多相關(guān)TypeScript React 創(chuàng)建項(xiàng)目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論