TypeScript泛型类型组合场景下工厂函数丢失动态类型问题求解

问题根因 #

你原有实现中productFactory仅定义了单个泛型参数C，当传入包含不同Module类型的数组时，TypeScript会自动将所有Module的data类型合并为联合类型，同时丢失数组每个下标位置的独立类型信息，因此无法实现对应位置的属性补全，还会触发类型报错。

完整解决方案代码 #

type ModularData = {};
// 定义Module类型
type Module<D extends ModularData> = {
  data: D;
};

function moduleFactory<D>(data: D): Module<D> {
  return { data };
}

const mod1 = moduleFactory({ ref: 0 });
const mod2 = moduleFactory({ otherRef: 123 });

// Product泛型改为接收Module数组类型
type Product<T extends Module<any>[]> = {
  modules: T;
};

// 使用可变元组约束保留每个数组元素的精准类型，const泛词为TS5.0+特性，低版本可直接去掉const修饰
function productFactory<const T extends Module<any>[]>(modulesList: [...T]): Product<T> {
  return {
    modules: modulesList,
  };
}

// 现在调用不会报错，final类型会精准保留modules每个位置的类型
const final = productFactory([mod1, mod2]);
// 可正常触发自动补全，无类型错误
final.modules[0].data.ref = 3;
final.modules[1].data.otherRef = 5;

效果说明 #

• 调用productFactory传入不同类型的Module实例不会触发类型错误
• hover到final变量上时，会完整展示modules数组每个位置对应的Module类型
• 访问final.modules对应下标的data属性时，会精准弹出对应类型的属性补全提示，无类型报错

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