在Typescript界面​​中使用字符串枚舉計算的屬性無法使用點表示法進行訪問

Question

我覺得這個問題與此類似： Typescript接口，使用字符串常量作為屬性，但是我還是想確認這種行為。

說您有：

enum AcmeFields {
  ID = 'id',
  NAME = 'companyName',
}

然后是一個interface ：

interface AcmeInterface {
  [AcmeFields.ID]: string,
  [AcmeFields.NAME]?: string;
}

這樣說：
const sampleCompany: AcmeInterface = { id: 1, name: 'Sample Company' }

為什么我只能這樣做？ （打字稿為此提供自動完成功能）

sampleCompany['id']
sampleCompany[AcmeFields.ID]
sampleCompany['companyName']
sampleCompany[AcmeFields.NAME]

不是這個嗎？ （無自動填充或識別功能）

sampleCompany.id
sampleCompany.companyName

Answer 1

因為您的枚舉表達式將編譯為JavaScript，該JavaScript定義了一個具有屬性ID和NAME的對象，本質上是這樣的：

var AcmeFields = {
    ID: "id",
    NAME: "name"    
};

鑒於此，應該很清楚為什么需要使用ID和NAME來訪問枚舉成員： "id"和"name"在很大程度上是結果對象的值，而不是屬性。 （您可以通過查看已編譯的JavaScript或在TypeScript Playground中對此進行驗證。）

因此，當您編寫以下任何內容時：

sampleCompany['id']
sampleCompany[AcmeFields.ID]
sampleCompany['name']
sampleCompany[AcmeFields.NAME]

您正在編寫表達式以使用字符串動態訪問對象的屬性。 所有這些將返回undefined 。 TypeScript允許這種訪問而不會產生編譯錯誤，但這並不意味着表達式有用。 相反，您應該以AcmeFields.ID的形式訪問您的枚舉值，或者，如果需要，可以使用AcmeFields[ "ID" ] 。

只有當枚舉成員為數字時，TypeScript編譯器才會分配“反向映射”，因此，如果您具有：

enum AcmeNumbers {
    FIRST = 1,
    THIRD = 3    
};

然后， AcmeNumbers.FIRST和AcmeNumbers[1]給出1 。

由於可能與字符串枚舉產生混淆，因此，一般而言，我建議定義屬性名稱與值相同的字符串枚舉。