如何创建基于 TypeScript 的 React 项目

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

在您的终端中运行以下命令：

bash 复制代码

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. 项目结构概览

进入新创建的项目目录：

bash 复制代码

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 项目了：

bash 复制代码

npm start
# 或者
# yarn start

浏览器会自动打开 http://localhost:3000，并显示一个默认的 React 应用页面。

6. 编写 TypeScript React 代码示例

现在我们来修改 src/App.tsx，添加一些带有 TypeScript 类型的代码。

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 => { // 函数返回类型为 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： 我们定义了一个接口来描述 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 的配置选项。