面试题：如何安全地使用unknown类型进行函数参数传递

Question

假设有一个函数`processData`，它接收一个`unknown`类型的参数。要求在函数内部安全地处理这个参数，判断它是否为数组，如果是数组则输出数组元素个数，如果是字符串则输出字符串长度，其他类型则输出'Unsupported type'。请编写该函数并解释类型断言或类型守卫的使用方法及原因。

Answer 1

function processData(data: unknown) {
    if (Array.isArray(data)) {
        return data.length;
    } else if (typeof data ==='string') {
        return data.length;
    } else {
        return 'Unsupported type';
    }
}

类型守卫的使用方法及原因

1. 类型守卫：在上述代码中，Array.isArray(data) 和 typeof data ==='string' 就是类型守卫。类型守卫是一种运行时检查机制，通过特定的条件判断来缩小类型的范围。
   • Array.isArray(data)：这是JavaScript内置的方法，用来判断传入的 data 是否为数组。如果 data 确实是数组，那么在这个 if 代码块内，TypeScript 就知道 data 的类型为数组，后续可以安全地访问数组的属性，比如 length。
   • typeof data ==='string'：这是JavaScript的 typeof 操作符，用来判断 data 是否为字符串类型。同样，在这个 if 代码块内，TypeScript 可以确定 data 的类型为字符串，从而可以安全地访问字符串的 length 属性。
2. 原因：由于函数接收的参数类型是 unknown，这是TypeScript中最顶级的类型，意味着任何类型的值都可以传入。在对 data 进行操作之前，我们需要明确它的具体类型，以避免运行时错误。类型守卫提供了一种安全的方式来缩小 unknown 类型的范围，使得我们可以在特定的代码块内以更具体的类型来处理数据。这样既保证了类型安全，又能在运行时根据数据的实际类型执行不同的逻辑。