TypeScript联合类型数组无法添加元素的问题排查与解决

问题代码 #

export interface CommonAnimalProps {
    name: string
}

export interface DogResponse extends CommonAnimalProps {
}

export interface CatResponse extends CommonAnimalProps {
    color: string,
}

export type AllAnimals = (DogResponse[] | CatResponse[])

export interface AllAnimalsProps {
    height: number | null,
    errorCodes: number[] | null,
    uuid?: string,
    [ANIMALS.dog]?: DogResponse[],
    [ANIMALS.cat]?: CatResponse[],
}

export enum ANIMALS {
    dog = 'dog',
    cat = 'cat'
}

export const transformCalculatedEmissionsResponse = (response: AllAnimalsProps): AllAnimals => {
    const result: AllAnimals = [];
    (Object.values(ANIMALS) as ANIMALS[]).map(animal => {
        const bars = response[animal]
        if (Array.isArray(bars)) {
            bars.map(bar => result.push(bar))
        }
    })
    return result
}

报错位置 #

代码在以下行执行失败：

bars.map(bar => result.push(bar))

报错信息 #

No results
Argument of type 'DogResponse | CatResponse' is not assignable to parameter of type 'CatResponse'.
Property 'color' is missing in type 'DogResponse' but required in type 'CatResponse'.

报错原因 #

你定义的AllAnimals是数组的联合类型：DogResponse[] | CatResponse[]，这意味着它只能是纯DogResponse数组，或者纯CatResponse数组，不能同时包含两种类型的元素。但你的代码逻辑是把狗和猫的元素都塞进同一个数组，这直接违反了联合类型的约束——TypeScript无法推断最终数组到底是纯狗还是纯猫，因此抛出类型不兼容的错误。

解决方法 #

方法一：修改AllAnimals为联合元素的数组（推荐）

如果业务需求是数组可以同时包含狗和猫的元素，应该把AllAnimals定义为元素是联合类型的数组，而不是数组的联合：

// 替换原AllAnimals定义
export type AllAnimals = (DogResponse | CatResponse)[]

这样result就能合法接收两种类型的元素，类型检查直接通过。

方法二：类型断言（不推荐）

如果必须保留原AllAnimals的定义，可以用类型断言绕过TypeScript的检查：

bars.map(bar => result.push(bar as DogResponse & CatResponse))

但这种方法会关闭类型校验，存在潜在的类型安全问题，仅在你能完全确保元素属性符合要求时使用。

方法三：按类型拆分返回（适用于单一类型数组需求）

如果业务逻辑确实要求返回纯狗或纯猫的数组，可以在函数里判断并返回对应类型的数组：

export const transformCalculatedEmissionsResponse = (response: AllAnimalsProps): AllAnimals => {
    const dogs = response[ANIMALS.dog] || [];
    const cats = response[ANIMALS.cat] || [];
    // 示例：优先返回狗数组，没有狗则返回猫数组
    return dogs.length > 0 ? dogs : cats;
}

这种方法符合原AllAnimals的类型约束，适用于只需要单一类型数组的场景。

内容的提问来源于stack exchange，提问作者four-eyes