Typescript Control flow analysis(控制流分析)与Type guard(类型守卫)

所谓Control flow analysis是指，typescript根据代码上下文的可以推断出当前变量类型。比如典型的类型断言：

// 字符串存在substring方法
// 数字存在toFixed方法
const foo11 = (arg: string | number) => {
  // type guard (类型守卫)
  if (typeof arg === "string") {
  	// 这里此时一定是字符串
    arg.substring(0, 1);
  } else {
  	// 剩下的一定是数字。
    arg.toFixed(2);
  }
};
// 通过编译，不会有问题，感觉很智能。

但这也是感觉上的智能，实际还是有些问题的：

const foo12 = (arg: string | number) => {
  const numberGuard = typeof arg === "number";
  if (numberGuard) {
    // 此时已经可以确保arg就是一个Number，但typescript 4.3并不能确保分析出这是一个数字。。
    arg.toFixed(2); //Property 'toFixed' does not exist on type 'string | number'.

    // 不得不再次强转类型才可以
    (arg as number).toFixed(2);
  }
};

在4.4以后，Control flow analysis 更加强大了，虽然参考官方文档，并没有看出其是否可以推断出所有情况，但足以应付各种场景了。除了上边的numberGuard不会再抛错，typescript甚至可以做的更多：

通过属性的类型，确定对象的类型

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; sideLength: number };
 
function area(shape: Shape): number {
  const isCircle = shape.kind === "circle";
  if (isCircle) {
    // 这里通过属性得知对象一定是Circle
    return Math.PI * shape.radius ** 2;
  } else {
    // 剩下的就是Square!
    return shape.sideLength ** 2;
  }
}

值得思考的是，在上面的这些例子中，本质仍旧是通过一种断言去确认类型。而如isCircle或者numberGuard变量仅仅是这个条件断言的别名(alias)。之后就可以通过这个别名去做各种判断，所以typescript 也称这个特性为Aliased Conditions and Discriminants 这里可详见下方文档

参考文档： https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-4.html

标签：Control,Typescript,const,控制流,number,shape,typescript,arg,toFixed
来源： https://blog.csdn.net/weixin_43459866/article/details/120448548