面试题：TypeScript 类型守卫与联合类型

Question

给定一个联合类型 `let value: string | number;`，假设你有一个函数 `printValue`，该函数需要根据 `value` 的实际类型进行不同的打印操作（字符串类型打印其长度，数字类型打印其平方）。请使用类型守卫实现 `printValue` 函数，并解释类型守卫是如何在函数执行过程中细化联合类型的。

Answer 1

function printValue(value: string | number) {
    if (typeof value ==='string') {
        console.log(value.length);
    } else {
        console.log(value * value);
    }
}

类型守卫细化联合类型的解释

1. 初始联合类型：value 的类型是 string | number，表示它可能是 string 类型或者 number 类型。
2. 类型守卫：在 printValue 函数中，使用 typeof value ==='string' 作为类型守卫。typeof 是 TypeScript 内置的类型守卫，它可以在运行时检查变量的类型。
3. 细化类型：当 typeof value ==='string' 为 true 时，TypeScript 能够在这个 if 代码块内确定 value 的类型为 string，这样就可以安全地访问 value.length。同理，在 else 代码块中，TypeScript 确定 value 的类型为 number，可以执行 value * value 操作。通过这种方式，类型守卫在函数执行过程中根据运行时的条件，将联合类型细化为具体的类型，从而避免类型错误。