如何实现TypeScript的Values类型以提取接口属性值？

你需要的Values泛型可以通过TypeScript的索引类型查询和索引访问类型组合实现，代码非常简洁：

type Values<T> = T[keyof T];

工作原理 #

1. keyof T：提取接口T的所有属性名，生成一个属性名的联合类型（比如对于ButtonTheme，keyof ButtonTheme就是'Black' | 'White' | 'WhiteOutlined' | 'Yellow'）。
2. T[keyof T]：通过索引访问，获取接口T中每个属性名对应的属性值类型，TypeScript会自动将这些类型合并为一个联合类型，也就是你需要的所有属性值的集合。

验证示例 #

用你提供的接口测试：

interface ButtonTheme {
  readonly Black: 'BLACK';
  readonly White: 'WHITE';
  readonly WhiteOutlined: 'WHITE-OUTLINED';
  readonly Yellow: 'YELLOW';
}

interface ButtonType {
  readonly Checkout: 'CHECKOUT';
  readonly Pay: 'PAY';
  readonly Simple: 'SIMPLE';
}

interface ButtonWidth {
  readonly Auto: 'AUTO';
  readonly Max: 'MAX';
  readonly MaxImportant: 'MAX_IMPORTANT';
}

type Theme = Values<ButtonTheme>; 
// 类型为 'BLACK' | 'WHITE' | 'WHITE-OUTLINED' | 'YELLOW'

type Type = Values<ButtonType>; 
// 类型为 'CHECKOUT' | 'PAY' | 'SIMPLE'

type Width = Values<ButtonWidth>; 
// 类型为 'AUTO' | 'MAX' | 'MAX_IMPORTANT'

这个泛型完全替代了enum的取值效果，且适用于所有包含固定属性值的接口场景。

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