静态类型检查

像Flow和TypeScript等这些静态类型检查器，可以在运行前识别某些类型的问题。它们还可以通过增加自动补全等功能来改善开发者的工作流程。处于这个原因，我们建议在大型代码库中使用Flow或TypeScript来代替PropTypes。

Flow

Flow是一个针对Javascript代码的静态类型检测器。Flow由facebook开发，经常与React一起使用。Flow通过特殊的类型语法为变量，函数，以及React组件提供注解，帮助你尽早的发现错误。 完成以下步骤，便可以开始使用Flow：

• 将Flow添加到你的项目依赖中
• 确保编译后的代码去除了Flow语法
• 添加类型注解并且运行Flow来检查它们

在项目中添加Flow

首先进入项目的根目录，然后安装Flow

npm install --save-dev flow-bin

接下来，将 flow 添加到项目 package.json 的 "scripts" 部分，以便能够从终端命令行中使用它：

 "scripts": {
    "flow": "flow",
    // ...
  },

如果你使用npm，执行：

npm run flow init

这条命令将生成你需要提交的flow配置文件。

从编译后的代码中去除Flow语法

Flow 通过这种类型注释的特殊语法扩展了 JavaScript 语言。但是，浏览器不能够解析这种语法，所以我们需要确保它不会被编译到在浏览器执行的 JavaScript bundle 中。

具体方法取决于你使用的 JavaScript 编译工具。

Create React App

如果你的项目使用的是 Create React App，那么 Flow 注解默认会被去除，所以在这一步你不需要做任何事情。

Babel

注意：这些说明不适用于使用 Create React App 的用户。虽然 Create React App 底层也使用了 Babel，但它已经配置了去除 Flow。如果你没有使用 Create React App，请执行此步骤。

如果你得项目配置了Babel，你需要为Flow安装一个特殊preset. 如果你使用npm，执行：

npm install --save-dev @babel/preset-flow

接下来将 flow preset 添加到你的 Babel 配置 配置中。例如，如果你通过 .babelrc 文件配置 Babel，它可能会如下所示：

{
  "presets": [
    "@babel/preset-flow",
    "react"
  ]
}

这将让你可以在代码中使用 Flow 语法。

其他构建工具设置

如果没有使用 Create React App 或 Babel 来构建项目，可以通过 flow-remove-types 去除类型注解。

运行Flow

如果你使用npm，执行：

npm run flow

输出信息如下就是正确的：

No errors!
✨  Done in 0.17s.

添加Flow类型注释

默认情况下，Flow仅检查包含此注释的文件：

// @flow

通常，它位于文件的顶部。试着将其添加到项目的某些文件中，然后运行npm run flow来查看是否已经发现一些问题。 通过 Flow 来检查全部文件对于现有的项目来说，可能导致大量修改，但对希望完全集成 Flow 的新项目来说开启这个选项比较合理。 flow 文档

TypeScript

TypeScript是一种微软开发的编程语言。它是javascript的一个类型超集，包含独立的编译器。作为一种类型语言，TypeScript可以在构建时发现bug和错误，这样程序运行时就可以避免此类错误。 完成以下步骤，便可开始使用 TypeScript：

• 将 TypeScript 添加到你的项目依赖中。
• 配置 TypeScript 编译选项
• 使用正确的文件扩展名
• 为你使用的库添加定义

有兴趣的可以绕道TypeScript篇或者访问 官方文档

在Create React App 中使用TypeScript

Create React App 中内置了对TypeScript的支持。 需要创建一个使用TypeScript的新项目，在终端运行：

npx create-react-app my-app --template typescript

添加TypeScript到现有的项目中

这一切都始于在终端中执行的一个命令。 如果你使用yarn:

yarn add --dev typescript

如果你使用npm，执行：

npm install --save-dev typescript

安装TypeScript后我们就可以使用tsc命令。在配置编译器之前，先将tsc添加到package.json中的"scripts"部门：

{
  // ...
  "scripts": {
    "build": "tsc",
    // ...
  },
  // ...
}

配置TypeScript编译器

没有配置项，编译器提供不了任何帮助。在 TypeScript 里，这些配置项都在一个名为 tsconfig.json 的特殊文件中定义。可以通过执行以下命令生成该文件：

npx tsc --init

tsconfig.json 文件中，有许多配置项用于配置编译器。 通常情况下，你不希望将编译后生成的 JavaScript 文件保留在版本控制内。因此，应该把构建文件夹添加到 .gitignore 中。

文件扩展名

在React中，你的组件文件大多数使用.js作为扩展名。在TypeScript中，提供两种文件扩展名： .ts是否默认的文件扩展名，而.tsx是一个用于包含jsx代码的特殊扩展名。

运行TypeScript

npm run builds

类型定义

为了能够显示来自其他包的错误和提示，编译器依赖于声明文件。声明文件提供有关库的所有类型信息。这样，我们的项目就可以用上像 npm 这样的平台提供的三方 JavaScript 库。

Bundled - 该库包含了自己的声明文件。这样很好，因为我们只需要安装这个库，就可以立即使用它了。要知道一个库是否包含类型，看库中是否有 index.d.ts 文件。有些库会在 package.json 文件的 typings 或 types 属性中指定类型文件。

DefinitelyTyped - DefinitelyTyped 是一个庞大的声明仓库，为没有声明文件的 JavaScript 库提供类型定义。这些类型定义通过众包的方式完成，并由微软和开源贡献者一起管理。例如，React 库并没有自己的声明文件。但我们可以从 DefinitelyTyped 获取它的声明文件。只要执行以下命令。

# yarn
yarn add --dev @types/react

# npm
npm i --save-dev @types/react

局部声明 有时，你要使用的包里没有声明文件，在 DefinitelyTyped 上也没有。在这种情况下，我们可以创建一个本地的定义文件。因此，在项目的根目录中创建一个 declarations.d.ts 文件。一个简单的声明可能是这样的：

declare module 'querysting' {
    export function string(val:object):string
    export function string(val:string):object
}