TypeScript类型收窄实战：使用Array.isArray进行数组类型检查

TypeScript类型收窄实战：使用Array.isArray进行数组类型检查

til :memo: Today I Learned 项目地址: https://gitcode.com/gh_mirrors/ti/til

类型收窄概述

在TypeScript开发中，类型收窄（Type Narrowing）是一项非常重要的技术。它允许我们在特定代码块中将变量的类型从宽泛的类型缩小到更具体的类型，从而获得更精确的类型检查和代码提示。

问题场景

假设我们需要实现一个连接函数，将两个值合并成一个数组。第一个参数可以是单个值，也可以是数组；第二个参数则始终是数组。函数签名可能如下：

type ConcatFunction = (value: any | any[], array: any[]) => any[];

这种场景在实际开发中很常见，比如处理API返回的数据时，某些字段可能是单个对象也可能是对象数组。

解决方案：使用Array.isArray进行类型收窄

TypeScript能够识别JavaScript内置的Array.isArray方法作为类型保护（Type Guard）。这意味着在条件判断中使用这个方法时，TypeScript会自动收窄变量的类型范围。

const concat: ConcatFunction = (value, array) => {
    if(Array.isArray(value)) {
        // 在此代码块中，TypeScript知道value是数组类型
        return [...value, ...array];
    } else {
        // 在此代码块中，TypeScript知道value是非数组类型
        return [value, ...array];
    }
}

实际应用示例

让我们看几个调用示例：

// 传入单个值
concat(true, [1,2,3]);
// 返回: [true, 1, 2, 3]

// 传入数组
concat([1,2,3], ['a', 'b', 'c'])
// 返回: [1, 2, 3, 'a', 'b', 'c']

类型安全的改进

虽然上面的实现使用了any类型，但在实际项目中，我们可以使用泛型来增强类型安全性：

type BetterConcatFunction = <T>(value: T | T[], array: T[]) => T[];

const betterConcat: BetterConcatFunction = (value, array) => {
    if(Array.isArray(value)) {
        return [...value, ...array];
    } else {
        return [value, ...array];
    }
}

这样改进后，TypeScript会确保所有元素的类型一致，避免了不同类型混用可能带来的问题。

类型收窄的其他应用

除了数组检查外，TypeScript还支持多种类型收窄方式：

1. typeof类型保护
2. 真值收窄（Truthiness narrowing）
3. 等值收窄（Equality narrowing）
4. in操作符收窄
5. instanceof收窄
6. 自定义类型谓词

最佳实践

1. 优先使用内置的类型保护方法（如Array.isArray）
2. 在复杂场景下考虑使用自定义类型谓词
3. 尽量避免使用any类型，使用泛型代替
4. 合理组织代码结构，让类型收窄逻辑清晰可见

总结

通过Array.isArray进行类型收窄是TypeScript开发中的一项实用技巧，它不仅能帮助我们处理数组与非数组的混合场景，还能让代码获得更好的类型安全性。掌握这一技术可以显著提升TypeScript代码的质量和可维护性。

til :memo: Today I Learned 项目地址: https://gitcode.com/gh_mirrors/ti/til