关于react项目静态类型检查方案

这篇文章主要介绍了关于react项目静态类型检查方案，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

为什么需要引入类型检查

JS作为一个弱类型语言，具有很大的灵活性，但是它的优点也是它的缺点，它很容易让我们忽视一些隐晦的逻辑，语法错误或数据类型错误，在编译期甚至运行时看上去都不会报错，但是可能会发生各种各样奇怪的和难以解决的bug。

如

function getPrice(x) {
  return x * 10;
}
getPrice('a23') // NaN

function getDefaultValue (key, emphasis) {
    let ret;
    if (key === 'name') {
      ret = 'GuangWong';
    } else if(key=== 'gender') {
      ret = 'Man';
    }else if(key ==='age'){
      ret = 18;
    } else {
       throw new Error('Unkown key ');
    }
    if (emphasis) {
      ret = ret.toUpperCase();
    }
    return ret;
  }
  
  getDefaultValue('name'); // GuangWong
  getDefaultValue('gender', true) // MAN
  getDefaultValue('age', true)

这是一个简单的函数，第一个参数 key 用来获得一个默认值。第二参数 emphasis 为了某些场景下要大写强调，只需要传入 true 即可自动将结果转成大写。

但是如果不小心将 age 的值写成了数字字面量，如果我调用 getDefaultValue('age', true) 就会在运行时报错。这个有可能是业务上线了之后才发生，直接导致业务不可用

除此以外，在工作中，我们也经常遇到过对象上的一个属性在n个模块之间传递之后变成了 undefined。以上是代码健壮性的问题，工作中比较头疼的另外一个问题是协作性问题：如何让一个别人提供的方法产出一个一目了然的文档？因为一个项目总会涉及到多人协作：同学 A 编写了函数 a()，而 同学 B 在调用函数 a() 的时候得一直撸着 API 文档才能知道 a() 需要什么参数，会返回什么参数。

而 同学 A 后续又改动了函数 a()，但是却忘记了更新文档，这时候新接手项目的 同学 C 看着 API 文档和函数 a() 一脸懵逼，问题浮出水面：团队协作中，提供的接口如何描述自身？

这其中涉及到的问题有：

1.接口如何描述自己的参数和返回值？
2.接口参数和返回值在无数需求迭代中改变了多次，而这个 API 对应的文档该如3.何更新？
4.数据格式如何描述？

为了解决上述诸多痛点，我们需要引入类型检查机制，所谓类型检查，就是在编译期尽早发现（由类型错误引起的）bug，又不影响代码运行（不需要运行时动态检查类型），使编写js具有和编写Java等强类型语言相近的体验，它可以:

• 使得大型项目可维护

• 提高效率，错误在编写代码时报错，而非编译阶段

• 增强代码的可读性，可以做到代码即文档

• 增强设计

采用Flow

Facebook出品的JavaScript静态类型检查工具，它可以部分引入，不需要完全重构整个项目，所以对于一个已有一定规模的项目来说，迁移成本更小，也更加可行

flow使用学习成本也相对比较低

1. 全局安装flow命令行工具

npm install -g flow-bin

1. 在项目根目录，创建.flowconfig文件

2. 安装babel插件

npm install --save-dev babel-plugin-transform-flow-strip-types

1. 在.babelrc文件中添加插件

{
  "presets": [ "es2015", "react", "stage-1" ],
  "plugins": [
        "react-flow-props-to-prop-types"
  ]
}

1. 安装扩展（⇧⌘X）：Flow Language Support

2. 修改VS Code对JavaScript的默认配置

Code -> 首选项 -> 用户设置（⌘,）
搜索：javascript.validate.enable
修改为："javascript.validate.enable": false

1. 在项目中使用

在需要静态检查的文件头引入flow,如:

/* @flow */
function getPrice(x: number) {
  return x * 10;
}
getPrice('a23') // vscode 工具提示错误

采用typescript

TypeScript 被称是 JavaScript 的超集，是微软公司推出的一种静态代码检查的方案，在 JavaScript 上做了一层封装，封装出 TypeScript 的特性，当然最终代码可以编译为 JavaScript

ChatGPT Website Builder

ChatGPT网站生成器，AI对话快速生成网站

下载

1.静态类型

let num: number;
num = 'likely';
    
[ts] 不能将类型“"likely"”分配给类型“number”。
let num: number

2.函数表达
js写法

export const fetch = function (url, params, user) {
  // dosomething

  return http(options).then(data => {
    return data
  }).catch(err => {
    return err
  })
}

以上下是一个 JavaScript 的函数，不看方法内的写法我们完全不知道这个 API 会有哪些坑。

export const fetch = function (url: string | object, params?: any, user?: User): Promise