Typescript: Ako definujem rozhrania pre vnorené objekty?

Predpokladajme, že mám JSON payload, ktorý sa analyzuje na niečo takéto:

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

Ako by som nastavil definíciu rozhrania Example, aby som modeloval, že hodnota vlastnosti items je objekt, ktorého kľúče sú reťazce a hodnoty sú definované rozhraním Item:

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

}

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

Odpoveď č. 1

Typescript vám umožňuje pridať typ pre kľúče objektu pomocou syntaxe [key: string].

Ako je uvedené v dokumentácii, tieto sa nazývajú indexovateľné typy:

Indexovateľné typy majú indexový podpis, ktorý popisuje typy, ktoré môžeme použiť na indexovanie do objektu, spolu s príslušnými návratovými typmi pri indexovaní.

Vo vašom prípade by ste použili nasledovné:

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

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

Pre referenciu, tu je odkaz na živý príklad.

Odpoveď č. 2

To, čo chcete, sa dá dosiahnuť pomocou typu Record

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


interface Example2 {
   name: string;
   items : Record<string, Item>; 

}

var obj2: Example2 = {
    name: "test",
    items: {
        "a": {
            id: 1,
            size: 10
        },
        "b": {
            id: 2,
            size: 34
        },
        "c": {
            id: 3,
            size: 34
        }
    }
}

Tiež dostanete kontrolu počas času kompilácie:

Súvisiace články