介绍
Create React App为您提供了一组基本的包和配置来开始构建 React 应用程序。2.0 版引入了官方TypeScript支持。这允许 JavaScript 用户在 React 前端框架中使用 TypeScript 约定进行编写。TypeScript 是一种强大的工具，可帮助编写更安全、自文档化的代码，使开发人员能够更快地发现错误。
在本文中，您将使用 Create React App 设置带有 TypeScript 的 React 应用程序。
先决条件
要阅读本文，您需要：
- Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。
- 对 React 有一定的了解。您可以查看我们的How To Code in React.js系列。
- 熟悉TypeScript 约定。
- 建议使用支持代码提示的现代代码编辑器。Visual Studio Code通过IntelliSense提供此功能。
本教程已通过 Node v15.13.0、npmv7.8.0、react-scriptsv4.0.3、reactv17.0.2 和typescriptv4.2.3 验证。
启动 TypeScript 创建 React 应用程序
首先，打开终端窗口并导航到要在其中构建项目的目录。
然后，create-react-app与--template typescript标志一起使用：
- npx create-react-app cra-typescript-example --template typescript
您的终端窗口将显示初始消息：
Creating a new React app in [..]/cra-typescript-example.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...
该--template typescript标志指示 Create React App 脚本使用cra-template-typescript模板构建。这将添加主要的TypeScript 包。
注意：在之前版本的 Create React App 中，可以使用该--typescript标志，但此选项已被弃用。
安装完成后，您将拥有一个支持 TypeScript 的新 React 应用程序。导航到您的项目目录并在您的代码编辑器中打开它。
检查tsconfig.json文件
您可能已经注意到终端窗口显示以下消息：
We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.
Your tsconfig.json has been populated with default values.
该tsconfig.json文件用于配置 TypeScript 项目，类似于package.json用于 JavaScript 项目的方式。
该tsconfig.json所产生的创建应用程序做出反应将类似于以下内容：
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
此配置建立了几个编译规则和 ECMAScript 版本以进行编译。
检查App.tsx文件
现在，让我们打开App.tsx文件：
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
如果您之前使用过 Create React App，您可能已经注意到，这与App.jsCreate React App 为非 TypeScript 构建生成的文件非常相似。您获得与 JavaScript 项目相同的基础，但 TypeScript 支持已内置到配置中。
接下来，让我们创建一个 TypeScript 组件并探索它可以提供的好处。
创建一个 TypeScript 组件
首先在App.tsx文件中创建一个功能组件：
function MyMessage({ message }) {
return <div>My message is: {message}</div>;
}
此代码将采取message从值props。它将呈现div带有文本My message is:和message值的 a。
现在让我们添加一些 TypeScript 来告诉这个函数它的message参数应该是string.
如果你熟悉打字稿，你可能会认为你应该尝试追加message: string到message。但是，在这种情况下您必须做的是将所有类型的类型定义props为一个对象。
有几种方法可以实现这一点。
定义内联类型：
function MyMessage({ message }: { message: string }) {
return <div>My message is: {message}</div>;
}
定义一个props对象：
function MyMessage(props: { message: string }) {
return <div>My message is: {props.message}</div>;
}
使用单独的界面：
interface MyMessageProps {
message: string;
}
function MyMessage(props: MyMessageProps) {
return <div>My message is: {props.message}</div>;
}
您可以创建一个interface并将其移动到一个单独的文件中，以便您的类型可以存在于其他地方。
这可能看起来像很多写作，所以让我们看看我们从多写作中获得什么。
我们已经告诉这个组件它只接受 astring作为message参数。现在让我们尝试在我们的App组件中使用它。
使用 TypeScript 组件
让我们MyMessage通过将它添加到渲染逻辑来使用这个组件。
开始输入组件：
<MyMessage
如果您的代码编辑器支持代码提示，您会注意到在您开始键入组件时会出现组件的签名。
这有助于为您提供预期的值和类型，而无需导航回组件。这在处理单独文件中的多个组件时特别有用。
检查道具类型
现在，开始输入道具：
<MyMessage messa
一旦您开始输入message，您就可以看到该道具应该是什么：
这显示(JSX attribute) message: string。
检查类型错误
尝试传递一个数值message而不是字符串：
<MyMessage message={10} />
如果我们添加一个数字作为消息，TypeScript 将抛出错误并帮助您捕获这些打字错误。
如果有这样的类型错误，React 甚至不会编译：
这显示Type 'number' is not assignable to type 'string'。
结论
在本教程中，您将使用 Create React App 设置带有 TypeScript 的 React 应用程序。
您可以为所有组件和道具创建类型。您可以从现代代码编辑器的代码提示中受益。而且您将能够更快地捕获错误，因为 TypeScript 甚至不会让项目编译时出现类型错误。
如果您想了解有关 TypeScript 的更多信息，请查看我们的 TypeScript 主题页面以获取练习和编程项目。
