面试题：TypeScript类型守卫常见误区之类型窄化问题

Question

在TypeScript中，有如下代码：function printValue(value: string | number) { if (typeof value ==='string') { // 这里如何确保value此时就是string类型而不是string | number类型？请阐述背后的类型守卫和类型窄化原理。 console.log(value.length); } } 请详细解释类型守卫是如何在此处实现类型窄化的。

Answer 1

1. 类型守卫：
   • 在TypeScript中，类型守卫是一种运行时检查机制，它能够在特定代码块内缩小变量的类型范围。在上述代码中，typeof value ==='string'就是一个类型守卫。
   • 类型守卫使用一些特定的语法（如typeof、instanceof、in等操作符）来进行类型检查。这里typeof操作符用于检查value的类型是否为string。
2. 类型窄化：
   • 当TypeScript编译器遇到typeof value ==='string'这个类型守卫为真的分支时，它能够根据这个条件进行类型窄化。
   • 在if代码块内，编译器知道value满足typeof value ==='string'，所以它将value的类型从string | number窄化为string。这是因为typeof value ==='string'这个条件已经明确表明在这个分支中value的类型是string，从而使得console.log(value.length)这样访问string类型特有属性length的代码能够正确通过类型检查。
   • 这种类型窄化机制提高了代码的安全性和可靠性，让开发者可以在不同类型分支中安全地访问对应类型的属性和方法。