如何从TypeScript数组ALL_RESPONSE_TYPES生成指定联合类型？

你可以通过TypeScript的类型推断和索引类型特性，直接从ALL_RESPONSE_TYPES数组自动生成目标联合类型，无需手动重复定义每个分支。

原代码 #

interface MetadataAccepted {
  a: string;
  b: number;
}
interface MetadataIgnored {
  c: number;
  d: string;
  e: {
    a: string
  }
}

const ALL_RESPONSE_TYPES = [
  ['ACCEPTED', { a: '', b: 0 } as MetadataAccepted],
  ['IGNORED', { c: 0, d: '', e: {a: ''} } as MetadataIgnored],
] as const;

解决方案1：条件类型推断 #

通过条件类型直接提取元组中的类型信息，写法简洁直观：

type ResponseType = typeof ALL_RESPONSE_TYPES[number] extends [infer Type, infer Metadata]
  ? { type: Type; metadata: Metadata }
  : never;

解决方案2：映射类型+索引访问 #

先提取数组元素的联合类型，再通过映射生成对应对象类型，最后提取出联合结果：

// 提取数组中每个元组的联合类型
type ResponseEntry = typeof ALL_RESPONSE_TYPES[number];

// 生成目标联合类型
type ResponseType = {
  [K in ResponseEntry as K[0]]: {
    type: K[0];
    metadata: K[1];
  };
}[ResponseEntry[0]];

效果验证 #

两种方案生成的ResponseType都会与你期望的类型完全一致：

type ResponseType =
  | {
      type: 'ACCEPTED';
      metadata: MetadataAccepted;
    }
  | {
      type: 'IGNORED';
      metadata: MetadataIgnored;
    };

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