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;