使用 CRA Template-Typescript 命令创建 TypeScript 项目

CRA (Create React App) Template-Typescript 命令是一个用来创建 React 项目的命令行工具，它支持 TypeScript，帮助开发人员快速搭建一个 TypeScript 编写的 React 应用程序。下面我们将介绍如何使用 CRA Template-Typescript 命令创建 TypeScript 项目。

安装 CRA

要使用 CRA Template-Typescript 命令，首先需要安装 CRA。执行以下命令：

npm install -g create-react-app

使用 CRA Template-Typescript 命令创建 TypeScript 项目

使用 CRA Template-Typescript 命令非常简单。首先，打开终端窗口并移动到你想要创建项目的目录下，然后执行以下命令：

npx create-react-app my-app --template typescript

在上述命令中，"my-app" 为你要创建的项目的名称，你可以修改为你喜欢的名称。"--template TypeScript" 表示我们要创建 TypeScript 项目。

执行上述命令后，需要等待一段时间，CRA 将自动下载所有必要的依赖项和文件。完成后，可以在终端窗口中看到以下内容：

Success! Created my-app at /Users/yourusername/my-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!

上述内容说明项目创建成功。接下来，进入项目并执行以下命令来运行项目：

cd my-app
npm start

在你的浏览器中打开 http://localhost:3000/，就可以看到一个 React + TypeScript 应用程序。

可能会遇到的问题

如何更新 TypeScript 版本？

你可以在你的项目根目录中运行以下命令来升级 TypeScript 版本：

npm install --save-dev typescript@4.0.3

如何添加新的 React 组件？

使用 CRA Template-Typescript 命令创建的 React + TypeScript 项目已经包含了一个示例组件。你可以在 src/components 目录下创建新的组件，然后在其他组件或应用程序中引用它。例如：

import React from 'react';

interface Props {
  name: string;
}

export const Hello: React.FC<Props> = props => {
  return <h1>Hello, {props.name}!</h1>;
};

TypeScript 代码无法编译？

如果你修改 TypeScript 代码后无法通过编译，请检查 TypeScript 语法是否正确，以及是否有 TypeScript 的错误或警告。你可以尝试使用以下命令来检查你的 TypeScript 代码：

npm run lint

这会运行 ESLint 和 Prettier 来检查代码是否符合规范，以及格式是否正确。

结论

CRA Template-Typescript 命令是一个非常有用和易用的工具，帮助开发人员快速搭建 TypeScript 编写的 React 应用程序。如果你正在开发 React 应用程序，并且希望使用 TypeScript 编写，那么 CRA Template-Typescript 命令是一个不错的选择。