在前端开发中，React 已经成为了广泛使用的 UI 框架，而 TypeScript 也越来越受到欢迎。在结合 React 和 TypeScript 进行开发时，我们需要一个方便快捷的工具来初始化项目并生成项目脚手架，这时候我们就可以用到 npm 包 create-react-ts-app。
什么是 create-react-ts-app
create-react-ts-app 是一个 React + TypeScript 的项目生成器，它基于 create-react-app（官方提供的用于创建 React 项目的脚手架）并集成了 TypeScript 的支持。
使用 create-react-ts-app 可以快速创建基于 TypeScript 的 React 项目，而且项目初始化后已经配置好了 TypeScript 的支持。
如何安装 create-react-ts-app
使用 create-react-ts-app 时，我们需要在本地安装它。可以使用 npm 命令进行全局安装，也可以使用 npx 命令进行一次性使用。
使用 npm 全局安装
在命令行中执行以下命令：
npm install -g create-react-ts-app
使用 npx 命令
在命令行中执行以下命令：
npx create-react-ts-app my-app
如何使用 create-react-ts-app 创建项目
安装 create-react-ts-app 后，我们可以使用命令行在任意位置创建基于 TypeScript 的 React 项目。
在命令行中执行以下命令：
create-react-ts-app my-app
其中 my-app 是项目名称，可以自己定义。
create-react-ts-app 会自动创建项目目录，并且在当前目录下创建一个名为 my-app 的文件夹，这个文件夹就是我们的项目根目录。
如何运行项目
生成项目后，进入项目根目录，在命令行中执行以下命令：
cd my-app npm start
就可以在浏览器中打开 http://localhost:3000 查看我们的项目。
配置 TypeScript
create-react-ts-app 已经自动为我们配置好了 TypeScript，但是我们还可以进一步自定义 TypeScript 的配置。为此，我们需要在项目根目录下创建一个 tsconfig.json 的文件，该文件用来配置 TypeScript 编译器。
以下是一个例子：
-- -------------------- ---- -------
-
------------------ -
--------- ------
------ ------- --------------- ----------
---------------- -----
--------- -----
------------------ -----
--------- ---------
------------------- -------
------ --------
------------ -----
---------- ----
-------- -
------ ---------
-
--
---------- -------
-使用示例
以下是一个使用 create-react-ts-app 创建的示例项目。
首先，在命令行中执行以下命令：
create-react-ts-app my-app
进入项目目录：
cd my-app
启动项目：
npm start
使用示例：在 src 目录下创建一个 Hello.tsx 的文件，内容如下：
-- -------------------- ---- ------- ------ ----- ---- -------- --------- ----- - ----- ------- - ------ ----- ------ --------------- - -- ---- -- -- - ------ ----------- -------------- --
在 App.tsx 中使用：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ----------
-------- ----- -
------ -
-----
------ ----------- ----------- --
------
--
-
------ ------- ----效果如下：
至此，使用 create-react-ts-app 创建基于 TypeScript 的 React 项目就完成了。需要注意的是，这只是创建项目的第一步，我们还需要在这个基础上开发出我们的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672e20520b171f02e1d63