如何在TypeScript中根据rowType枚举值动态指定Row类的buttons属性类型？

当然可以实现这个需求！你需要用到TypeScript的区分联合类型（Discriminated Unions）——这正是解决这类"类型与枚举值绑定"场景的最佳实践。

为什么原来的写法行不通？ #

你当前的Row类定义里，buttons是MenuOption[] | ButtonOption[]的联合类型，但TypeScript无法自动把rowType的枚举值和buttons的类型关联起来。因为类的实例是单一类型，它不会根据枚举值的不同动态切换属性类型。

方案一：使用区分联合类型（推荐） #

我们可以把Row拆分成两个不同的接口，通过rowType这个"判别式"来让TypeScript自动推断类型：

首先先补全基础类型的定义（假设你已经有类似的接口）：

// 基础选项类型（根据你的实际需求调整）
interface MenuOption {
  menuId: string;
  label: string;
}

interface ButtonOption {
  buttonId: string;
  text: string;
}

// 保留你的枚举定义
export enum RowTypes {
  SelectMenu = 0,
  ButtonMenu = 1
}

然后定义两个关联了枚举值的接口，再合并成联合类型：

// 对应SelectMenu的行类型
interface MenuRow {
  rowType: RowTypes.SelectMenu;
  buttons: MenuOption[];
}

// 对应ButtonMenu的行类型
interface ButtonRow {
  rowType: RowTypes.ButtonMenu;
  buttons: ButtonOption[];
}

// 最终的Row类型是两者的联合
type Row = MenuRow | ButtonRow;

使用示例

当你处理Row类型的变量时，TypeScript会根据rowType自动推断buttons的类型：

function processRow(row: Row) {
  if (row.rowType === RowTypes.SelectMenu) {
    // 这里TypeScript明确知道row.buttons是MenuOption[]
    row.buttons.forEach(menuItem => {
      console.log(`菜单ID：${menuItem.menuId}`);
    });
  } else {
    // 这里自动推断row.buttons是ButtonOption[]
    row.buttons.forEach(button => {
      console.log(`按钮文本：${button.text}`);
    });
  }
}

这种方式不仅类型安全，而且代码可读性很高，TypeScript会在编译阶段就帮你避免类型错误。

方案二：泛型类实现（如果必须用类） #

如果你一定要用类的形式来实现，可以结合泛型和条件类型，让类的buttons类型随泛型参数动态变化：

// 定义枚举到按钮类型的映射条件类型
type RowTypeToButtons<T extends RowTypes> = 
  T extends RowTypes.SelectMenu ? MenuOption[] : ButtonOption[];

export class Row<T extends RowTypes> {
  buttons: RowTypeToButtons<T>;
  rowType: T;

  constructor(buttons: RowTypeToButtons<T>, rowType: T) {
    this.buttons = buttons;
    this.rowType = rowType;
  }
}

使用示例

创建实例时需要指定泛型参数（或者让TypeScript根据传入的rowType自动推断）：

// 手动指定泛型
const menuRow = new Row<RowTypes.SelectMenu>(
  [{ menuId: '1', label: '选择菜单' }],
  RowTypes.SelectMenu
);

// TypeScript自动推断泛型
const buttonRow = new Row(
  [{ buttonId: '2', text: '点击按钮' }],
  RowTypes.ButtonMenu
);

总结 #

• 推荐使用区分联合类型，它更符合TypeScript的类型系统设计，代码更简洁直观，类型推断也更自然。
• 如果一定要用类，泛型+条件类型的方式也能满足需求，但需要注意泛型参数的传递。

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