基于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

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

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 => { // 函数返回类型为 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 的配置选项。

到此这篇关于基于TypeScript 的React 项目创建的文章就介绍到这了,更多相关TypeScript React 创建项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论