Mecanografiado: ¿Cómo defino interfaces para objetos anidados?

93

Supongamos que tengo una carga útil JSON que se analiza en algo como esto:

{
    name: "test",
    items: {
        "a": {
            id: 1,
            size: 10
        },
        "b": {
            id: 2,
            size: 34
        }
    }
}

¿Cómo configuraría la definición de la interfaz de ejemplo para modelar que el valor de la propiedad de los elementos es un objeto cuyas claves son cadenas y cuyos valores están definidos por la interfaz de elementos?

export interface Example {
    name: string;
    items: ???;

}

export interface Item {
    id: number;
    size: number;
}
bince
fuente

Respuestas:

160

TypeScript le permite agregar un tipo para las claves de objeto usando la sintaxis [key: string].

Como se indica en la documentación, estos se denominan tipos indexables :

Los tipos indexables tienen una firma de índice que describe los tipos que podemos usar para indexar en el objeto, junto con los tipos de retorno correspondientes al indexar.

En su caso, utilizaría lo siguiente:

export interface Item {
    id: number;
    size: number;
}

export interface Example {
    name: string;
    items: {
        [key: string]: Item
    };
}

Como referencia, aquí hay un enlace a un ejemplo en vivo .

Josh Crozier
fuente
2
¿Por qué exporta la Iteminterfaz? ¿No es suficiente exportar solo la Exampleinterfaz?
Alexander Kim
2
@AlexanderKim sí, a menos que Itemsea ​​útil para otro código que también utilice estos tipos.
evanrmurphy
¿Alguien sabe cómo configurar las claves de los elementos con el estado y acceder a ellos?
Perro
@Perro, por supuesto, pero este no es un sitio web de "código para mí"
Emobe
Gracias por esto, tuve un problema para acceder a una interfaz definida en un archivo de clase en otra clase. No había definido la interfaz con la exportación. Después de agregar la exportación, la importación al final de la página me permitió importar la clase y la interfaz gracias.
Rubio