Skip to main content

类型改进

细化使我们能够根据条件测试缩小值的类型。

¥Refinements allow us to narrow the type of a value based on conditional tests.

例如，在下面的函数中，value 是 "A" 或 "B" 的 联合。

¥For example, in the function below value is a union of "A" or "B".

1function func(value: "A" | "B") {2  if (value === "A") {3    value as "A";4  }5}

在 if 块内部，我们知道值必须是 "A"，因为这是 if 语句唯一为 true 的时候。

¥Inside of the if block we know that value must be "A" because that's the only time the if-statement will be true.

静态类型检查器能够判断 if 语句内的值必须是 "A" 的能力称为细化。

¥The ability for a static type checker to be able to tell that the value inside the if statement must be "A" is known as a refinement.

接下来，我们将在 if 语句中添加一个 else 块。

¥Next we'll add an else block to our if statement.

1function func(value: "A" | "B") {2  if (value === "A") {3    value as "A";4  } else {5    value as "B";6  }7}

在 else 块内部，我们知道值必须是 "B"，因为它只能是 "A" 或 "B"，并且我们已从可能性中删除了 "A"。

¥Inside of the else block we know that value must be "B" because it can only be "A" or "B" and we've removed "A" from the possibilities.

Flow 中的优化方法​

¥Ways to refine in Flow

typeof 检查​

¥typeof checks

你可以使用 typeof value === "<type>" 检查将值细化为 typeof 运算符支持的类别之一。

¥You can use a typeof value === "<type>" check to refine a value to one of the categories supported by the typeof operator.

typeof 运算符可以输出 "undefined"、"boolean"、"number"、"bigint"、"string"、"symbol"、"function" 或 "object"。

¥The typeof operator can output "undefined","boolean", "number", "bigint", "string", "symbol", "function", or "object".

请记住，typeof 运算符将为对象返回 "object"，还会返回 null 和数组。

¥Keep in mind that the typeof operator will return "object" for objects, but also null and arrays as well.

