美文网首页
flow中文文档(一)

flow中文文档(一)

作者: hhooke | 来源:发表于2018-08-15 15:21 被阅读0次

1.什么是flow

Flow是javascript代码的静态类型接触的一个工具。它可以使你的代码更有效率、更可控、更大规模的开发。

Flow通过静态类型检查到吗是否存在类型错误,比如: test

// @flow
function square(n:unmber): number {
    return n * n;
}

square("2")// Error!

flow 非常的只能,如果您的代码不需要类型,他也会自动帮你判断。

// @flow
function square(n) {
  return n * n; // Error!  cannot perform aritmetic operation because string [1] is not a number
}

square("2");

2.类型注释

添加类型注释是flow交互中的一个重要的部分。FLow具有很强的类型判断能力。但是有些时候也需要添加类型注释。类型注释是什么呢,继续往下看。

如下是一个是一个相加的函数:

function concat(a, b) {
    return a + b;
}

我们既可以传字符串的参数进入:

concat("a", "b");

也可以传数字进去相加:

concat(1, 2);

但是如果你想制定一个特定的类型的话,你就需要添加类型注释。如下:

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

concat("a", "b");

concat(1, 2); // Error! cannot call 'cancat' with '2' bound to 'b' beacuse number is incompatible with string
// 意思是不能用数字绑定参数a或者b,就是说不能传除了字符串之外的参数。

3.原始类型

JavaScript有很多不同的原始类型

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

需要注意的是,我们再flow中的类型注释需要是小写的。

Booleans

true/false 在javascript中是Booleans 的值,flow中也一样。

// @flow
function acceptsBoolean(value: boolean) {
  // ...
}
acceptsBoolean(true);  // Works!
acceptsBoolean(false); // Works!
acceptsBoolean("foo"); // Error!

js 中还可以隐式的将其他值转为booleans值

if (42) {} // 42 => true
if ("") {} // "" => false

下面代码中的函数中,在flow中是不支持隐式转换的,必须将其转换为Boolean值传入

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

acceptsBoolean(0);          // Error!
acceptsBoolean(Boolean(0)); // Works!
acceptsBoolean(!!0);        // Works!

Boolean 和 boolean值 是不同的类型

boolean值是一个与true或false类型的字面量,或者是一个表达式的结果如 a=b

Boolean是一个构造函数

Numbers

js的数字只有一种类型Number,不像其他语言一样有int float double型等。

// @flow
function acceptsNumber(value: number) {
  // ...
}

acceptsNumber(42);       // Works!
acceptsNumber(3.14);     // Works!
acceptsNumber(NaN);      // Works!
acceptsNumber(Infinity); // Works!
acceptsNumber("foo");    // Error!

需要注意的就是 number 和 Number 也不一样

Strings

需要注意的就是隐式转换:

"foo" + 42; // "foo42"
"foo" + {}; // "foo[object Object]"

flow 只接受字符串和数字连接的字符串。

// @flow
"foo" + "foo"; // Works!
"foo" + 42;    // Works!
"foo" + {};    // Error!
"foo" + [];    // Error!

如果想传入字符串和对象连接的字符串,必须是显式的转换才行,如下:

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

null and void

js中具有null和undefined, flow中对他们两个进行了单独处理

// @flow
function acceptsNull(value: null) {
  /* ... */
}

function acceptsUndefined(value: void) {
  /* ... */
}

acceptsNull(null);      // Works!
acceptsNull(undefined); // Error!
acceptsUndefined(null);      // Error!
acceptsUndefined(undefined); // Works!

Maybe types(判断类型)

在前面加一个问号创建类型。 ?string ?number

除了判断的类型之外,也可以是null 或者 void

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

acceptsMaybeString("bar");     // Works!
acceptsMaybeString(undefined); // Works!
acceptsMaybeString(null);      // Works!
acceptsMaybeString();          // Works!

可选对象属性

直接上例子了,看完例子相信大家都明白了

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

acceptsObject({ foo: "bar" });     // Works!
acceptsObject({ foo: undefined }); // Works!
acceptsObject({ foo: null });      // Error!
acceptsObject({});                 // Works!

可选函数参数

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

acceptsOptionalString("bar");     // Works!
acceptsOptionalString(undefined); // Works!
acceptsOptionalString(null);      // Error!
acceptsOptionalString();          // Works!

具有默认值的函数参数

// @flow
function acceptsOptionalString(value: string = "foo") {
  // ...
}

acceptsOptionalString("bar");     // Works!
acceptsOptionalString(undefined); // Works!
acceptsOptionalString(null);      // Error!
acceptsOptionalString();          // Works!

相关文章

  • flow中文文档(一)

    1.什么是flow Flow是javascript代码的静态类型接触的一个工具。它可以使你的代码更有效率、更可控、...

  • flow中文文档(三)

    Maybe Types(我称他为判断类型) 如果你想使用一个非number类型的参数,可以如下定义,当然判断类型是...

  • flow中文文档(四)

    对象类型语法 可选对象类型属性 密封对象 未密封对象 精确对象类型 ObjectsAsMaps 在JavaScri...

  • flow中文文档(六)

    类型别名 类型别名语法 类型别名泛型 不透明类型别名 子类型约束 类型别名 当您有要在多个位置重用的复杂类型时,可...

  • flow中文文档(八)

    联合类型 不相交联合 精确的不相交联合 联合类型 有时,创建一个其他类型之一的类型很有用。例如,您可能希望编写一个...

  • flow中文文档(十)

    类型转换表达式 类型断言 铸造类型 类型铸造 类型转换表达式 有时候,断言类型而不用函数或变量这样做是有用的。对于...

  • flow中文文档(二)

    Literal Types(绝对类型) flow不仅可以使用原始类型,还可以使用值作为类型注释。 多个值 Mixe...

  • flow中文文档(九)

    相交类型 相交类型语法 不可能相交类型 对象相交类型 获取类型的类型 相交类型 有时候,创建一个类型(它是一组其他...

  • flow中文文档(七)

    接口类型 接口语法 接口泛型 接口属性变量(只读和只写) 通用类型 泛型特性 接口类型 Flow中的类名义上是键入...

  • flow中文文档(五)

    数组类型 快速语法 数组访问不安全 元组类型 Class类型 类泛型 数组类型 要创建数组类型,可以使用Array...

网友评论

      本文标题:flow中文文档(一)

      本文链接:https://www.haomeiwen.com/subject/mmdwbftx.html