TypeScript er et sterkt skrevet programmeringsspråk som bygger på JavaScript, og gir deg bedre verktøy i skala. TypeScript ble utviklet for å hjelpe til med å løse noen av problemene som oppstår når du skriver kode ved hjelp av JavaScript. TypeScript overvinner fallgruvene ved JavaScript gjennom bruk av typer.
Hver verdi i en typescript-kildekode har en type. TypeScript sjekker for å sikre at hver verdi overholder reglene knyttet til typen. TypeScript ser etter feil i kildekoden uten at du trenger å kjøre eller kjøre programmet.
Dette kalles statisk typekontroll, som innebærer å sjekke for feil i utviklingen basert på typen verdier som brukes i et program.
Bortsett fra å hjelpe deg med å skrive mer tydelig og lesbar kode og gi deg statisk typekontroll, tilbyr TypeScript tilleggsfunksjoner for å hjelpe med kodelesbarhet, gjenbrukbarhet og vedlikehold. En slik funksjon er TypeScript-dekoratorer.
Innholdsfortegnelse
TypeScript-dekoratører
Dekoratorer i TypeScript er en funksjon som lar deg endre eller forbedre oppførselen til koden din under kjøring eller legge til metadata til koden din. Dekoratører tillater metaprogrammering i TypeScript. Metaprogrammering er en programmeringsteknikk der programmer kan behandle andre programmer som deres data og dermed endre oppførselen deres.
I hovedsak er dekoratører funksjoner som vil bli kalt for å utføre en viss logikk under kjøring når de dekorerte elementene åpnes eller endres.
På denne måten kan ekstra funksjonalitet legges til de dekorerte elementene. TypeScript-dekoratorer kan knyttes til klasseerklæringer, metoder, egenskaper, aksessere (gettere og settere) og metodeparametere.
I TypeScript er dekoratorer prefikset med @-symbolet, og de har form av @uttrykk med uttrykk som evalueres til en funksjon som kalles ved kjøring. Den generelle syntaksen for bruk av dekoratører i TypeScript er som vist nedenfor:
@decoratorName itemToDecorate
Et eksempel på en enkel klassedekoratør er vist nedenfor:
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();
Resultatet av å utføre koden ovenfor vises nedenfor:
Produksjon:
The Log Class Decorator has been called Class: [class MyClass] An instance of MyClass has been created
Funksjonen logClass() tar inn et enkelt argument kalt target av typen Funksjon. Argumentmålet er av typen Funksjon fordi det vil motta konstruktøren til klassen vi dekorerer.
For å bruke logClass() som dekoratør for å dekorere klassen kalt MyClass legger vi @logclass like før erklæringen til MyClass. Dekoratøren må ha samme navn som funksjonen du vil bruke for å dekorere et element.
Når en forekomst av MyClass opprettes, utføres dekoratørens oppførsel i tillegg til klassekonstruktøren som vist av utdataene.
Dekoratorer er for tiden tilgjengelig på Typescript som en eksperimentell funksjon. Derfor, for at du skal bruke dekoratorer i TypeScript, må du aktivere experimentalDecorators i kompilatoralternativet i tsconfig.json-filen.
For å gjøre dette, generer en tsconfig.json-fil i TypeScript-prosjektmappen ved å utføre følgende kommando i terminalen som er åpnet i prosjektkatalogen:
tsc --init
Når du har en tsconfig.json-fil, åpner du den og fjerner kommentarer fra eksperimentelle dekoratorer som vist nedenfor:
Sett i tillegg JavaScript-målversjonen til minst ES2015.
Viktigheten av TypeScript-dekoratører
God kode kan enkelt bestemmes av hvor lesbar, gjenbrukbar og vedlikeholdbar koden er. Lesbar kode er kode som er lett å forstå og tolke og tydelig kommuniserer utviklerens intensjon til den som leser koden.
Gjenbrukbar kode, derimot, er kode som gjør at spesifikke komponenter, som funksjoner og klasser, kan gjenbrukes, tilpasses og brukes i andre deler av en applikasjon eller en helt ny applikasjon uten vesentlige endringer.
Vedlikeholdbar kode er kode som enkelt kan endres, oppdateres og fikses i løpet av levetiden.
TypeScript-dekoratorer lar deg oppnå kodelesbarhet, gjenbrukbarhet og vedlikeholdsvennlighet. For det første lar TypeScript-dekoratorer deg forbedre oppførselen til koden din ved å bruke en deklarativ syntaks som er lettere å lese. Du kan kapsle inn logikk i dekoratorer og påkalle dem ved å dekorere forskjellige elementer i koden din der du trenger logikken.
Dette gjør koden din lett å lese og forstå hva som skjer. Dekoratører kommuniserer tydelig en utviklers hensikt.
Dekoratører er ikke engangselementer; de er gjenbrukbare av natur. Du kan lage en dekoratør én gang og bruke den flere ganger på flere områder.
Derfor kan du definere dekoratører, importere dem og bruke dem hvor som helst i kodebasen din der du vil endre oppførselen til koden din. Dette er fordelaktig ettersom det lar deg unngå duplisering av logikk i kodebasen din, og dermed forbedre gjenbrukbarheten til koden din.
Dekoratorer gir deg også mye fleksibilitet og modularitet i koden din, slik at du kan separere forskjellig funksjonalitet i uavhengige komponenter. Dette, kombinert med det faktum at de tillater skriving av lesbar og gjenbrukbar kode, betyr at TypeScript-dekoratorer lar deg ha kode som er enkel å vedlikeholde.
Typer TypeScript-dekoratører
Som nevnt tidligere kan TypeScript-dekoratorer knyttes til klasser, klasseegenskaper, klassemetoder, klasseaksessører og klassemetodeparametere. Fra elementene vi kan dekorere, får vi de forskjellige typene TypeScript-dekoratorer. Disse dekoratørene inkluderer:
#1. Klasse dekoratør
En klassedekoratør er en dekoratør som brukes til å observere, modifisere eller erstatte en klassedefinisjon. Det deklareres rett før timen det skal pyntes. En klassedekorator brukes på konstruktøren av klassen den dekorerer. Ved kjøring vil en klassedekorator bli kalt opp med konstruktøren av klassen den dekorerer som eneste argument.
En klassedekorator som brukes til å forhindre at en klasse utvides, vises nedenfor:
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));
For å forhindre at en klasse utvides, bruker vi funksjonen Object.freeze() og sender inn klassen som vi ønsker å fryse. En dekoratør brukes til å legge til denne funksjonaliteten til en klasse. Vi kan sjekke om Vehicle-klassen er frosset ved kjøretid ved å sende klassen inn i isFrozen(), utdata fra koden vises nedenfor:
true
#2. Eiendomsdekoratør
En eiendomsdekoratør brukes til å dekorere en klasseeiendom, og den deklareres rett før eiendomsdekorasjonen. Eiendomsdekoratører kan brukes til å endre eller observere en eiendomsdefinisjon.
Ved kjøring vil dekoratøren bli tilkalt, og den tar inn to argumenter. Først enten konstruktørfunksjonen til klassen hvis medlemmet er statisk eller prototypen til klassen i tilfelle det er et forekomstmedlem. Det andre argumentet er navnet på medlemmet, det vil si eiendommen du dekorerer.
I TypeScript har statiske medlemmer nøkkelordet static foran seg. Statiske medlemmer kan nås uten å instansiere en klasse. Forekomstmedlemmene har ikke nøkkelordet static foran seg og kan bare nås etter at en forekomst av en klasse er opprettet.
Et eksempel på en eiendomsdekoratør er vist nedenfor:
function wheelsDecorator(target: any, propertyName: string) {
console.log(propertyName.toUpperCase())
}
class Vehicle {
@wheelsDecorator
wheels: number = 4;
constructor() {
console.log("A vehicle has been created")
}
}
Utgangen av å kjøre koden er vist nedenfor:
WHEELS
#3. Metode dekoratør
En metodedekorator, erklært rett før en metodeerklæring, er en dekoratør som brukes til å observere, modifisere eller erstatte en metodedefinisjon. Den tar inn tre argumenter, konstruktørfunksjonen til klassen i tilfelle medlemmet er statisk eller egenskapen til klassen hvis det er et forekomstmedlem.
Det andre argumentet er navnet på medlemmet og til slutt en egenskapsbeskrivelse for medlemmet. En egenskapsbeskrivelse er et objekt knyttet til objektegenskaper, og det gir informasjon om en egenskaps attributter og oppførsel.
Metodedekoratorer kommer godt med når du vil utføre en handling før eller etter at en metode kalles. Vi kan også bruke dem til å logge informasjon om metoden som kalles. Dette kan være nyttig i tilfelle du vil informere en bruker om at en metode er utdatert; det vil si at den fortsatt er tilgjengelig for bruk, men det anbefales ikke å bruke den da den kan bli fjernet senere.
Et eksempel på en metodedekorator er vist nedenfor:
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");
}
}
Produksjon:
reFuel has been deprecated
{
value: [Function: reFuel],
writable: true,
enumerable: false,
configurable: true
}
#4. Tilbehør dekoratører
I TypeScript er det to typer tilgangsmetoder, get og set. Accessormetoder brukes til å kontrollere tilgang til klasseegenskaper. Tilbehørsdekoratorer brukes til å dekorere disse to tilbehørsmetodene, og de deklareres rett før en tilbehørserklæring. Siden tilbehør fortsatt er metoder, fungerer tilbehørsdekoratører akkurat som metodedekoratører.
Et eksempel på tilbehørsdekoratorer er vist nedenfor:
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;
}
}
Produksjon:
numWheels used to get the number of wheels
{
get: [Function: get numWheels],
set: undefined,
enumerable: false,
configurable: true
}
Med tilbehørsdekoratorer er det viktig å merke seg at dekoratører ikke kan brukes på flere get/set-tilbehør med samme navn. For eksempel, i vårt kodeeksempel ovenfor, hvis du oppretter en setter kalt set numWheels, kan du ikke bruke logWheels-dekoratoren på den.
#5. Parameterdekoratører
En parameterdekorator brukes til å observere at en parameter har blitt deklarert på en metode, og den er deklarert før en parametererklæring. Parameterdekoratorer tar inn tre argumenter, først konstruktørfunksjonen til klassen for et statisk medlem eller prototypen til klassen for et forekomstmedlem.
Det andre argumentet er navnet på medlemmet, det vil si parameternavnet. Det tredje argumentet er ordinalindeksen til parameteren i funksjonens parameterliste. Det vil si, i parameterlisten, hvilken posisjon er parameteren, med den første parameteren på indeks 0?
Et eksempel på en parameterdekorator er vist nedenfor:
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}`)
}
}
Produksjon:
Decorator on pickPassenger's paremeter index 2 Decorator on dropPassenger's paremeter index 1
Konklusjon
TypeScript-dekoratører går langt i å forbedre kodens lesbarhet og hjelpe deg med å skrive modulær, gjenbrukbar kode, ettersom du kan erklære dekoratører én gang og bruke dem mange ganger. I tillegg bidrar dekoratører til den generelle vedlikeholdsvennligheten til koden din.
Så mye som de fortsatt er en eksperimentell funksjon, er dekoratører veldig nyttige, og du bør definitivt vurdere å gjøre deg kjent med dem.
Du kan også lese hvordan du konverterer en streng til et tall i TypeScript.