Búsqueda de sitios web

typescript1.7 - ¿Cómo iterar sobre un arreglo indexado por cadenas en TypeScript?


He definido una propiedad estática de la siguiente manera:

private static colorsByName: { [index: string]: MyColorClass}

pero cuando intento usar for... of de la respuesta listada aquí: declaración for-in de TypeScript

for(let value of MyClass.colorsByName) {
    ...
}

Recibo un error:

El tipo { [index: string]: MyColorClass; } no es un tipo de arreglo ni un tipo de cadena.

Si cambio a usar for in, el error desaparece, pero value está tipado como any.

for(let value of MyClass.colorsByName) {
    ...
}

¿Cuál es el tipo real de value en este caso? Idealmente, me gustaría recorrer todos los valores en la propiedad colorsByName, ya sea con un enfoque de pares, o simplemente para obtener tipos MyColorClass.

for(let value of MyClass.colorsByName) {
    // value: MyColorClass
}

¿Cuáles son mis opciones?

Respuesta #1

No es un arreglo, es un objeto con claves de tipo cadena y valores del tipo MyColorClass.

Lo que puedes hacer es convertirlo en un arreglo obteniendo un arreglo de las claves del objeto y luego mapeando las claves a las propiedades del objeto:

const colors = Object.keys(MyClass.colorsByName).map(key => MyClass.colorsByName[key]);

Dado que podrías hacer esto a menudo, podrías crear una función reutilizable para convertir las propiedades en un arreglo:

function propsToArray<T>(obj: { [index: string]: T; } | { [index: number]: T; }) {
    return Object.keys(obj).map(prop => obj[prop]);
}

Luego lo usas así:

for (const color of propsToArray(MyClass.colorsByName)) {
    // use color here
}

Nota al margen: Es posible que solo desees almacenar esto en caché en una propiedad estática de MyClass.

Valores.del.objeto

Alternativamente, también podrías usar Object.values():

for (const color of Object.values(MyClass.colorsByName)) {
    // use color here
}

Pero podría que necesites agregar un polyfill si usas eso.

Respuesta #2

para..en

Al mirar la documentación de Typescript (Typescript: Iteradores y Generadores), vemos que la sintaxis for..in iterará sobre las claves del objeto.

for..in devuelve una lista de claves del objeto que se está iterando, mientras que for..of devuelve una lista de valores de las propiedades numéricas del objeto que se está iterando.

Podemos usar eso a nuestro favor para indexar en nuestro objeto y obtener el valor fuertemente tipado:

// Go through each key of the indexed object:
for (const key in indexedObject)
{
   // Get the indexed item by the key:
   const indexedItem = indexedObject[key];
   // Now we have the item.

   // Use it...
}

Solución

Podemos usar eso para obtener una solución elegante a la pregunta:

// Go through each named color:
for (const colorName in colorsByName)
{
   // Get the strongly typed color with this name:
   const color = colorsByName[colorName]; // : MyColorClass
   // Now we have the the strongly typed color with this name.

   // Paint the world in a techni-colour rainbow...
}

Artículos relacionados