TypeScript数组解构调用泛型函数报错：参数类型不匹配求解

我写了下面的代码，期望调用bike({name:"bike"})时正常运行，但触发了类型错误：

const crateBox = <BikeData, CarData>()=>{

    const bike = (data:BikeData)=>{
        console.log("bike data: ", data);
    }

    const car = (data:CarData)=> {
        console.log("car data: ", data);
    }

    return [bike, car];
}

const [bike, car] = crateBox<{name:string}, {type:string}>();

bike({name:"bike"})

如果改成对象解构的写法就能正常运行，但我希望保留数组解构的用法，该怎么解决？

对象解构的可行代码：

const crateBox = <BikeData, CarData>()=>{

    const bike = (data:BikeData)=>{
        console.log("bike data: ", data);
    }

    const car = (data:CarData)=> {
        console.log("car data: ", data);
    }

    return {bike, car};
}

const {bike, car} = crateBox<{name:string}, {type:string}>();

bike({name:"bike"})

错误原因 #

TypeScript默认会把返回的数组推断为联合类型数组，也就是((data: {name: string}) => void) | ((data: {type: string}) => void)[]。这意味着解构出来的bike和car都是这两个函数类型的联合类型，调用时TypeScript要求参数必须满足联合类型中所有分支的类型要求，而{name:"bike"}显然不匹配{type:string}，因此触发类型错误。

而对象解构时，TS会明确识别每个属性的具体类型，不会合并成联合类型，所以不会报错。

解决方案 #

方案1：显式指定函数返回类型为元组 #

直接告诉TypeScript函数返回的是固定顺序的元组，每个位置的类型明确：

const crateBox = <BikeData, CarData>(): [
  (data: BikeData) => void,
  (data: CarData) => void
] => {
    const bike = (data: BikeData) => {
        console.log("bike data: ", data);
    };

    const car = (data: CarData) => {
        console.log("car data: ", data);
    };

    return [bike, car];
};

const [bike, car] = crateBox<{ name: string }, { type: string }>();

bike({ name: "bike" }); // 正常运行

方案2：使用as const断言 #

在返回数组时添加as const，让TypeScript将数组推断为只读元组，保留每个元素的具体类型，避免合并成联合类型：

const crateBox = <BikeData, CarData>() => {
    const bike = (data: BikeData) => {
        console.log("bike data: ", data);
    };

    const car = (data: CarData) => {
        console.log("car data: ", data);
    };

    return [bike, car] as const;
};

const [bike, car] = crateBox<{ name: string }, { type: string }>();

bike({ name: "bike" }); // 正常运行

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