Typescript class transformer

Technologie Ondřej Jonáš

Typescript nám přináší mnoho výhod. Jedna z nich je EcmaScript6 class. Je to elegantní řešení pro implementaci modelů v MVC frameworcích.

Pro běžnou komunikaci mezi aplikací a serverem se často používá JSON formát, který je zkratkou pro JavaScript Object Notation. Tady nastává problém, JSON je jen datová struktura, ne instance třídy. Takže pokud na backendu zavoláme JSON.stringify, instance třídy se změní na řetězec zakódovaného JSON objektu a všechny naše metody a typy se ztratí. Jak tedy naše typy a metody obnovíme, když znovu zavoláme JSON.parse? Použijeme node modul class-trasformer. Funguje jak na frontendu, tak na backendu. Tento modul obsahuje sadu dekorátorů a funkcí, které se o to postarají.

Jak na to

Samozřejmě si package nainstalujeme přes náš oblíbený package manager – yarn add class-transformer nebo npm install --save class-transformer.

Vytvoříme si jednoduchou třídu, na které si to vyzkoušíme.

Cognito – Typescript class transformer

Teď uděláme z instance řetězec ve formátu JSON.

Cognito – Typescript class transformer 2

Použijeme-li JSON.parse, nedostaneme instanci, ale jenom javascript objekt, a naše snaha o zavolání metody nám vrátít error.

Cognito – Typescript class transformer 3

Proto použijeme class-transformer, který znovu vytvoří instanci třídy Human.

Cognito – Typescript class transformer 4

Do sebe vnořené třídy

Co se ale stane, když máme dvě instance tříd vnořené do sebe? Díky dekorátoru @Type(() => class) bude plaintoclass funkce fungovat rekurzivně a ze všech dekorovaných vlastností vytvoří instance.

Cognito – Typescript class transformer 5

V databázi máme uložený seznam uživatelů a u každého je uveden email, jméno a heslo. Chceme seznam uživatelů zobrazit v tabulce někde na frontendu a samozřejmě nechceme posílat heslo.

Cognito – Typescript class transformer 6

Využijte to ve svůj prospěch

Nyní, když umíme využít sílu dekorátorů a class-transformerů, použijeme další modul – class-validator (je to modul od stejného autora). Ten nám bude validovat vstup uživatele, např. při registraci.

Cognito – Typescript class transformer 7

Cognito – Typescript class transformer 8

S použitím class-transformeru, class-validatoru a async/await je zápis funkce velmi elegantní a pocit z psaní backendu v typescriptu příjemný.

Co si dále přečíst