静态类型检查

  • 上一章讲了propTypes的使用，然后，能在代码运行前就检查类型会显得更有效率
  • Flow跟TypeScript等检查器就是为了解决这样的问题
  • 大型代码，推荐Flow跟TypeScript来检查

Flow

  • 由Facebook开发，常与React一起使用
  • Flow介绍
  • 下面介绍将 Flow 添加到项目中
yarn add -D flow-bin      # 添加依赖
yarn run flow init        # 生产 .flowconfig文件（一般在根目录下）

## 在 package.json 中添加命令
{
    ...
    "script": {
        "flow": "flow"
    }
}
  • 如果你的项目是由CRA建立的，到这一步就基本无需要配置了
  • 如果否，请看这一章来确定你的配置
  • ==
  • 在需要被Flow检查的文件顶部使用 // @flow 
// 运行 flow
yarn flow       # 或 npm run flow

TypeScript

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

yarn add typescript --dev           # 安装

tsc --init                          # 生成 tsconfig.json 文件
                                    # 如遇找不到 tsc 命令，请全局安装 ts
  • 类型定义，为了能够显示来自其他包的错误和提示，编译器依赖于声明文件。
  • 意思就是，必须提供包的声明文件，才能正常在Typescript中得到错误提醒或编程提示。
  • Bundled类型，指的是此库已经捆绑了自己的声明文件，通过在该项目中就包含了 index.d.ts 文件，一般在 package.json 中能找到
  • DefinitelyTyped类型，指的是第三方或微软提供的，一般需要安装，如
  • yarn add --dev @types/react
  • 局部声明类型，如果你用的包，不包含声明，也没有DefinitelyTyped，此时可以创建一个本地声明，在源目录的根目录下创建declarations.d.ts文件，并写入以下代码
declare module 'querystring' {
  export function stringify(val: object): string
  export function parse(val: string): object
}

额外

  • 此外的还有其他语言及其类型，这里不再赘述：Reason, Kotlin

results matching ""

    No results matching ""