此文章是翻译Static Type Checking这篇React（版本v16.2.0）官方文档。

Static Type Checking

像Flow 和TypeScript 的静态类型检查器可以在运行代码之前识别某些类型的问题。 他们还可以通过添加自动完成功能来改善开发人员的工作流程。 出于这个原因，对于更大的代码库我们建议使用Flow 或者TypeScript 来替代PropTypes。

Flow

Flow 是一个针对你的JavaScript 代码的静态类型检查器。它是Facebook 开发的，经常和React 一起使用。 它可以让你使用特殊的类型语法来注释变量，函数和React组件，并尽早地捕获错误。 你可以阅读introduction to Flow 来了解它的基本知识。

为了使用Flow，你需要：

  • 将Flow 添加到你的项目作为依赖项。
  • 确保Flow 语法从编译后的代码中剥离了。
  • 添加了类型注释并运行 Flow 来检查它们。

我们将在下面详细解释这些步骤。

Adding Flow to a Project

首先，在终端跳转到你的项目目录。你需要运行两条命令。

如果你使用Yarn，运行：

  1. yarn add --dev flow-bin
  2. yarn run flow init

如果你使用npm，运行：

  1. npm install --save-dev flow-bin
  2. npm run flow init

第一个命令安装了最新版的Flow 在你的项目中。第二个命令创建一个你需要提交的Flow 配置文件。

最后，添加flow 到你的package.json 的"scripts" 部分：

  1. {
  2.   // ...
  3.   "scripts": {
  4.     "flow": "flow",
  5.     // ...
  6.   },
  7.   // ...
  8. }

Stripping Flow Syntax from the Complied Code

Flow 通过使用类型注释的特殊的语法扩展了JavaScript 语言。 然而，浏览器并不知道这个语法，所以我们需要确保它最终不会在发送到浏览器的已编译的JavaScript 包中。

实现这一目标的确切方法取决于你使用的编译JavaScript 的工具。

Create React App

如果你的项目是使用Create React App 建立的，恭喜！ Flow 注释已经默认剥离，所以在这一步你不需要做任何事情。

Babel

注意：

这些说明不适用于使用Create React App 的用户。即使Create React App 在底层使用 Babel，它已经被配置为理解Flow。只有那些没有使用Create React App 的用户才需要跟进下面的步骤。

如果你手动为你的项目配置Babel，你将需要为Flow 安装一个特殊的 preset。

如果你使用Yarn，运行：

  1. yarn add --dev bable-preset-flow

如果你使用npm，运行：

  1. npm install --save-dev bable-preset-flow

然后将flow preset 加入你的Babel 配置。比如，如果你通过.babelrc 文件配置Babel，它可能会如下所示：

  1. {
  2.   "preset": [
  3.     "flow",
  4.     "react"
  5.   ]
  6. }

这将会让你在你的代码中使用Flow 语法。

注意：

Flow 不需要react preset，但是它们经常一起使用。Flow 自身了解JSX 语法，开箱即用。

Other Build Setups

如果你不使用Create React App 或Babel，你可以使用flow-remove-types 去跳过类型注解。

Running Flow

如果你遵循了上述的说明，你应该能够在第一次就运行Flow。

  1. yarn flow

如果你使用npm，运行：

  1. npm run flow

你应该看到像这样一条消息：

  1. No errors!
  2. ✨  Done in 0.17s.

Adding Flow Type Annotations

默认，Flow 只检查包含这个注解的文件：

  1. // @flow

通常它被放置在文件的顶部。 尝试将其添加到项目中的某些文件中，然后运行yarn flow 或npm run flow 来查看Flow 是否已经发现了一些问题。

也有一个选择可以强制Flow 不考虑注释检查所有文件. 对于现有的项目它可能太繁琐了，但对于一个新项目如果你想完全用Flow 来书写，那会是合理的。

现在你们都准备好了！我们建议查看以下资源了解更多关于Flow的信息：

TypeScript

TypeScript 是一门由Microsoft 开发的编程语言。 它是 JavaScript 的一个类型超集，包含它自己的编译器。 作为一种类型化语言，Typescript 可以早在你的应用程序上线之前，在构建时发现错误和错误。 你可以在这里了解更多关于在React 中使用TypeScript 的知识。

为了使用TypeScript， 你需要去：

  • 将TypeScript 添加为你的项目的依赖项
  • 配置Typescript 编译器选项
  • 使用正确的扩展
  • 为你使用的库添加定义

让我们详细地检查一下。

Adding TypeScript to a Project

一起开始于在终端运行一条命令。

  1. yarn add --dev typescript

如果你使用npm，运行：

  1. npm install --save-dev typescript

恭喜！你已经将最新版本的TypeScript 安装到你的项目中。 安装TypeScript 让我们可以访问tsc 命令。 在配置之前，让我们将tsc 添加到package.json 中的"scripts" 部分：

  1. {
  2.   // ...
  3.   "scripts": {
  4.     "build": "tsc",
  5.     // ...
  6.   },
  7.   // ...
  8. }

