TypeScript este un limbaj de programare puternic tipizat, care se bazează pe JavaScript, oferindu-vă instrumente mai bune la scară. TypeScript a fost dezvoltat pentru a ajuta la rezolvarea unora dintre problemele care apar la scrierea codului folosind JavaScript. TypeScript depășește capcanele JavaScript prin utilizarea tipurilor.
Fiecare valoare dintr-un cod sursă dactilografiat are un tip. TypeScript verifică pentru a se asigura că fiecare valoare respectă regulile asociate tipului său. TypeScript verifică erorile din codul sursă fără a fi necesar să executați sau să rulați programul.
Aceasta se numește verificare statică de tip, care implică verificarea erorilor în dezvoltare pe baza tipului de valori utilizate într-un program.
Pe lângă faptul că vă ajută să scrieți cod mai clar și mai lizibil și vă oferă verificarea statică a tipului, TypeScript oferă caracteristici suplimentare pentru a vă ajuta cu lizibilitatea, reutilizarea și mentenabilitatea codului. O astfel de caracteristică este decoratorii TypeScript.
Cuprins
Decoratori TypeScript
Decoratorii din TypeScript sunt o caracteristică care vă permite să modificați sau să îmbunătățiți comportamentul codului în timpul execuției sau să adăugați metadate la cod. Decoratorii permit metaprogramarea în TypeScript. Metaprogramarea este o tehnică de programare în care programele pot trata alte programe ca date ale lor și, astfel, le pot modifica comportamentul.
În esență, decoratorii sunt funcții care vor fi apelate pentru a executa o anumită logică în timpul execuției atunci când elementele decorate sunt accesate sau modificate.
Astfel, elementelor decorate pot fi adăugate funcționalitate suplimentară. Decoratorii TypeScript pot fi atașați declarațiilor de clasă, metodelor, proprietăților, accesoriilor (getters și setters) și parametrilor metodei.
În TypeScript, decoratorii sunt prefixați cu simbolul @ și iau forma @expression cu expresie evaluând la o funcție care va fi apelată în timpul execuției. Sintaxa generală pentru utilizarea decoratorilor în TypeScript este prezentată mai jos:
@decoratorName itemToDecorate
Un exemplu de decorator de clasă simplu este prezentat mai jos:
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();
Rezultatul executării codului de mai sus este prezentat mai jos:
Ieșire:
The Log Class Decorator has been called Class: [class MyClass] An instance of MyClass has been created
Funcția logClass() preia un singur argument numit țintă de tip Funcție. Argumentul target este de tip Function deoarece va primi constructorul clasei pe care o decoram.
Pentru a folosi logClass() ca decorator pentru a decora clasa numită MyClass, punem @logclass chiar înainte de declararea MyClass. Decoratorul trebuie să aibă același nume cu funcția pe care doriți să o utilizați pentru a decora un element.
Când este creată o instanță a MyClass, comportamentul decoratorului este executat în plus față de constructorul de clasă, așa cum este arătat de rezultat.
Decoratorii sunt în prezent disponibili pe Typescript ca o caracteristică experimentală. Prin urmare, pentru a utiliza decoratori în TypeScript, trebuie să activați experimentalDecorators în opțiunea compilatorului din fișierul tsconfig.json.
Pentru a face acest lucru, generați un fișier tsconfig.json în folderul de proiect TypeScript executând următoarea comandă în terminalul deschis în directorul de proiect:
tsc --init
După ce aveți un fișier tsconfig.json, deschideți-l și decomentați experimentalDecorators, așa cum se arată mai jos:
În plus, setați versiunea țintă JavaScript la cel puțin ES2015.
Importanța decoratorilor TypeScript
Un cod bun poate fi determinat cu ușurință de cât de lizibil, reutilizabil și de întreținut este codul. Codul care poate fi citit este un cod ușor de înțeles și interpretat și comunică clar intenția dezvoltatorului oricui citește codul.
Codul reutilizabil, pe de altă parte, este un cod care permite componentelor specifice, cum ar fi funcțiile și clasele, să fie reutilizate, adaptate și utilizate în alte părți ale unei aplicații sau o aplicație complet nouă, fără modificări semnificative.
Codul care poate fi întreținut este un cod care poate fi ușor modificat, actualizat și remediat pe parcursul vieții sale.
Decoratorii TypeScript vă permit să obțineți lizibilitatea, reutilizarea și mentenabilitatea codului. În primul rând, decoratorii TypeScript vă permit să îmbunătățiți comportamentul codului folosind o sintaxă declarativă care este mai ușor de citit. Puteți să încapsulați logica în decoratori și să le invocați prin decorarea diferitelor elemente ale codului dvs. acolo unde aveți nevoie de logică.
Acest lucru face codul ușor de citit și de înțeles ce se întâmplă. Decoratorii comunică clar intenția dezvoltatorului.
Decoratorii nu sunt elemente de unică folosință; sunt reutilizabile prin natura lor. Puteți crea un decorator o dată și îl puteți utiliza de mai multe ori în mai multe zone.
Prin urmare, puteți defini decoratori, îi puteți importa și îi puteți utiliza oriunde în baza de cod, unde doriți să modificați comportamentul codului. Acest lucru este benefic, deoarece vă permite să evitați duplicarea logicii în baza de cod, sporind astfel reutilizarea codului.
Decoratorii vă oferă, de asemenea, o mare flexibilitate și modularitate în codul dvs., permițându-vă să separați diferite funcționalități în componente independente. Acest lucru, împreună cu faptul că permit scrierea de cod citibil și reutilizabil, înseamnă că decoratorii TypeScript vă vor permite să aveți un cod ușor de întreținut.
Tipuri de decoratori TypeScript
După cum sa menționat mai devreme, decoratorii TypeScript pot fi atașați la clase, proprietăți de clasă, metode de clasă, accesorii de clasă și parametrii metodei de clasă. Din elementele pe care le putem decora, obținem diferitele tipuri de decoratori TypeScript. Acești decoratori includ:
#1. Decorator de clasă
Un decorator de clasă este un decorator folosit pentru a observa, modifica sau înlocui o definiție de clasă. Este declarat chiar înainte de clasa pe care o decorează. Un decorator de clasă este aplicat constructorului clasei pe care o decorează. La runtime, un decorator de clasă va fi apelat cu constructorul clasei pe care o decorează ca singur argument.
Un decorator de clasă care este utilizat pentru a preveni extinderea unei clase este prezentat mai jos:
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));
Pentru a preveni extinderea unei clase, folosim funcția Object.freeze() și trecem în clasa pe care dorim să o înghețăm. Un decorator este folosit pentru a adăuga această funcționalitate la o clasă. Putem verifica dacă clasa Vehicul este înghețată în timpul rulării prin trecerea clasei în isFrozen(), rezultatul codului este afișat mai jos:
true
#2. Decorator imobil
Un decorator de proprietate este folosit pentru a decora o proprietate de clasă și este declarat chiar înainte de decorarea proprietății. Decoratorii de proprietăți pot fi folosiți pentru a modifica sau respecta o definiție a proprietății.
În timpul execuției, decoratorul va fi apelat și are două argumente. În primul rând, fie funcția de constructor a clasei dacă membrul este static, fie prototipul clasei în cazul în care este un membru al instanței. Al doilea argument este numele membrului, adică proprietatea pe care o decorați.
În TypeScript, membrii statici au cuvântul cheie static înaintea lor. Membrii statici pot fi accesați fără a instanția o clasă. Membrii instanței nu au cuvântul cheie static înaintea lor și pot fi accesați numai după ce a fost creată o instanță a unei clase.
Un exemplu de decorator de proprietate este prezentat mai jos:
function wheelsDecorator(target: any, propertyName: string) {
console.log(propertyName.toUpperCase())
}
class Vehicle {
@wheelsDecorator
wheels: number = 4;
constructor() {
console.log("A vehicle has been created")
}
}
Rezultatul rulării codului este afișat mai jos:
WHEELS
#3. Decorator metoda
Un decorator de metodă, declarat chiar înaintea unei declarații de metodă este un decorator folosit pentru a observa, modifica sau înlocui o definiție de metodă. Ia trei argumente, funcția constructor a clasei în cazul în care membrul este static sau proprietatea clasei dacă este un membru al instanței.
Al doilea argument este numele membrului și, în final, un descriptor de proprietate pentru membru. Un descriptor de proprietate este un obiect asociat cu proprietățile obiectului și oferă informații despre atributele și comportamentul unei proprietăți.
Decoratorii de metode sunt folositori atunci când doriți să efectuați o acțiune înainte sau după apelarea unei metode. De asemenea, le putem folosi pentru a înregistra informații despre metoda apelată. Acest lucru poate fi util în cazul în care doriți să informați un utilizator că o metodă este depreciată; adică este încă disponibil pentru utilizare, dar nu este recomandat să îl utilizați deoarece poate fi eliminat ulterior.
Un exemplu de decorator de metodă este prezentat mai jos:
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");
}
}
Ieșire:
reFuel has been deprecated
{
value: [Function: reFuel],
writable: true,
enumerable: false,
configurable: true
}
#4. Decoratori accesorii
În TypeScript, există două tipuri de metode de accesare, get și set. Metodele de accesare sunt folosite pentru a controla accesul la proprietățile clasei. Decoratorii de accesorii sunt folosiți pentru a decora aceste două metode de accesorii și sunt declarați chiar înainte de declarația de accesorii. Deoarece accesoriile sunt încă metode, decoratorii de accesorii funcționează la fel ca decoratorii de metode.
Un exemplu de decorator accesoriu este prezentat mai jos:
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;
}
}
Ieșire:
numWheels used to get the number of wheels
{
get: [Function: get numWheels],
set: undefined,
enumerable: false,
configurable: true
}
Cu decoratorii de accesorii, este important de reținut că decoratorii nu pot fi aplicați mai multor accesorii get/set cu același nume. De exemplu, în exemplul nostru de cod de mai sus, dacă creați un setter numit set numWheels, nu puteți utiliza decoratorul logWheels pe acesta.
#5. Parametru Decoratori
Un decorator de parametri este folosit pentru a observa că un parametru a fost declarat pe o metodă și este declarat înainte de declararea unui parametru. Decoratorii de parametri preiau trei argumente, în primul rând, funcția de constructor a clasei pentru un membru static sau prototipul clasei pentru un membru de instanță.
Al doilea argument este numele membrului, adică numele parametrului. Al treilea argument este indexul ordinal al parametrului din lista de parametri a funcției. Adică, în lista de parametri, ce poziție este parametrul, primul parametru fiind la indicele 0?
Un exemplu de decorator de parametri este prezentat mai jos:
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}`)
}
}
Ieșire:
Decorator on pickPassenger's paremeter index 2 Decorator on dropPassenger's paremeter index 1
Concluzie
Decoratorii TypeScript contribuie mult la îmbunătățirea lizibilității codului și vă ajută să scrieți cod modular, reutilizabil, deoarece puteți declara decoratori o dată și îi puteți folosi de mai multe ori. În plus, decoratorii contribuie la menținerea generală a codului dvs.
Oricât de mult sunt încă o caracteristică experimentală, decoratorii sunt foarte folositori și cu siguranță ar trebui să vă gândiți să vă familiarizați cu ei.
Puteți citi și cum să convertiți un șir într-un număr în TypeScript.