TypeScript：尝试访问枚举时没有带有“字符串”类型参数的索引签名答案

【问题标题】：TypeScript: No index signature with a parameter of type 'string' when try to access the EnumTypeScript：尝试访问枚举时没有带有“字符串”类型参数的索引签名
【发布时间】：2020-09-01 20:10:58
【问题描述】：

当我尝试使用字符串变量 locale 访问 Enum Localization 中的值时遇到此错误。

enum Localization {
    'en-US' = '.com',
    'pt-BR' = '.com.br',
    'en-CA' = '.com.ca',
    'en-AU' = '.com.au',
    'en-IE' = '.com.ie',
    'string' = 'string'
};

 const locale:string = 'pt-BR' //This value will come from DB.
 const result = Localization[locale];

错误： Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof Localization'. No index signature with a parameter of type 'string' was found on type 'typeof Localization'.

在 Javascript 中正常工作。

     const Localization = {
       'en-US': '.com',
       'pt-BR': '.com.br',
       'en-CA': '.com.ca',
       'en-AU': '.com.au',
       'en-IE': '.com.ie',
     };
     
const locale = 'pt-BR';

console.log(Localization[locale]); // returns ".com.br"

我想知道：

1 - 如何将代码 Javascript 转换为在 TypeScript 中工作？
2 - 为什么打字稿返回此错误？
3 - 如果可能，我想要一些参考链接来阅读并理解 TypeScript 上出现此错误的原因。
4 - 在 TypeScript 中访问对象内部数据的更好方法是什么？

非常感谢。

【问题讨论】：

我在几个在线 ts 编辑器上运行了你的示例，但它们都运行良好。你能分享你的配置文件吗？
它正在使用打字稿：stackblitz.com/edit/typescript-39eczb?file=index.ts
stackoverflow.com/questions/50417254/…
嘿伙计们，非常感谢你们帮助我，要得到错误，您需要向 locale 变量添加类型，如 const locale: string = 'pt-BR' 我更新了示例。请尝试立即运行。

标签： javascript reactjs typescript

【解决方案1】：

以下内容至少适用于地图类型，我看不出为什么它不适用于显式枚举类型。 const result = Localization[locale as keyof typeof Localization];

来源reddit

【讨论】：

【解决方案2】：

对于这样的事情，我建议创建一个易于使用的键类型，并确保类型检查继续沿链工作。

enum Localization {
  'en-US' = '.com',
  'pt-BR' = '.com.br',
  'en-CA' = '.com.ca',
  'en-AU' = '.com.au',
  'en-IE' = '.com.ie',
  'string' = 'string'
};

type LocalizationKey = keyof typeof Localization;
const locale:LocalizationKey = 'pt-BR' //This value will come from DB.
const result = Localization[locale];


// TYPECHECKING TEST:
function localization(r: Localization) {
  console.log(r)
}

localization(result);

// @ts-expect-error this line should error because it's not a key of Localization
localization('fail');

【讨论】：