TypeScript: dynamická modifikace objektu

Pokud přicházíte z JavaScriptu, určitě budete znát tento způsob práce s typem Object:

let osoba = {
    jmeno: 'pepa'
};

osoba.povolani = 'programator';

console.log(osoba);

Kód je jednoduchý a zcela jasný:
– deklarujete a zároveň definujete proměnnou osoba jako objekt s jediným klíčem jmeno.
– potom k vytvořenému objektu přidáváte další klíč povolani
– a nakonec celý objket vytisknete na standartní výstup, do konzole.

{ jmeno: 'pepa', povolani: 'programator' }

V JavaScriptu OK.

Tohle vám ale v TypeScriptu neprojde

Důvod je jasný: TypeScript je nadmnožina JavaScriptu, která do něj zavádí statické typování. Z příkladu vyplývá, že objekt jste deklarovali joko objekt s jediným klíčem, a proto jej dál úž nikde nemůžete modifikovat, co se klíčů týče. Nově vzniklý objekt už je typově jiný.

Ale i s tímto si TypeScript docela elegantně vypořádá. V deklaraci proměnné stačí místo konkrétního jednoho klíče deklarovat obecné pole s typem string, který může nabývat jakékoliv hodnoty a máte po problému:

let osoba: {
    [key: string]: any
} = {
    jmeno: 'pepa'
};

osoba.povolani = 'programator';

console.log(osoba);

{ jmeno: 'pepa', povolani: 'programator' }

V TypeScriptu OK 🙂

Celý fígl je v jediném řádku

[key: string]: any

Kterým říkáte: hele Object nebude obsahovat jeden, přesně pojmenovaný klíč, ale bude obsahovat celé pole hodnot klíčů stringů, které budou odkazy na proměnné, samotné klíče, jakéhokoliv typu (any)

Praktické využití?

To se samo nabízí: pokud se snažíte složitější datové struktůry udržet na uzdě pomocí interface, pak statický typovost vám nedovolí uhnout. Někdy dobré, ale někdy ne. Může se hodit mít definovaný intarface jako nějaké datové minimum, který konkrétní objekt má splňovat, ale krom povinných klíčů byste chtěli čas od času někde něco k něčemu přidat. Pak se vám tento fígl bude hodit.

Je jasné, že

[key: string]: any

můžete pouřít přímo v deklaraci samotného interface.