typescript 和 reactjs：如何使用 map - 错误 ts(7053)

Question

这是我在这里提出的第一个问题，所以请帮助我改进。

在 Typescript (ReactJs) 中给出两个 arrays：

const array1:String = ["prop1", "prop2"];
const array2:MyType = { prop1 : "value1", prop2: "value2 }

其中 MyType 是一种：

type MyType = {
  prop1: string, 
  prop2: string
}

如何使用以下代码打印“value1”？

console.log(array1.map(x => array2[x])

现在我收到以下错误：

const array2: MyType
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'MyType'.
No index signature with a parameter of type 'string' was found on type 'MyType'.ts(7053)

Answer 1

您有了一个良好的开端，但有一些问题需要解决！

首先，您的第一个代码段的类型不正确：

const array1:String = ["prop1", "prop2"];
const array2:MyType = { prop1 : "value1", prop2: "value2 }

array1不是String ，它是一个字符串数组。 所以它的类型应该是string[] 。 您还缺少"value2之后的报价：

const array1: string[] = ["prop1", "prop2"];
const array2: MyType = { prop1: "value1", prop2: "value2" }

接下来，您的console.log中有一个语法错误——它缺少结尾) ：

console.log(array1.map(x => array2[x]))

然后最后@CertainPerformance 的答案可以进来并拯救你： array1的类型可以更具体。

const array1: (keyof MyType)[] = ["prop1", "prop2"];
// or, equivalently
const array1: Array<keyof MyType> = ["prop1", "prop2"];

现在都在一起了：

type MyType = {
  prop1: string, 
  prop2: string
}

const array1: (keyof MyType)[] = ["prop1", "prop2"];
const array2: MyType = { prop1 : "value1", prop2: "value2" }

console.log(array1.map(x => array2[x]))

现在，您询问了如何打印value1 。 这实际上会记录["value1", "value2"] 。 要仅记录第一个元素，您只需访问.map()之后的第一个元素：

console.log(array1.map(x => array2[x])[0])

Answer 2

const array1:String不够具体（即使你必须做类似的事情，使用string ，而不是String ）。 指定array1包含 object 的键（可能应该称为myTypeObj - 它是 object，而不是数组）：

type MyType = {
    prop1: string,
    prop2: string
}
const myTypeObj: MyType = { prop1: "value1", prop2: "value2" };
const array1: Array<keyof MyType> = ["prop1", "prop2"];

console.log(array1.map(x => myTypeObj[x])

另一种选择是阻止 TS 自动将array1项目扩大到string ：

const array1 = ["prop1", "prop2"] as const;