javascript - typescript y reactjs: cómo usar map - ERROR ts(7053)

esta es mi primera pregunta hecha aquí, así que por favor ayúdame a mejorar.

En Typescript (ReactJs) dado dos arreglos:

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

donde MyType es un tipo:

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

¿Cómo puedo imprimir "value1" con el siguiente código?

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

En este momento estoy recibiendo el siguiente 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)

Respuesta #1

¡Has comenzado bien, pero hay algunas cosas que hay que arreglar!

En primer lugar, tu primer fragmento de código tiene tipos incorrectos:

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

array1 no es un String, es un arreglo de cadenas. Así que su tipo debería ser string[]. También te falta una comilla después de "value2:

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

A continuación, tienes un error de sintaxis en tu console.log: le falta el ) de cierre:

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

Entonces, por último, la respuesta de @CertainPerformance puede intervenir y salvarte: el tipo de array1 puede hacerse más específico.

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

Todos juntos ahora:

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]))

Ahora, preguntaste sobre cómo imprimir value1. Esto en realidad registrará ["value1", "value2"]. Para registrar solo el primero, puedes simplemente acceder al primer elemento después de tu .map():

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

Respuesta #2

const array1:String no es lo suficientemente específico (e incluso si tuvieras que hacer algo así, usa string, no String). Especifica que array1 contiene claves del objeto (que probablemente debería llamarse algo como myTypeObj - es un objeto, no un arreglo):

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])

Otra opción es simplemente evitar que TS amplíe automáticamente los elementos de array1 a string:

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