ТипеСцрипт је снажно откуцани програмски језик који се заснива на ЈаваСцрипт-у, дајући вам боље алате у обиму. ТипеСцрипт је развијен да помогне у решавању неких проблема који се јављају приликом писања кода помоћу ЈаваСцрипт-а. ТипеСцрипт превазилази замке ЈаваСцрипт-а коришћењем типова.
Свака вредност у изворном коду куцаног текста има тип. ТипеСцрипт проверава да ли се свака вредност придржава правила повезаних са њеним типом. ТипеСцрипт проверава грешке у вашем изворном коду без потребе да извршавате или покрећете свој програм.
Ово се зове статичка провера типа, која укључује проверу грешака у развоју на основу типа вредности које се користе у програму.
Осим што вам помаже да напишете јаснији и читљивији код и пружа вам статичку проверу типа, ТипеСцрипт нуди додатне функције које помажу у читљивости кода, поновној употреби и могућности одржавања. Једна таква карактеристика су ТипеСцрипт декоратери.
Преглед садржаја
ТипеСцрипт Децораторс
Декоратори у ТипеСцрипт-у су функција која вам омогућава да промените или побољшате понашање вашег кода током времена извршавања или додате метаподатке свом коду. Декоратори омогућавају метапрограмирање у ТипеСцрипт-у. Метапрограмирање је техника програмирања у којој програми могу третирати друге програме као своје податке и тако модификовати њихово понашање.
У суштини, декоратори су функције које ће бити позване да изврше неку логику током извршавања када се приступи украшеним елементима или их се модификује.
На овај начин се декорисаним елементима може додати додатна функционалност. ТипеСцрипт декоратори могу бити придружени декларацијама класа, методама, својствима, приступницима (гетери и сеттери) и параметрима метода.
У ТипеСцрипт-у, декоратори имају префикс @ симбола и они имају облик @израза са изразом који се процењује на функцију која ће бити позвана током извршавања. Општа синтакса за коришћење декоратора у ТипеСцрипт-у је као што је приказано у наставку:
@decoratorName itemToDecorate
Пример једноставног декоратора класе је приказан у наставку:
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();
Резултат извршавања кода изнад је приказан у наставку:
Излаз:
The Log Class Decorator has been called Class: [class MyClass] An instance of MyClass has been created
Функција логЦласс() узима један аргумент који се зове циљ типа Функција. Циљ аргумента је типа Функција јер ће примити конструктор класе коју украшавамо.
Да бисмо користили логЦласс() као декоратор за украшавање класе МиЦласс, ставили смо @логцласс непосредно пре декларације МиЦласс. Декоратор мора имати исто име као функција коју желите да користите за украшавање елемента.
Када се креира инстанца МиЦласс, понашање декоратера се извршава поред конструктора класе као што је приказано на излазу.
Декоратори су тренутно доступни на Типесцрипт-у као експериментална функција. Због тога, да бисте користили декораторе у ТипеСцрипт-у, потребно је да омогућите експерименталДецораторс у опцији компајлера у датотеци тсцонфиг.јсон.
Да бисте то урадили, генеришите датотеку тсцонфиг.јсон у фасцикли ТипеСцрипт пројекта тако што ћете извршити следећу команду у терминалу отвореном у директоријуму вашег пројекта:
tsc --init
Када добијете датотеку тсцонфиг.јсон, отворите је и уклоните коментаре екперименталДецораторс као што је приказано у наставку:
Поред тога, подесите своју ЈаваСцрипт циљну верзију на најмање ЕС2015.
Важност ТипеСцрипт декоратора
Добар код се лако може одредити према томе колико је код читљив, употребљив и одржаван. Читљив код је код који је лак за разумевање и тумачење и јасно саопштава намеру програмера ономе ко чита код.
Код за вишекратну употребу, с друге стране, је код који омогућава да се одређене компоненте, као што су функције и класе, пренамене, прилагођавају и користе у другим деловима апликације или потпуно нове апликације без значајних модификација.
Код који се може одржавати је код који се лако може модификовати, ажурирати и поправити током свог животног века.
ТипеСцрипт декоратори вам омогућавају да постигнете читљивост кода, поновну употребу и могућност одржавања. Прво, ТипеСцрипт декоратори вам омогућавају да побољшате понашање вашег кода помоћу декларативне синтаксе која је лакша за читање. Можете инкапсулирати логику у декораторе и позвати их украшавањем различитих елемената вашег кода тамо где вам је логика потребна.
Ово чини ваш код лаким за читање и разумевање шта се дешава. Декоратери јасно саопштавају намеру програмера.
Декоратори нису елементи за једнократну употребу; они су по природи за вишекратну употребу. Можете креирати декоратер једном и користити га више пута у више области.
Стога можете дефинисати декоратере, увести их и користити их било где у бази кода где желите да измените понашање свог кода. Ово је корисно јер вам омогућава да избегнете дуплирање логике у вашој бази кода, чиме се повећава могућност поновне употребе вашег кода.
Декоратори вам такође дају велику дозу флексибилности и модуларности у вашем коду, омогућавајући вам да одвојите различите функционалности у независне компоненте. Ово, заједно са чињеницом да дозвољавају писање читљивог и вишекратног кода, значи да ће ТипеСцрипт декоратори омогућити да имате код који је једноставан за одржавање.
Типови ТипеСцрипт декоратора
Као што је раније поменуто, ТипеСцрипт декоратори могу бити придружени класама, својствима класе, методама класе, приступницима класа и параметрима методе класе. Од елемената које можемо украсити добијамо различите типове ТипеСцрипт декоратора. Ови декоратери укључују:
#1. Цласс Децоратор
Декоратор класе је декоратор који се користи за посматрање, модификовање или замену дефиниције класе. Проглашава се непосредно пре часа који украшава. Декоратор класе се примењује на конструктор класе коју украшава. Током извршавања, декоратор класе ће бити позван са конструктором класе коју украшава као јединим аргументом.
Декоратор класе који се користи да спречи проширење класе приказан је у наставку:
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));
Да бисмо спречили проширење класе, користимо функцију Објецт.фреезе() и прослеђујемо класу коју желимо да замрзнемо. Декоратор се користи за додавање ове функционалности класи. Можемо да проверимо да ли је класа Вехицле замрзнута током извршавања тако што ћемо је пренети у исФрозен(), излаз кода је приказан испод:
true
#2. Проперти Децоратор
Декоратор својстава се користи за украшавање својства класе и декларисан је непосредно пре декорације својства. Декоратори својстава се могу користити за промену или посматрање дефиниције својства.
Током извршавања, декоратер ће бити позван и узима два аргумента. Прво, или функција конструктора класе ако је члан статичан или прототип класе у случају да је члан инстанце. Други аргумент је име члана, односно својства коју украшавате.
У ТипеСцрипт-у, статички чланови имају кључну реч статиц испред себе. Статичким члановима се може приступити без инстанцирања класе. Чланови инстанце немају кључну реч статиц испред себе и може им се приступити само након што је инстанца класе креирана.
Пример декоратера имовине је приказан у наставку:
function wheelsDecorator(target: any, propertyName: string) {
console.log(propertyName.toUpperCase())
}
class Vehicle {
@wheelsDecorator
wheels: number = 4;
constructor() {
console.log("A vehicle has been created")
}
}
Резултат покретања кода је приказан у наставку:
WHEELS
#3. Метход Децоратор
Декоратор методе, декларисан непосредно пре декларације методе, је декоратор који се користи за посматрање, модификовање или замену дефиниције методе. Узима три аргумента, функцију конструктора класе у случају да је члан статичан или својство класе ако је члан инстанце.
Други аргумент је име члана и, коначно, дескриптор својства за члана. Дескриптор својства је објекат повезан са својствима објекта и пружа информације о атрибутима и понашању својства.
Декоратори метода су корисни када желите да извршите неку радњу пре или после позивања методе. Такође их можемо користити за евидентирање информација о методи која се позива. Ово може бити корисно у случају да желите да обавестите корисника да је метод застарео; то јест, и даље је доступан за употребу, али се не препоручује да га користите јер се касније може уклонити.
Пример декоратора метода је приказан у наставку:
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");
}
}
Излаз:
reFuel has been deprecated
{
value: [Function: reFuel],
writable: true,
enumerable: false,
configurable: true
}
#4. Аццессор Децораторс
У ТипеСцрипт-у постоје две врсте метода приступа, гет и сет. Методе приступа се користе за контролу приступа својствима класе. Декоратори приступника се користе за украшавање ове две методе приступа и декларишу се непосредно пре декларације приступника. Пошто су приступници и даље методе, декоратори приступа раде исто као и декоратори метода.
Пример декоратера додатака је приказан у наставку:
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;
}
}
Излаз:
numWheels used to get the number of wheels
{
get: [Function: get numWheels],
set: undefined,
enumerable: false,
configurable: true
}
Код декоратора приступа, важно је напоменути да се декоратори не могу применити на више приступника за добијање/сетовање истог имена. На пример, у нашем примеру кода изнад, ако креирате сет нумВхеелс, не можете да користите декоратор логВхеелс на њему.
#5. Декоратори параметара
Декоратор параметара се користи да би се приметило да је параметар декларисан у методи и да је декларисан пре декларације параметра. Декоратори параметара узимају три аргумента, прво, функцију конструктора класе за статички члан или прототип класе за члана инстанце.
Други аргумент је име члана, односно име параметра. Трећи аргумент је редни индекс параметра у листи параметара функције. То јест, у листи параметара, на којој позицији је параметар, при чему је први параметар на индексу 0?
Пример декоратора параметара је приказан у наставку:
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}`)
}
}
Излаз:
Decorator on pickPassenger's paremeter index 2 Decorator on dropPassenger's paremeter index 1
Закључак
ТипеСцрипт декоратори увелико побољшавају читљивост вашег кода и помажу вам да напишете модуларни код за вишекратну употребу, јер декораторе можете декларисати једном и користити их много пута. Поред тога, декоратери доприносе укупној одрживости вашег кода.
Колико год да су још увек експериментална карактеристика, декоратери су веома корисни и свакако бисте требали размислити о томе да се упознате са њима.
Такође можете прочитати како да конвертујете стринг у број у ТипеСцрипт-у.