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 的配置选项。
