如何在TypeScript中收窄类型？无需类型断言通过类型检查

我有一段TypeScript代码无法通过类型检查，核心场景是：定义了由string、number、Date组成的联合类型SupportedHandlerType，泛型函数接收该联合类型中某一类型的数组，通过getHandler()动态判断数组元素类型并返回对应专用处理函数，但TypeScript无法自动识别类型收窄，报出“Type 'T' is not assignable to type 'string'”这类类型不匹配错误，希望找到不用as类型断言的解决方法。

示例代码如下：

type SupportedHandlerType = string | number | Date
type Handler<T> = (data: T[]) => void

function example<T extends SupportedHandlerType>(data: T[]) {
  const handler = getHandler(data)
  handler(data)
}

function stringHandler(data: string[]) {

}

function numberHandler(data: number[]) {
    
}

function dateHandler(data: Date[]) {
    
}

function getHandler<T>(data: T[]): Handler<T> {
    const first = data[0]
    if (typeof first == 'string') {
        return stringHandler // Type 'T' is not assignable to type 'string'
    }
    if (typeof first == 'number') {
        return numberHandler // 同样的类型不匹配错误
    }
    return dateHandler // 此处也有错误
}

解决方案：使用函数重载明确输入输出类型关联 #

通过为getHandler定义函数重载签名，明确不同输入数组类型对应的返回处理函数类型，让TypeScript能准确推断类型关系，无需类型断言即可通过检查：

type SupportedHandlerType = string | number | Date
type Handler<T> = (data: T[]) => void

function example<T extends SupportedHandlerType>(data: T[]) {
  const handler = getHandler(data)
  handler(data)
}

function stringHandler(data: string[]) {

}

function numberHandler(data: number[]) {
    
}

function dateHandler(data: Date[]) {
    
}

// 定义重载签名：明确输入类型与返回处理函数的对应关系
function getHandler(data: string[]): Handler<string>;
function getHandler(data: number[]): Handler<number>;
function getHandler(data: Date[]): Handler<Date>;
// 实现签名：覆盖所有可能的输入类型
function getHandler(data: SupportedHandlerType[]): Handler<SupportedHandlerType> {
    const first = data[0]
    if (typeof first === 'string') {
        return stringHandler
    }
    if (typeof first === 'number') {
        return numberHandler
    }
    return dateHandler
}

原理说明 #

• 重载签名告诉TypeScript：当传入string[]时，返回Handler<string>；传入number[]时返回Handler<number>，以此类推。
• 实现签名使用联合类型SupportedHandlerType[]作为输入，确保覆盖所有合法场景，内部的类型判断（typeof first）会让TypeScript自动识别返回值与对应重载签名的匹配关系，无需额外断言。

备选方案：使用类型谓词收窄数组类型 #

如果需要更细粒度的类型控制，可以通过类型谓词函数显式收窄数组的类型，让TypeScript识别数组的具体类型：

type SupportedHandlerType = string | number | Date
type Handler<T> = (data: T[]) => void

function example<T extends SupportedHandlerType>(data: T[]) {
  const handler = getHandler(data)
  handler(data)
}

function stringHandler(data: string[]) {

}

function numberHandler(data: number[]) {
    
}

function dateHandler(data: Date[]) {
    
}

// 定义类型谓词，判断数组是否为string[]
function isStringArray(arr: SupportedHandlerType[]): arr is string[] {
    return typeof arr[0] === 'string'
}

// 定义类型谓词，判断数组是否为number[]
function isNumberArray(arr: SupportedHandlerType[]): arr is number[] {
    return typeof arr[0] === 'number'
}

function getHandler(data: SupportedHandlerType[]): Handler<SupportedHandlerType> {
    if (isStringArray(data)) {
        return stringHandler
    }
    if (isNumberArray(data)) {
        return numberHandler
    }
    return dateHandler
}

这种方式通过自定义类型谓词，将数组类型从联合类型收窄为具体的单一类型，TypeScript就能正确识别返回的处理函数类型。

内容的提问来源于stack exchange，提问作者Kai Sellgren