如何使用Typescript创建React应用程序

介绍

创建 React 应用程序为您提供了一组必要的包和配置来开始构建 React 应用程序。 2.0 版引入了官方的 TypeScript 支持。这允许 JavaScript 用户在 React 前端框架中使用 TypeScript 约定进行编写。 TypeScript 是一个强大的工具，可以帮助编写更安全、自记录的代码，使开发人员能够更快地发现错误。

在本文中，您将使用 Create React App 使用 TypeScript 设置 React 应用程序。

先决条件

要阅读本文，您将需要：

Node.js 安装在本地，您可以按照【X57X】如何安装Node.js 并创建本地开发环境【X126X】进行。
对 React 有一定的了解。你可以看看我们的 How To Code in React.js 系列。
熟悉 TypeScript 约定。
推荐使用支持 [X35X] 代码提示的现代代码编辑器。 Visual Studio Code 通过 IntelliSense 提供此功能。

本教程已使用 Node v15.13.0、npm v7.8.0、react-scripts v4.0.3、react v17.0.2 和 typescript v4.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 项目。

Create React App 生成的 tsconfig.json 将类似于以下内容：

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 文件：

src/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，您可能已经注意到这与 Create React App 为非 TypeScript 构建生成的 App.js 文件非常相似。您将获得与 JavaScript 项目相同的基础，但配置中已内置了 TypeScript 支持。

接下来，让我们创建一个 TypeScript 组件并探索它可以提供的好处。

创建 TypeScript 组件

首先在 App.tsx 文件中创建一个功能组件：

function MyMessage({ message }) {
  return <div>My message is: {message}</div>;
}

此代码将从 props 中获取 message 值。它将使用文本 My message is: 和 message 值呈现 div。

现在让我们添加一些 TypeScript 来告诉这个函数它的 message 参数应该是 string。

如果您熟悉 TypeScript，您可能认为应该尝试将 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 并将其移动到一个单独的文件中，以便您的类型可以存在于其他地方。

这可能看起来像很多写作，所以让我们看看我们从写作中获得什么。

我们告诉这个组件它只接受 string 作为 message 参数。现在让我们尝试在我们的 App 组件中使用它。

使用 TypeScript 组件

让我们通过将这个 MyMessage 组件添加到渲染逻辑来使用它。

开始输入组件：

<MyMessage

如果您的代码编辑器支持代码提示，您会注意到在您开始输入组件时会出现组件的签名。

这有助于为您提供预期的值和类型，而无需导航回组件。这在处理单独文件中的多个组件时特别有用。

检查道具类型

现在，开始输入道具：

<MyMessage messa

一旦你开始输入 message，你就可以看到那个 prop 应该是什么：

这将显示 (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 主题页面以获取练习和编程项目。