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

女爷i 2022-09-12 10:43 93阅读 0赞

所谓`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][https_www.typescriptlang.org_docs_handbook_release-notes_typescript-4-4.html]

[https_www.typescriptlang.org_docs_handbook_release-notes_typescript-4-4.html]: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-4.html