如何设置React项目默认使用TypeScript的.tsx文件

你可以通过设置npm/Yarn的全局配置，让npx create-react-app默认使用TypeScript模板，无需为每个新项目单独配置，具体方法如下：

全局默认配置方法 #

使用npm #

在终端运行以下命令，将create-react-app的默认模板设置为TypeScript：

npm config set create-react-app template typescript

使用Yarn #

如果你用Yarn包管理器，运行：

yarn config set create-react-app.template typescript

配置完成后，之后每次执行npx create-react-app my-app（或Yarn对应的命令），都会自动生成使用.tsx（组件文件）和.ts（非组件TypeScript文件）的React项目，无需额外添加--template typescript参数。

临时覆盖默认配置 #

如果某一次需要创建JavaScript（.jsx）项目，可以在命令中显式指定默认模板来覆盖全局设置：

npx create-react-app my-js-app --template cra-template

原理说明 #

create-react-app支持通过模板初始化项目，官方维护的cra-template-typescript模板会自动生成.tsx格式的组件文件，同时包含TypeScript所需的tsconfig.json等配置文件。设置全局默认模板后，工具会自动调用该模板初始化项目，实现默认用.tsx的需求。

内容的提问来源于stack exchange，提问作者VickySekhon