基于变量动态改变类型答案

【问题标题】：Dynamically change type based on variable基于变量动态改变类型
【发布时间】：2022-01-30 22:01:05
【问题描述】：

所以我真的不知道这是否可能，但我还是想问一下。所以我有一个名为 Row 的类

export class Row {
    buttons: MenuOption[] | ButtonOption[];
    rowType: RowTypes;
    constructor(buttons: MenuOption[] | ButtonOption[], rowType: RowTypes) {
        this.buttons = buttons;
        this.rowType = rowType;
    }

}

它有一个叫做 rowType 的属性，它基本上是一个枚举

export enum RowTypes {
    SelectMenu = 0,
    ButtonMenu = 1
}

它还有一个名为buttons 的属性，它可以是一个MenuOption 数组，也可以是一个ButtonOption 数组。现在问题来了。我可以告诉打字稿根据 rowType 值更改属性按钮的类型吗？例如，如果 rowType 值为 1，则按钮类型为 MenuOption。

【问题讨论】：

标签： typescript discord.js

【解决方案1】：

您可以使用构造函数重载，以便确保RowTypes 和buttons 参数的类型之间存在1:1 的对应关系：

export class Row {
    buttons: MenuOption[] | ButtonOption[];
    rowType: RowTypes;
    
    constructor(buttons: MenuOption[], rowType: RowTypes.SelectMenu)
    constructor(buttons: ButtonOption[], rowType: RowTypes.ButtonMenu)
    constructor(buttons: MenuOption[] | ButtonOption[], rowType: RowTypes) {
        this.buttons = buttons;
        this.rowType = rowType;
    }
}

See proof-of-concept on TypeScript Playground.

【讨论】：

非常感谢，我不知道你可以添加多个构造函数。
@kalempster 这不是多个构造函数，而是重载 - 详情请参阅 this Q&A

【解决方案2】：

您可以键入构造函数参数以使代码更简洁，例如

type RowCtor = {
  buttons: MenuOption[];
  rowType: RowTypes.SelectMenu;
} | {
  buttons: ButtonOption[];
  rowType: RowTypes.ButtonMenu;
}

export class Row {
    buttons: MenuOption[] | ButtonOption[];
    rowType: RowTypes;
    constructor(args: RowCtor) {
        this.buttons = args.buttons;
        this.rowType = args.rowType
    }
}

【讨论】：