1function func(value: mixed) {2  if (typeof value === "string") {3    value as string;4  } else if (typeof value === "boolean") {5    value as boolean;6  } else if (typeof value === "object") {7    // `value` could be null, an array, or an object8    value as null | interface {} | $ReadOnlyArray<mixed>;9  }10}

要检查 null，请使用 value === null 平等 检查。

¥To check for null, use a value === null equality check.

1function func(value: mixed) {2  if (value === null) {3    value as null; // `value` is null4  }5}

要检查 数组，请使用 Array.isArray：

¥To check for arrays, use Array.isArray:

1function func(value: mixed) {2  if (Array.isArray(value)) {3    value as $ReadOnlyArray<mixed>; // `value` is an array4  }5}

相等检查​

¥Equality checks

如介绍性示例所示，你可以使用相等检查将值缩小到特定类型。这也适用于 switch 语句中进行的相等检查。

¥As shown in the introductory example, you can use an equality check to narrow a value to a specific type. This also applies to equality checks made in switch statements.

1function func(value: "A" | "B" | "C") {2  if (value === "A") {3    value as "A";4  } else {5    value as "B" | "C";6  }7
8  switch (value) {9    case "A":10      value as "A";11      break;12    case "B":13      value as "B";14      break;15    case "C":16      value as "C";17      break;18  }19}

虽然一般情况下不建议在 JavaScript 中使用 ==，但由于它执行强制转换，执行 value == null（或 value != null）会准确检查 value 中的 null 和 void。这适用于 Flow 的 或许 类型，它与 null 和 void 创建联合。

¥While in general it is not recommended to use == in JavaScript, due to the coercions it performs, doing value == null (or value != null) checks value exactly for null and void. This works well with Flow's maybe types, which create a union with null and void.

1function func(value: ?string) {2  if (value != null) {3    value as string;4  } else {5    value as null | void;6  }7}

你可以基于公共标签细化对象类型的联合，我们将其称为 不相交的对象联合：

¥You can refine a union of object types based on a common tag, which we call disjoint object unions:

1type A = {type: "A", s: string};2type B = {type: "B", n: number};3
4function func(value: A | B) {5  if (value.type === "A") {6    // `value` is A7    value.s as string; // Works8  } else {9    // `value` is B10    value.n as number; // Works11  }12}

真实性检查​

¥Truthiness checks

你可以在 JavaScript 条件中使用非布尔值。0、NaN、""、null 和 undefined 将全部强制转换为 false（因此被视为 "假的"）。其他值将强制为 true（因此被视为 "真实的"）。

¥You can use non-booleans in JavaScript conditionals. 0, NaN, "", null, and undefined will all coerce to false (and so are considered "falsey"). Other values will coerce to true (and so are considered "truthy").

1function func(value: ?string) {2  if (value) {3    value as string; // Works4  } else {5    value as null | void; // Error! Could still be the empty string ""6  }7}

你可以在上面的示例中看到为什么当你的值可以是字符串或数字时不建议进行真实检查：可能会无意中检查 "" 或 0。我们创建了一个名为 粗略空 的 Flow lint 来防范这种情况：

¥You can see in the above example why doing a truthy check when your value can be a string or number is not suggested: it is possible to unintentionally check against the "" or 0. We created a Flow lint called sketchy-null to guard against this scenario:

1// flowlint sketchy-null:error2function func(value: ?string) {3  if (value) { // Error!4  }5}

instanceof 检查​

¥instanceof checks

你也可以使用 实例化 运算符来缩小值范围。它检查提供的构造函数的原型是否位于值原型链中的任何位置。

¥You can use the instanceof operator to narrow a value as well. It checks if the supplied constructor's prototype is anywhere in a value's prototype chain.

1class A {2  amaze(): void {}3}4class B extends A {5  build(): void {}6}7
8function func(value: mixed) {9  if (value instanceof B) {10    value.amaze(); // Works11    value.build(); // Works12  }13
14  if (value instanceof A) {15    value.amaze(); // Works16    value.build(); // Error17  }18
19  if (value instanceof Object) {20    value.toString(); // Works21  }22}

赋值​

¥Assignments

流遵循你的控制流，并在分配给变量后缩小变量的类型。

¥Flow follows your control flow and narrows the type of a variable after you have assigned to it.

1declare const b: boolean;2
3let x: ?string = b ? "str" : null;4
5x as ?string;6
7x = "hi";8
9// We know `x` must now be a string after the assignment10x as string; // Works

类型保护​

¥Type Guards

你可以通过定义 类型保护 函数来创建可重用的细化。

¥You can create a reusable refinement by defining a function which is a type guard.

1function nonMaybe<T>(x: ?T): x is T {2  return x != null;3}4
5function func(value: ?string) {6  if (nonMaybe(value)) {7    value as string; // Works!8  }9}

细化无效​

¥Refinement Invalidations

也可以使细化无效，例如：

¥It is also possible to invalidate refinements, for example:

1function otherFunc() { /* ... */ }2
3function func(value: {prop?: string}) {4  if (value.prop) {5    otherFunc();6    value.prop.charAt(0); // Error!7  }8}

原因是我们不知道 otherFunc() 没有为我们的价值做一些事情。想象一下以下场景：

¥The reason for this is that we don't know that otherFunc() hasn't done something to our value. Imagine the following scenario:

1const obj: {prop?: string} = {prop: "test"};2
3function otherFunc() {4  if (Math.random() > 0.5) {5    delete obj.prop;6  }7}8
9function func(value: {prop?: string}) {10  if (value.prop) {11    otherFunc();12    value.prop.charAt(0); // Error!13  }14}15
16func(obj);

在 otherFunc() 内部，我们有时会删除 prop。Flow 不知道 if (value.prop) 检查是否仍然为真，因此它使细化无效。

¥Inside of otherFunc() we sometimes remove prop. Flow doesn't know if the if (value.prop) check is still true, so it invalidates the refinement.

有一种简单的方法可以解决这个问题。在调用另一个函数之前存储该值并使用存储的值。这样就可以防止细化失效。

¥There's a straightforward way to get around this. Store the value before calling another function and use the stored value instead. This way you can prevent the refinement from invalidating.

1function otherFunc() { /* ... */ }2
3function func(value: {prop?: string}) {4  if (value.prop) {5    const prop = value.prop;6    otherFunc();7    prop.charAt(0);8  }9}