映射数组以访问 TypeScript 中的字典值

Question

我正在学习，所以我有下一个代码...

const numbers = {
 one: "1",
 two: "2",
 three: "3"
}
const arr= ["one","one","two","one","three"]

arr.map((each)=>numbers[each])

如果我执行 numbers["one"] 我得到“1”，但它不适用于数组，对于之前的代码我得到：

元素隐式具有“任意”类型，因为类型的表达式 'string' 不能用于索引类型。

我想使用字典中的字符串数组作为键，但我不知道该怎么做。

感谢您的帮助。

我找到了解决方案刚刚添加到我的代码 : Record

Answer 1

在您的评论中，您注意到您收到以下错误消息

“元素隐式具有“任意”类型，因为“字符串”类型的表达式不能用于索引类型”

由于数组的类型，each 的类型为 string.这意味着“任何可能的字符串值”。所以它可以是“一”或“二”，但也可以是“”或“BorisJohnson”或“Fish”。

这提出了一个问题，因为您使用该值来索引仅具有键“一”、“二”或“三”的对象文字。

有两种方法可以处理这个问题，第一种是为原始对象文字提供 索引签名

const numbers: { [key: string]: string} = {
 one: "1",
 two: "2",
 three: "3"
}
const arr = ["one", "one", "two", "one", "three"]

arr.map((each) => numbers[each])

但是，这是有问题的，因为在数组包含不在对象中的值的情况下，从映射返回的数组将键入 string[]，而实际上它应该是 (字符串| undefined)[] （因为 undefined 是当您使用实际上未包含在对象中的键索引对象时得到的结果）。

我的首选解决方案是为您的数组提供更严格的类型：

const numbers = {
 one: "1",
 two: "2",
 three: "3"
}
const arr: (keyof typeof numbers)[] = ["one", "one", "two", "one", "three"]

arr.map((each) => numbers[each])

这是一种更聪明的方法，因为如果您尝试将原本不是对象键的内容放入该数组中，编译器将抛出错误。由于此编译器错误，您的 each 变量现在保证是 numbers 的键之一，因此将输入 "one" | “两个”| “三”。

因此，每当您使用其中一个键对数字进行索引时，您只会得到一个字符串，因此您的数组将被正确键入，这是有道理的。