TypeScript函数参数联合类型|被推断为交叉类型&问题修复

问题场景 #

开发React Native应用时，实现服务端批量拉取数据后分类入库功能，定义了根据表名返回对应批量插入方法的工具函数：

static insertVariousTable = (table: TypeTables) => {
    switch (table) {
      case 'clase':
        return Clase.insertVarious;
      case 'estadoequipo':
        return EstadoEquipo.insertVarious;
      case 'formapesopatron':
        return FormaPesoPatron.insertVarious;
    }
  };

单独调用该方法时，返回值类型推断符合预期，为各表插入函数的联合类型：

let insertVarious: ((rows: ClaseType[]) => Promise<unknown>) | ((rows: TypeEstadoEquipo[]) => Promise<unknown>) | ((rows: FormaPesoPatronType[]) => Promise<unknown>) | undefined

但在异步循环中通过await调用返回的插入函数时，TypeScript会将函数参数推断为所有数组类型的交叉类型，与预期的联合类型逻辑不符，触发类型报错：

async function download(res:IRes){
for (key in res.data) {
    if (Object.prototype.hasOwnProperty.call(res.data, key)) {
      const tabla = res.data[key];
      let insertVarious = DbRequests.insertVariousTable(key);
      if (insertVarious) {
        // 此处参数类型被推断为 ClaseType[] & TypeEstadoEquipo[] & FormaPesoPatronType[]
        await insertVarious(tabla);
      }
    }
  }
}

问题原因 #

该现象是TypeScript函数参数逆变特性的正常表现：当调用一个联合类型的函数时，TS无法在当前上下文确定具体调用的是联合类型中的哪一个函数成员，为了保证类型安全，会要求传入的参数必须同时满足所有函数成员的参数类型要求，最终表现为参数类型被推断为所有成员参数类型的交叉类型。
本质问题是当前代码中，表名key、对应数据集tabla、插入函数insertVarious三者没有做类型层面的绑定关联，TS无法确认三者的对应关系。

修复方案 #

方案1：泛型绑定全链路类型（推荐，类型安全） #

先建立表名到对应行数据类型的映射关系，再通过泛型绑定表名、插入函数、数据集三者的类型关联，从根源让TS识别对应关系：

1. 定义类型映射表

// 表名与对应单条数据类型的一一映射
type TableRowMap = {
  clase: ClaseType;
  estadoequipo: TypeEstadoEquipo;
  formapesopatron: FormaPesoPatronType;
}
type TypeTables = keyof TableRowMap;

2. 改造insertVariousTable为泛型方法

static insertVariousTable = <T extends TypeTables>(table: T) => {
  switch (table) {
    case 'clase':
      return Clase.insertVarious as (rows: TableRowMap[T][]) => Promise<unknown>;
    case 'estadoequipo':
      return EstadoEquipo.insertVarious as (rows: TableRowMap[T][]) => Promise<unknown>;
    case 'formapesopatron':
      return FormaPesoPatron.insertVarious as (rows: TableRowMap[T][]) => Promise<unknown>;
    default:
      return undefined;
  }
};

3. 循环中显式绑定key的类型，关联数据集类型

async function download(res: IRes){
  for (const key in res.data) {
    if (Object.prototype.hasOwnProperty.call(res.data, key)) {
      // 绑定当前key为合法表名类型
      const tableKey = key as TypeTables;
      // 绑定当前数据集与表名对应
      const tabla = res.data[tableKey] as TableRowMap[typeof tableKey][];
      const insertVarious = DbRequests.insertVariousTable(tableKey);
      if (insertVarious) {
        // 此处TS可正确推断参数类型匹配，无报错
        await insertVarious(tabla);
      }
    }
  }
}

方案2：调用处类型断言（快速修复，无类型安全保障） #

如果不想改造原有类型定义，可以在调用插入函数时，直接将函数断言为匹配当前参数类型的签名，绕开TS的逆变检查：

async function download(res:IRes){
for (key in res.data) {
    if (Object.prototype.hasOwnProperty.call(res.data, key)) {
      const tabla = res.data[key];
      let insertVarious = DbRequests.insertVariousTable(key);
      if (insertVarious) {
        // 断言当前插入函数匹配当前tabla的类型
        await (insertVarious as (rows: typeof tabla) => Promise<unknown>)(tabla);
      }
    }
  }
}

注意：该方案下TS不会校验传入数据和插入函数的匹配关系，需要开发者自行保证逻辑正确，避免出现表和数据不匹配的问题。

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