[英]typescript and reactjs : how to use map - ERROR ts(7053)
this is my first asked question in here, so please help me to improve.这是我在这里提出的第一个问题,所以请帮助我改进。
In Typescript (ReactJs) given two arrays:在 Typescript (ReactJs) 中给出两个 arrays:
const array1:String = ["prop1", "prop2"];
const array2:MyType = { prop1 : "value1", prop2: "value2 }
where MyType is a kind:其中 MyType 是一种:
type MyType = {
prop1: string,
prop2: string
}
how can i print "value1" with the following code?如何使用以下代码打印“value1”?
console.log(array1.map(x => array2[x])
Right now I'am getting the following error:现在我收到以下错误:
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)
You're off to a good start, but there are a few things to fix!您有了一个良好的开端,但有一些问题需要解决!
Firstly, your first code snippet has incorrect types:首先,您的第一个代码段的类型不正确:
const array1:String = ["prop1", "prop2"];
const array2:MyType = { prop1 : "value1", prop2: "value2 }
array1
isn't a String
, it's an array of strings. array1
不是String
,它是一个字符串数组。 So its type should be string[]
.所以它的类型应该是
string[]
。 You're also missing a quote after "value2
:您还缺少
"value2
之后的报价:
const array1: string[] = ["prop1", "prop2"];
const array2: MyType = { prop1: "value1", prop2: "value2" }
Next, you have a syntax error in your console.log
—it's missing the ending )
:接下来,您的
console.log
中有一个语法错误——它缺少结尾)
:
console.log(array1.map(x => array2[x]))
Then lastly @CertainPerformance's answer can come in and save you: the type of array1
can be made more specific.然后最后@CertainPerformance 的答案可以进来并拯救你:
array1
的类型可以更具体。
const array1: (keyof MyType)[] = ["prop1", "prop2"];
// or, equivalently
const array1: Array<keyof MyType> = ["prop1", "prop2"];
All together now:现在都在一起了:
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]))
Now, you asked about how to print value1
.现在,您询问了如何打印
value1
。 This will actually log ["value1", "value2"]
.这实际上会记录
["value1", "value2"]
。 To log only the first one you can just access the first element after your .map()
:要仅记录第一个元素,您只需访问
.map()
之后的第一个元素:
console.log(array1.map(x => array2[x])[0])
const array1:String
is not specific enough (and even if you had to do something like that, use string
, not String
). const array1:String
不够具体(即使你必须做类似的事情,使用string
,而不是String
)。 Specify that array1
contains keys of the object (which should probably be called something like myTypeObj
- it's an object, not an array):指定
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])
Another option is to just keep TS from automatically widening the array1
items to string
:另一种选择是阻止 TS 自动将
array1
项目扩大到string
:
const array1 = ["prop1", "prop2"] as const;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.