你想知道在 Create React App (CRA) 中使用 TypeScript 的具体方法，我会分两种场景详细讲解（直接创建全新的 CRA + TS 项目、给已有的 CRA JS 项目迁移为 TS 项目），步骤简单可落地，新手也能轻松操作。

前置准备（必做）

和之前一致，确保已安装 Node.js（LTS 版本），验证命令如下，能显示版本号即符合要求：

node -v
npm -v

（可选）更换 npm 国内镜像源，提升依赖下载速度：

npm config set registry https://registry.npmmirror.com/

---

场景一：直接创建全新的 CRA + TypeScript 项目（推荐，零迁移成本）

这是最便捷的方式，CRA 提供了现成的 TypeScript 模板，无需手动配置，直接生成支持 TS 的项目。

步骤 1：执行创建命令

打开终端，输入以下命令（项目名称可自定义，例如 my-cra-ts-project，要求小写、无空格、连字符分隔）：

# npx 直接调用 CRA，--template typescript 指定 TS 模板
npx create-react-app my-cra-ts-project --template typescript

关键说明：

1. npx 无需你全局安装 create-react-app，会自动拉取最新版本的脚手架，避免全局版本过时的问题。
2. --template typescript 是启用 TS 的核心参数，CRA 会自动生成 TS 所需的配置文件和后缀为 .tsx/.ts 的核心文件。

步骤 2：进入项目目录

项目创建完成后（CRA 会自动安装所有依赖，无需额外执行 npm install），进入项目文件夹：

cd my-cra-ts-project

步骤 3：启动开发服务器

输入以下命令启动本地环境，验证 TS 项目是否正常运行：

npm start

步骤 4：验证效果

启动成功后，浏览器会自动打开 http://localhost:3000/，能看到 React 欢迎页面即说明项目创建成功。此时你可以查看项目目录，会发现核心文件后缀已变为 .tsx（包含 React JSX 语法）和 .ts（纯 TypeScript 逻辑），且存在 TS 专属配置文件。

项目中 TS 核心文件说明（新手重点了解）

1. tsconfig.json：TypeScript 项目的核心配置文件，CRA 已做了优化预设（如编译目标、模块规范、资源文件识别等），新手初期无需修改。
2. react-app-env.d.ts：CRA 专属的类型声明文件，用于让 TS 识别 React 项目中的静态资源（如图片、CSS、字体等），无需编辑，保留即可。
3. src/App.tsx：根组件，所有页面结构和业务逻辑的入口，TS 会自动校验组件的 props、返回值等类型。
4. src/index.tsx：项目入口文件，负责将 React 组件挂载到 DOM 节点，是 TS 项目的启动入口。

---

场景二：给已有的 CRA JavaScript 项目迁移为 TypeScript

如果你的项目已经是 CRA + JS 搭建的，无需重新创建项目，可直接迁移为 TS 项目，步骤如下：

步骤 1：进入已有的 CRA JS 项目目录

打开终端，进入你的 CRA 项目根目录（例如 my-existing-cra-project）：

cd my-existing-cra-project

步骤 2：安装 TS 相关依赖

输入以下命令，安装 TypeScript 以及 React 对应的类型声明包（CRA 所需的核心依赖）：

npm install --save typescript @types/react @types/react-dom @types/node

说明：

• typescript：TS 编译器核心包。
• @types/*：是第三方库的类型声明包，因为 React、React DOM 本身是用 JS 编写的，TS 无法识别其类型，需要安装对应的类型声明才能正常校验。

步骤 3：添加 TS 配置文件

在项目根目录下，手动创建一个名为 tsconfig.json 的文件（无需填写内容，CRA 启动时会自动填充默认配置）。

步骤 4：修改文件后缀（逐步迁移/一次性迁移）

CRA 支持 JS 和 TS 文件共存，你可以选择逐步迁移（适合大型项目，不影响现有功能）或一次性迁移（适合小型项目）：

1. 逐步迁移：将需要优化的 JS 文件后缀从 .js/.jsx 改为 .ts/.tsx（包含 JSX 语法的文件必须改为 .tsx，纯逻辑文件改为 .ts），修改一个验证一个。
2. 一次性迁移：将所有 src/ 目录下的 .js 改为 .ts，.jsx 改为 .tsx（例如 App.jsx → App.tsx，index.js → index.tsx）。

注意：如果迁移后出现 TS 语法错误，需要先修复错误（例如给变量添加类型约束、给组件 props 定义接口等），才能正常启动项目。

步骤 5：启动项目验证迁移效果

输入以下命令启动项目，若能正常运行且无 TS 报错，即说明迁移成功：

npm start

补充：启动后，CRA 会自动给 tsconfig.json 填充默认配置，同时生成 react-app-env.d.ts 文件，后续无需手动修改这两个文件。

---

简单实操：验证 TS 类型校验功能

为了让你直观感受到 CRA + TS 的类型校验效果，我们在 App.tsx 中做一个简单测试：

1. 打开 src/App.tsx，添加一个带类型约束的计数器逻辑：

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

// 定义组件，TS 会自动校验组件的返回值类型
function App() {
  // 明确指定 count 为 number 类型，初始值为 0
  const [count, setCount] = useState<number>(0);

  return (
    <div className="App">
      <header className="App-header">
        <p>当前计数：{count}</p>
        {/* 正常操作：给 number 类型赋值数字，无报错 */}
        <button onClick={() => setCount(count + 1)}>点击加 1</button>
        {/* 错误测试：尝试给 number 类型赋值字符串，TS 会立即提示红色波浪线报错 */}
        {/* <button onClick={() => setCount('这是一个字符串')}>错误赋值</button> */}
      </header>
    </div>
  );
}

export default App;

2. 若你解开注释中的错误代码，编辑器会立即提示类型不匹配错误，终端启动项目时也会报错，这就是 TS 的核心价值——提前规避运行时类型错误。

---

总结

1. 全新 CRA + TS 项目的核心命令是 npx create-react-app 项目名 --template typescript，无需额外配置。
2. 已有 CRA JS 项目迁移 TS，核心步骤是安装 TS 相关依赖、创建 tsconfig.json、修改文件后缀。
3. CRA 中 TS 文件后缀规范：含 JSX 语法用 .tsx，纯逻辑文件用 .ts，核心配置文件 tsconfig.json 和 react-app-env.d.ts 由 CRA 自动维护，新手无需手动修改。