如何在打字稿中使用枚举作为索引键类型？

Question

考虑以下示例。

enum DialogType {
    Options,
    Help
}

class Dialog { 
    test() : string {
        return "";
    }
}

class Greeter {

    openDialogs: { [key in DialogType]: Dialog | undefined } = {
        0: undefined,
        1: undefined
    };

    getDialog(t: DialogType) {
        return this.openDialogs[t];
    }
}

const greeter = new Greeter();
const d = greeter.getDialog(DialogType.Help);
if (d) document.write(d.test());

Also in playground

它有 3 个问题/问题：

1. 为什么我不能在我的初始值设定项文字中省略属性，即使我将属性声明为 '|未定义'
2. 为什么我不能使用 'DialogType.Options' 作为类型键，而必须使用硬编码数字？
3. 为什么我必须使用 'key in DialogType' 而不是 'key: DialogType'？ （或者我可以吗？）

Answer 1

1. |undefined 没有使属性可选，只是意味着它可以是undefined，有一个建议使|undefined 成员可选，但目前尚未实现。您需要在] 之后使用? 以使所有属性都可选

   { [key in DialogType]?: Dialog }
   

2. 您可以将对话框枚举值用作键，但它们需要是计算属性：

   let openDialogs: { [key in DialogType]?: Dialog } = {
       [DialogType.Options]: undefined,
   };
   

3. { [key: number or string]: Dialog } 是一个索引签名。索引签名仅限于 number 或 string 作为密钥类型（即使两者的联合也不起作用）。因此，如果您使用索引签名，您可以按任何number 或string 进行索引（我们不能仅限于DialogType 键）。您在此处使用的概念称为映射类型。映射类型基本上基于键的联合（在本例中为 DialogType 枚举的成员）和一组映射规则生成一个新类型。我们上面创建的类型基本等价于：

   let o: { [DialogType.Help]?: Dialog; [DialogType.Options]?: Dialog; }