TypeScript je silně typovaný programovací jazyk, který staví na JavaScriptu a poskytuje vám lepší nástroje v měřítku. TypeScript byl vyvinut, aby pomohl vyřešit některé problémy, které vznikají při psaní kódu pomocí JavaScriptu. TypeScript překonává úskalí JavaScriptu pomocí typů.
Každá hodnota ve zdrojovém kódu strojopisu má svůj typ. TypeScript kontroluje, zda každá hodnota dodržuje pravidla spojená s jejím typem. TypeScript kontroluje chyby ve vašem zdrojovém kódu, aniž byste museli spouštět nebo spouštět program.
Toto se nazývá kontrola statického typu, která zahrnuje kontrolu chyb ve vývoji na základě typu hodnot použitých v programu.
Kromě toho, že vám pomáhá psát jasnější a čitelnější kód a poskytuje vám statickou kontrolu typu, nabízí TypeScript další funkce, které vám pomohou s čitelností kódu, opětovnou použitelností a údržbou. Jednou z takových funkcí jsou dekorátory TypeScript.
Table of Contents
Dekorátory TypeScript
Dekorátory v TypeScriptu jsou funkcí, která vám umožňuje změnit nebo vylepšit chování vašeho kódu za běhu nebo přidat do kódu metadata. Dekorátory umožňují metaprogramování v TypeScriptu. Metaprogramování je programovací technika, kdy programy mohou zacházet s jinými programy jako se svými daty a modifikovat tak jejich chování.
Dekorátory jsou v podstatě funkce, které budou volány k provedení nějaké logiky za běhu, když se přistupuje k dekorovaným prvkům nebo je upravují.
Tímto způsobem lze k dekorovaným prvkům přidat další funkce. Dekorátory TypeScript lze připojit k deklaracím tříd, metodám, vlastnostem, přístupovým objektům (getterům a setterům) a parametrům metod.
V TypeScriptu mají dekorátory předponu symbol @ a mají podobu @expression s výrazem vyhodnocujícím funkci, která bude volána za běhu. Obecná syntaxe pro použití dekorátorů v TypeScript je uvedena níže:
@decoratorName itemToDecorate
Níže je uveden příklad jednoduchého dekorátoru třídy:
function logClass(target: Function) {
console.log("The Log Class Decorator has been called")
console.log("Class:", target);
}
@logClass // @logClass is a decorator
class MyClass {
constructor() {
console.log("An instance of MyClass has been created");
}
}
const myInstance = new MyClass();
Výsledek spuštění výše uvedeného kódu je uveden níže:
Výstup:
The Log Class Decorator has been called Class: [class MyClass] An instance of MyClass has been created
Funkce logClass() přijímá jediný argument nazvaný cíl typu Funkce. Argument target je typu Function, protože obdrží konstruktor třídy, kterou zdobíme.
Chcete-li použít logClass() jako dekorátor pro zdobení třídy nazvané MyClass, vložíme @logclass těsně před deklaraci MyClass. Dekorátor musí mít stejný název jako funkce, kterou chcete použít k ozdobení prvku.
Když je vytvořena instance MyClass, je kromě konstruktoru třídy provedeno i chování dekorátoru, jak ukazuje výstup.
Dekorátoři jsou v současné době k dispozici na Typescript jako experimentální funkce. Proto, abyste mohli používat dekorátory v TypeScriptu, musíte povolit experimentalDecorators ve volbě kompilátoru v souboru tsconfig.json.
Chcete-li to provést, vygenerujte soubor tsconfig.json ve složce projektu TypeScript provedením následujícího příkazu v terminálu otevřeném v adresáři projektu:
tsc --init
Jakmile budete mít soubor tsconfig.json, otevřete jej a odkomentujte experimentalDecorators, jak je znázorněno níže:
Kromě toho nastavte svou cílovou verzi JavaScriptu alespoň na ES2015.
Význam dekorátorů TypeScript
Dobrý kód lze snadno určit podle toho, jak je kód čitelný, opakovaně použitelný a udržovatelný. Čitelný kód je kód, který je snadno pochopitelný a interpretovatelný a jasně sděluje záměr vývojáře každému, kdo kód čte.
Opakovaně použitelný kód je na druhé straně kód, který umožňuje specifickým komponentám, jako jsou funkce a třídy, přepracovat, upravit a použít v jiných částech aplikace nebo zcela nové aplikace bez významných úprav.
Udržitelný kód je kód, který lze snadno upravovat, aktualizovat a opravovat v průběhu své životnosti.
Dekorátory TypeScript vám umožňují dosáhnout čitelnosti kódu, znovupoužitelnosti a udržovatelnosti. Za prvé, dekorátory TypeScript vám umožňují vylepšit chování vašeho kódu pomocí deklarativní syntaxe, která je snáze čitelná. Logiku můžete zapouzdřit do dekorátorů a vyvolat je zdobením různých prvků vašeho kódu tam, kde logiku potřebujete.
Díky tomu bude váš kód snadno čitelný a pochopíte, co se děje. Dekorátoři jasně vyjadřují záměr vývojáře.
Dekorátory nejsou prvky na jedno použití; jsou přirozeně opakovaně použitelné. Dekoratér můžete vytvořit jednou a použít jej vícekrát ve více oblastech.
Proto můžete definovat dekorátory, importovat je a používat kdekoli ve své kódové základně, kde chcete upravit chování svého kódu. To je výhodné, protože vám to umožňuje vyhnout se duplikaci logiky ve vaší kódové základně, čímž se zvyšuje opětovná použitelnost vašeho kódu.
Dekorátory vám také poskytují velkou flexibilitu a modularitu ve vašem kódu, což vám umožňuje oddělit různé funkce do nezávislých komponent. To ve spojení se skutečností, že umožňují zápis čitelného a opakovaně použitelného kódu, znamená, že dekorátory TypeScript vám umožní mít kód, který se snadno udržuje.
Typy dekorátorů TypeScript
Jak bylo uvedeno dříve, dekorátory TypeScript lze připojit ke třídám, vlastnostem třídy, metodám třídy, přístupovým objektům třídy a parametrům metody třídy. Z prvků, které můžeme ozdobit, získáme různé typy dekorátorů TypeScript. Mezi tyto dekoratéry patří:
#1. Třída dekoratér
Dekorátor třídy je dekorátor používaný k pozorování, úpravě nebo nahrazení definice třídy. Vyhlašuje se těsně před třídou, kterou zdobí. Dekorátor třídy se aplikuje na konstruktor třídy, kterou zdobí. Za běhu bude zavolán dekorátor třídy, jehož jediným argumentem bude konstruktor třídy, kterou zdobí.
Dekorátor třídy, který se používá k zabránění rozšíření třídy, je zobrazen níže:
function frozen(target: Function) {
Object.freeze(target);
Object.freeze(target.prototype)
}
@frozen
class Vehicle {
wheels: number = 4;
constructor() {
console.log("A vehicle has been created")
}
}
class Car extends Vehicle {
constructor() {
super();
console.log("A car has been created");
}
}
console.log(Object.isFrozen(Vehicle));
Abychom zabránili rozšíření třídy, použijeme funkci Object.freeze() a předáme třídu, kterou chceme zmrazit. K přidání této funkce do třídy se používá dekorátor. Můžeme zkontrolovat, zda je třída Vehicle zmrazená za běhu předáním třídy do isFrozen(), výstup kódu je uveden níže:
true
#2. Nemovitost dekoratér
Dekorátor nemovitosti se používá k dekoraci vlastnosti třídy a je deklarován těsně před dekorací nemovitosti. Dekorátory nemovitosti lze použít ke změně nebo dodržení definice vlastnosti.
Za běhu bude zavolán dekoratér, který potřebuje dva argumenty. Za prvé, buď funkce konstruktoru třídy, pokud je člen statický, nebo prototyp třídy v případě, že se jedná o člen instance. Druhým argumentem je jméno člena, tedy vlastnost, kterou zdobíte.
V TypeScriptu mají statické členy před sebou klíčové slovo static. Ke statickým členům lze přistupovat bez vytváření instance třídy. Členové instance nemají před sebou klíčové slovo static a lze k nim přistupovat pouze po vytvoření instance třídy.
Příklad dekorátoru nemovitostí je uveden níže:
function wheelsDecorator(target: any, propertyName: string) {
console.log(propertyName.toUpperCase())
}
class Vehicle {
@wheelsDecorator
wheels: number = 4;
constructor() {
console.log("A vehicle has been created")
}
}
Výstup spuštění kódu je uveden níže:
WHEELS
#3. Metoda dekoratér
Dekorátor metody, deklarovaný těsně před deklarací metody, je dekorátor používaný k pozorování, úpravě nebo nahrazení definice metody. Zahrnuje tři argumenty, funkci konstruktoru třídy v případě, že je člen statický, nebo vlastnost třídy, pokud je členem instance.
Druhým argumentem je název členu a nakonec deskriptor vlastnosti člena. Deskriptor vlastnosti je objekt spojený s vlastnostmi objektu a poskytuje informace o atributech a chování vlastnosti.
Dekorátory metod se hodí, když chcete provést nějakou akci před nebo po zavolání metody. Můžeme je také použít k protokolování informací o volané metodě. To může být užitečné v případě, že chcete informovat uživatele, že metoda je zastaralá; to znamená, že je stále k dispozici pro použití, ale nedoporučujeme jej používat, protože může být později odstraněn.
Příklad dekorátoru metody je uveden níže:
const logDeprecated =(target: any, methodName: string, descriptor: PropertyDescriptor) => {
console.log(`${methodName} has been deprecated`)
console.log(descriptor);
}
class Vehicle {
wheels: number = 4;
constructor() {
console.log("A vehicle has been created")
}
@logDeprecated
reFuel(): void {
console.log("Your vehicle is being refuelled");
}
}
Výstup:
reFuel has been deprecated
{
value: [Function: reFuel],
writable: true,
enumerable: false,
configurable: true
}
#4. Dekorátoři doplňků
V TypeScriptu existují dva typy metod přístupového objektu, get a set. Metody přístupového objektu se používají k řízení přístupu k vlastnostem třídy. Dekorátory přístupového objektu se používají ke zdobení těchto dvou metod přístupového objektu a jsou deklarovány těsně před deklarací přístupového objektu. Vzhledem k tomu, že doplňky jsou stále metodami, dekorátory přístupových prvků fungují stejně jako dekorátory metod.
Níže je uveden příklad dekorátorů příslušenství:
const logWheels =(target: any, accessorName: string, descriptor: PropertyDescriptor) => {
console.log(`${accessorName} used to get the number of wheels`)
console.log(descriptor);
}
class Vehicle {
private wheels: number = 4;
constructor() {
console.log("A vehicle has been created")
}
@logWheels
get numWheels(): number {
return this.wheels;
}
}
Výstup:
numWheels used to get the number of wheels
{
get: [Function: get numWheels],
set: undefined,
enumerable: false,
configurable: true
}
U dekorátorů přístupových prvků je důležité poznamenat, že dekorátory nelze použít na více přístupových objektů get/set se stejným názvem. Například v naší ukázce kódu výše, pokud vytvoříte setter s názvem set numWheels, nemůžete na něj použít dekorátor logWheels.
#5. Dekorátory parametrů
Dekorátor parametrů se používá k pozorování, že parametr byl deklarován v metodě, a je deklarován před deklarací parametru. Dekorátory parametrů přebírají tři argumenty, zaprvé funkci konstruktoru třídy pro statický člen nebo prototyp třídy pro člen instance.
Druhým argumentem je název členu, tedy název parametru. Třetí argument je pořadový index parametru v seznamu parametrů funkce. To znamená, na jaké pozici je parametr v seznamu parametrů, přičemž první parametr je na indexu 0?
Níže je uveden příklad dekorátoru parametrů:
const passengerLog = (target: Object, propertyKey: string, parameterIndex: number) => {
console.log(`Decorator on ${propertyKey}'s paremeter index ${parameterIndex}`);
}
class Vehicle {
private wheels: number = 4;
constructor() {
console.log("A vehicle has been created")
}
pickPassenger( location: string, numPassengers: string, @passengerLog driver: string) {
console.log(`${numPassengers} picked at ${location} by ${driver}`)
}
dropPassenger(driver: string, @passengerLog location: string, numPassengers: string) {
console.log(`${numPassengers} dropped at ${location} by ${driver}`)
}
}
Výstup:
Decorator on pickPassenger's paremeter index 2 Decorator on dropPassenger's paremeter index 1
Závěr
Dekorátory TypeScript výrazně zvyšují čitelnost vašeho kódu a pomáhají vám psát modulární, opakovaně použitelný kód, protože dekorátory můžete deklarovat jednou a použít je mnohokrát. Dekorátoři navíc přispívají k celkové udržitelnosti vašeho kódu.
Přestože jsou dekorátory stále experimentální funkcí, jsou velmi užitečné a rozhodně byste měli zvážit, zda se s nimi seznámit.
Můžete si také přečíst, jak převést řetězec na číslo v TypeScriptu.