【Flow】快速入门Flow.js 类型注释 #React源码基础知识

快速入门Flow.js 类型注释

前言

最近在看React.js，可能大家知道在React中，很大一部分源码都是用Flow.js写的，有时候会看不懂是什么意思。所以阅读源码之前，还是有必要快速看一下Flow.js的语法的。

简介

那Flow.js是什么框架呢？其实它和最近几年非常流行的TypeScript类似，是一个静态类型检查器，我们知道JavaScript是一个弱类型语言，在大型项目、框架实行的过程中，这种弱类型特征会带来一些意想不到的Bug等风险，所以需要引入类型检查器，从根本上避免类型带来的Bug。

Vue3.js就引入了TypeScript，React.js在构建的时候，TypeScript并不成熟，Facebook内部首先构建了自己的类型检查系统Flow.js，我们要知道Flow实际上是一个内部开源项目，它首先是为React和其他Facebook的JS框架服务的，因此学习Flow.js在我们实际编写上收获并不会比TS大，作者编写本文的目的也是仅仅为了希望阅读React源码的读者能够看懂源码的程度，用一个词来说就是浅尝辄止。

比较特殊的，需要注意的东西会包含在本文，特别基础、不需要知道也能看出来什么意思的不在本文的内容范围。

快速开始

本节给出Flow.js声明类型的快速示例。

// @flow
function concat(a: string, b: string) {
   
  return a + b;
}

concat("A", "B"); // 成功
concat(1, 2); // 错误

我们在参数上设置了类型边界（string），在接收到错误类型时Flow会报错。

类型注释

本节将简明给出所有类型的注释方法。

原始类型

原始类型包括：

• Booleans
• Strings
• Numbers
• null
• undefined (void in Flow types)
• Symbols (new in ECMAScript 2015)

原始类型有两种：

• 字面值

  true;
  "hello";
  3.14;
  null;
  undefined;
  

• 包装器对象

  new Boolean(false);
  new String("world");
  new Number(42);
  

在Flow中声明原始值分为小写（字面值）和首字母大写（包装器对象）。

Booleans

声明为boolean类型之后，只接受true, false 以及表达式判断。

// @flow
function acceptsBoolean(value: boolean) {
   
  // ...
}

acceptsBoolean(true);  		// 成功
acceptsBoolean(false); 		// 成功
acceptsBoolean(0);          // 错误
acceptsBoolean("foo");      // 错误
acceptsBoolean(Boolean(0)); // 成功
acceptsBoolean(!!0);        // 成功

Numbers

需要注意的是，NaN和Infinity都是可接受的。其他略。

Strings

如果需要串联{}和[]，需要加上String() toString() JSON.stringify()等方法。

// @flow
"foo" + String({
   });     
"foo" + [].toString(); 
"" + JSON.stringify({
   })

null和void

在Flow里，null和void是两种类型，分别处理null和undefined

可选对象属性

可选对象属性可以省略、其他类型，单单不能是null：

// @flow
function acceptsObject(value: {
     foo?: string }) {
   
  // ...
}

acceptsObject({
    foo: "bar" });     // 成功
acceptsObject({
    foo: undefined }); // 成功
acceptsObject({
    foo: null });      // 错误
acceptsObject({
   });                 // 成功

可选方法参数

同上

方法参数默认值

function method(value: string = "default") {
    /* ... */ }

可接受void、string、无参数，但不接受null参数

字面类型

用来限定参数只能是设定的字面值

// @flow
function getColor(name: "success" | "warning" | "danger") {
   
  switch (name) {
   
    case "success" : return "green";
    case "warning" : return "yellow";
    case "danger"  : return "red";
  }
}

getColor("success"); // 成功
getColor("danger");  // 成功
// $ExpectError
getColor("error");   // 错误

混合类型(mixed)

设定多种混合类型时，用|分割

多种可能类型

function stringifyBasicValue(value: string | number)