Configuring the TypeScript Compiler

除非我们告诉编译器要做什么，否则它对我们将毫无用处。在TypeScript 中，这些规则定义在一个叫tsconfig.json 的特殊文件中。运行如下命令生成该文件：

  1. tsc --init

看看现在生成的tsconfig.json，你可以看到有很多选项可以用来配置编译器。 有关所有选项的详细说明，请查看这里。

在许多选项中，我们会看到rootDir 和outDir。编译器将以真实的情况接收typescript 文件然后生成javascript 文件。然而我们不想混淆源文件和生成的输出。

我们将通过两个步骤解决这个问题：

  • 首先，像这样组织我们的项目结构。我们将我们所有的源文件放到src 目录。
  1. |-- package.json
  2. |-- src
  3. |   |- index.ts
  4. |-- tsconfig.json
  • 接下来，我们会告诉编译器源代码在哪以及输出该放哪。
  1. // tsconfig.json
  3. {
  4.   "compilerOptions": {
  5.     // ...
  6.     "rootDir": "src",
  7.     "outDir": "build"
  8.     // ...
  9.   },
  10. }

非常棒！现在当我们运行构建脚本时编译器将会将生成的javascript 代码输出到build 文件夹。TypeScript React Starter 提供了一个带有一套配置的tsconfig.json 文件让你上手。

通常，你不希望将生成的JavaScript 保留在源代码管理中，因此请确保将build 文件夹添加到 .gitignore 中。

File extensions

在React 中，你最有可能在.js 文件中编写你的组件。在TypeScript 中我们有两个文件扩展名：

.ts 是默认的文件扩展名，.tsx 是一个为包含JSX 代码使用的特殊扩展名。

Running TypeScript

如果你遵循了上述的说明，你应该能够在第一次就运行TypeScript。

  1. yarn build

如果你使用npm，运行：

  1. npm run build

你应该看到没有输出，这意味着它完全成功。

Type Definitions

为了能够显示来自其他包的错误和提示，编译器依赖于声明文件。 声明文件提供了关于库的所有类型信息。 这使我们能够在我们的项目中使用像那些在npm 中的JavaScript 库。

对于一个库来说，主要有两种方式获得声明：

Bundled - 该库捆绑了自己的声明文件。 这对我们来说很好，因为我们所要做的就是安装这个库，我们便可以马上使用它。 要检查一个库是否有bundled 类型，请在项目中查找index.d.ts 文件。 有些库会在package.json 文件的typings 或者types 域中配置它。

DefinitelyTyped - DefinitelyTyped 是一个巨大的为不绑定声明文件的库的声明库。这些声明是由Microsoft 和开源贡献者提供的。 例如React 并不捆绑它自己的声明文件。 相反，我们可以从DefinitelyTyped 中获得。 为此，请在终端中输入此命令。

  1. # yarn
  2. yarn add --dev @types/react
  4. # npm
  5. npm i --save-dev @types/react

Local Declarations 有时你想使用的包不绑定声明，也不能在DefinitelyTyped 上使用。 在这种情况下，我们可以有一个本地声明文件。 为此，请在源目录的根目录中创建一个declarations.d.ts 文件。 一个简单的声明可能是这样的：

  1. declare module 'querystring' {
  2.   export function stringify(val: object): string
  3.   export function parse(val: string): object
  4. }

Using TypeScript with Create React App

react-scripts-ts 自动配置一个create-react-app 项目去支持TypeScript。你可以像这样使用它：

  1. create-react-app my-app --scripts-version=react-scripts-ts

注意它是一个 第三方库 项目，不是Create React App 的一部分。

你也可以尝试typescript-react-starter。

你已经准备好写代码了！我们建议查看以下资源来了解有关TypeScript 的更多信息：

Reason

Reason 不是一种新的语言; 这是一个新的语法和工具链，由battle-tested 语言OCaml 提供支持。Reason 使OCaml 成为了面向 JavaScript 程序员的熟悉语法，而且迎合现有已知的NPM/Yarn 工作流。

Reason 是由Facebook 开发的，并且在其一些产品如Messenger 中使用。它仍然具有一定的实验性质，但它有由Facebook 维护的dedicated React bindings 和一个充满活力的社区。

Kotlin

Kotlin 是由JetBrains 开发的一门静态类型语言。其目标平台包括JVM，Android，LLVM 和JavaScript。

JetBrains 专门为React 社区开发和维护了几个工具：React bindings 以及Create React Kotlin App。 后者可以帮助你开始使用Kotlin 构建React 应用程序，而不需要构建配置。

Other Languages

注意，还有其他静态类型的语言可以编译成JavaScript，因此是React 兼容的。 例如，和elmish-react 一起使用的F#/Fable。查看他们各自的网站以获取更多信息，并欢迎添加更多和与React 一起工作的静态类型的语言到这个页面！