如何基于嵌套接口属性动态创建TypeScript联合类型？

问题背景 #

现有TypeScript代码定义如下：

enum FormGroups {
  customer = 'customer',
  address = 'address',
}

interface Customer {
  'firstName': string;
}

interface Address {
  'street': string;
}

interface SomeFormEvent {
  valid: boolean;
  forms: {
    [FormGroups.customer]: {
      values: Customer,
    },
    [FormGroups.address]: {
      values: Address,
    }
  }
}

当前使用静态联合类型 type Forms = Customer | Address，但当SomeFormEvent['forms']中新增表单（如preferences及对应Preferences类型）时，需要手动更新Forms类型。尝试以下写法时报错：

type Forms = { [K in keyof SomeFormEvent['forms']]: SomeFormEvent['forms'][K]['values'] }

需要一种动态方式，让Forms自动包含SomeFormEvent['forms']下所有表单的values类型。

解决方案 #

你之前的写法是创建了一个映射对象类型，而非联合类型。要生成所有values类型的联合，只需直接提取映射对象的所有值类型即可：

type Forms = SomeFormEvent['forms'][keyof SomeFormEvent['forms']]['values'];

验证示例 #

如果新增preferences表单及对应类型：

interface Preferences {
  notification: boolean;
}

interface SomeFormEvent {
  valid: boolean;
  forms: {
    [FormGroups.customer]: { values: Customer },
    [FormGroups.address]: { values: Address },
    preferences: { values: Preferences } // 新增表单
  }
}

此时Forms会自动推导为 Customer | Address | Preferences，无需手动修改。

简化写法（可选） #

可以先提取forms的类型，让代码结构更清晰：

type FormEntries = SomeFormEvent['forms'];
type Forms = FormEntries[keyof FormEntries]['values'];

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