Typescript使用类似于密钥的本地存储中的值

Question

我想从localHost获得语言，并在翻译管道中使用它，如下所示：

transform(value: string): string {...

localStorage.setItem("language", JSON.stringify("en"));

let language = JSON.parse(localStorage.getItem("language") ?? "en");

language = language as keyof typeof translates[number];

const translates: {
key: string;
cz: string;
en: string;
}[]

let returnTranslate = "";
translates.forEach((item) => {
if (item["key"] === value) {
returnTranslate = item[language];
}
});

但我得到了这个错误：

元素隐式具有"any"类型，因为类型为"any"的表达式不能用于索引类型为"｛key:string；cz:sstring；en:string！｝">

在这部分代码中：

item[language]

Answer 1

TS编译器不满意，因为您试图使用隐式any类型进行索引。

但是，为什么您的language变量是隐式any呢？它来自第一次分配

let language = JSON.parse(localStorage.getItem("language") ?? "en");
// language is of type any here

此处使用as

language = language as keyof typeof translates[number];

暂时让TS编译器知道您在这里强制使用类型，但随后在代码的后面使用language变量(类型为any(作为索引，TS编译器不喜欢这样。

因此，您必须使用as，而实际上使用language作为索引

returnTranslate = item[language as keyof typeof translates[number]];

但因为这很冗长，而且您知道language应该一直是keyof typeof translates[number]，所以您可以一开始就正确地执行。

let language = JSON.parse(localStorage.getItem("language") ?? "en") as keyof typeof translates[number];

通过此更改，您还可以去掉行language = language as keyof typeof translates[number];。

在TS操场上运行此示例