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

flow中文文档(八)

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

联合类型

有时,创建一个其他类型之一的类型很有用。例如,您可能希望编写一个接受一组原始值类型的函数。对于此Flow支持联合类型。

// @flow
function toStringPrimitives(value: number | boolean | string) {
  return String(value);
}

toStringPrimitives(1);       // Works!
toStringPrimitives(true);    // Works!
toStringPrimitives('three'); // Works!

// $ExpectError
toStringPrimitives({ prop: 'val' }); // Error!
// $ExpectError
toStringPrimitives([1, 2, 3, 4, 5]); // Error!

语法

联合类型是任意数量的类型,由 | 连接。

Type1 | Type2 | ... | TypeN

您还可以添加一个引导竖线,这在将联合类型拆分到多行时非常有用。

type Foo =
  | Type1
  | Type2
  | ...
  | TypeN

联合类型的每个成员可以是任何类型,甚至可以是另一个联合类型。

type Numbers = 1 | 2;
type Colors = 'red' | 'blue'

type Fish = Numbers | Colors;

联合类型需要一个输入,但全部输出

在调用接受联合类型的函数时,必须传入其中一种类型。但是在函数内部,我们需要处理所有可能的类型。

让我们重写函数,分别处理每种类型

// @flow
// $ExpectError
function toStringPrimitives(value: number | boolean | string): string { // Error!
  if (typeof value === 'number') {
    return String(value);
  } else if (typeof value === 'boolean') {
    return String(value);
  }
}

您会注意到,如果我们不处理值的每种可能类型,Flow将给我们一个错误。

联合 & 细化

当您有一个联合类型的值时,将其分开并分别处理每个单独的类型通常是很有用的。使用流中的联合类型,您可以将值“细化”为单个类型。

// @flow
function toStringPrimitives(value: number | boolean | string) {
  if (typeof value === 'number') {
    return value.toLocaleString([], { maximumSignificantDigits: 3 }); // Works!
  }
  // ...
}

通过检查值的类型并测试它是否是一个数字,Flow知道在该块内部它只是一个数字。然后,我们可以编写代码,将我们的值视为该块内的一个数字。

不相交联合

在flow中有一种特殊类型的联合,称为“不相交联合”,可用于改进。这些不相交的联合由任意数量的对象类型组成,每个对象类型都由一个属性标记。

例如,假设我们有一个函数,用于在发送请求后处理来自服务器的响应。当请求成功时,我们将返回一个具有成功属性的对象,该属性是true和我们已经更新的值。

{ success: true, value: false };

当请求失败时,我们将获得一个成功设置为false的对象和一个描述错误的Error属性。

{ success: false, error: 'Bad request' };

我们可以尝试用一个对象类型来表示这两个对象。但是,我们很快就会遇到这样的问题:我们根据Success属性知道一个属性存在,但Flow不知道。

// @flow
type Response = {
  success: boolean,
  value?: boolean,
  error?: string
};

function handleResponse(response: Response) {
  if (response.success) {
    // $ExpectError
    var value: boolean = response.value; // Error!
  } else {
    // $ExpectError
    var error: string = response.error; // Error!
  }
}

试图把这两种不同的类型合并成一种,只会给我们带来麻烦。

相反,如果我们创建这两种对象类型的联合类型,Flow将能够根据Success属性知道我们使用的是哪个对象。

// @flow
type Success = { success: true, value: boolean };
type Failed  = { success: false, error: string };

type Response = Success | Failed;

function handleResponse(response: Response) {
  if (response.success) {
    var value: boolean = response.value; // Works!
  } else {
    var error: string = response.error; // Works!
  }
}

精确的不相交联合

不相交的联合要求您使用单个属性来区分每种对象类型。不能通过不同的属性区分两个不同的对象。

// @flow
type Success = { success: true, value: boolean };
type Failed  = { error: true, message: string };

function handleResponse(response:  Success | Failed) {
  if (response.success) {
    // $ExpectError
    var value: boolean = response.value; // Error!
  }
}

这是因为在Flow中传递一个属性比对象类型期望的属性多的对象值是可以的(因为宽度子类型)。

// @flow
type Success = { success: true, value: boolean };
type Failed  = { error: true, message: string };

function handleResponse(response:  Success | Failed) {
  // ...
}

handleResponse({
  success: true,
  error: true,
  value: true,
  message: 'hi'
});

除非这些物体在某种程度上相互冲突,否则就没有办法区分它们。

但是,要解决这个问题,您可以使用精确的对象类型。

// @flow
type Success = {| success: true, value: boolean |};
type Failed  = {| error: true, message: string |};

type Response = Success | Failed;

function handleResponse(response: Response) {
  if (response.success) {
    var value: boolean = response.value;
  } else {
    var message: string = response.message;
  }
}

有了精确的对象类型,我们就不可能有额外的属性,所以对象之间会发生冲突,我们就能区分出哪个是哪个。

相关文章

  • flow中文文档(八)

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

  • flow中文文档(三)

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

  • flow中文文档(四)

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

  • flow中文文档(六)

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

  • flow中文文档(十)

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

  • flow中文文档(一)

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

  • flow中文文档(二)

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

  • flow中文文档(九)

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

  • flow中文文档(七)

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

  • flow中文文档(五)

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

网友评论

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

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