TypeScript中能否基于对象type属性获取对应接口类型？

当然可以！在TypeScript中，我们可以通过**区分联合类型（Discriminated Unions）或者条件类型（Conditional Types）**来实现这个需求，完美适配你根据type属性获取对应接口的场景。下面分两种方案来讲解：

方案一：使用区分联合类型（推荐，更简洁直观） #

首先我们可以把你的两个接口合并成一个区分联合类型，TypeScript会自动根据type属性的值来推断具体的对象结构：

// 定义区分联合类型，用type作为区分符
type MyListItem = 
  | { size: number; name: string; type: 'text' | 'textarea' }
  | { size: number; name: string; type: 'checkbox'; label: string };

// 你的列表可以直接使用这个类型
const list: MyListItem[] = [
  { size: 100, name: 'label', type: 'text' },
  { size: 100, name: 'label2', type: 'textarea' },
  { size: 100, name: 'label3', type: 'checkbox', label: 'checkbox label' }
];

在使用的时候，TypeScript会自动进行类型窄化：

function processItem(item: MyListItem) {
  if (item.type === 'checkbox') {
    // 这里item会被自动推断为带label属性的类型，无需额外断言
    console.log(`Checkbox label: ${item.label}`);
  } else {
    // 这里item是text或textarea类型，没有label属性
    console.log(`Input name: ${item.name}`);
  }
}

list.forEach(processItem);

方案二：保留原有接口，用条件类型映射 #

如果你希望保留原来分开定义的MyListItem和MyListItemCheckbox接口，可以通过条件类型来实现动态匹配：

// 保留你原来的接口定义
interface MyListItem { size: number; name: string; type: 'text' | 'textarea' | 'checkbox' }
interface MyListItemCheckbox extends MyListItem { type: 'checkbox'; label: string }

// 定义条件类型，根据type属性返回对应接口
type GetListItem<T extends MyListItem> = 
  T['type'] extends 'checkbox' ? MyListItemCheckbox : MyListItem;

使用这个条件类型的示例：

function handleItem<T extends MyListItem>(item: T): GetListItem<T> {
  if (item.type === 'checkbox') {
    // 这里item被推断为MyListItemCheckbox，可以安全访问label
    item.label = 'Updated checkbox label';
  }
  return item as GetListItem<T>;
}

// 测试调用
const checkboxItem = handleItem(list[2]);
console.log(checkboxItem.label); // 正常访问，没有类型错误

为什么这两种方案有效？ #

• 区分联合类型是TypeScript处理这类多结构对象的最佳实践，它利用共同的type属性作为“标记”，让TS自动帮你缩小类型范围，避免手动类型断言。
• 条件类型则更灵活，适合需要保留原有接口结构的场景，通过泛型和条件判断动态返回对应的接口类型。

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