Jika kita familiar dengan Swift kita pasti sudah tahu apa kegunaan dari Enum itu sendiri. Saya pernah menulis tentang Enum di Swift di sini. Di Swift maupun Typescript Enum digunakan untuk mendefiniskan atau menge-set suatu value dengan sifat constant atau istilah yang disebut dengan Initialization (Inisiasi). Perlu diketahui juga bahwa Enum pada Typescript bukan merupakan Type Level Extension. Pada Typescript enum disediakan dalam bentuk numeric dan string atau bahkan keduanya. Untuk mendefiniskan Enum kita menggunakan keyword enum. Sama halnya dengan di Swift. Basic syntax-nya adalah sebagai berikut:
enum NameOfEnum {member: constantValue // constantValue is optional
}
Numeric Enums
Artinya adalah kita melakukan inisiasi pada member dengan tipe data Number.
enum OperatingSystem {macOS = 1,
windows,
linux
}
Pada kode di atas kita memberikan inisiasi pada member macOS dengan value 1. Lalu pertanyaanya adalah untuk member yang lain berapa inisiasinya? Jawabanya adalah untuk member windows = 2 dan member linux = 3. Kenapa? Karena Enum pada TypeScript menganut sistem Auto Incerement dari setelah member yand diberi inisiasi. Jadi kalau kita memanggil enum tersebut akan seperti pada kode berikut:
OperatingSystem.macOS // 1OperatingSystem.windows // 2
OperatingSystem.linux // 3
Lalu bagaimana dengan kasus berikut. Kita memberikan inisiasi pada member kedua atau ketiga.
enum OperatingSystem {macOS,
windows,
linux = 2
}
Maka yang akan terjadi adalah member macOS = 0, member windows = 1 dan member linux = 2. karena default value untuk member yang pertama adalah 0 dan untuk member berikutnya adalah auto increment dari member sebelumnya.
Lalu bagaimana cara menggunakan enum sebagai parameter sebuah function? Mari kita lihat contoh berikut:
enum isDualSim {No,
Yes
}const myPhone = (card: isDualSim) => {
return card;
}myPhone(isDualSim.Yes) // output 1
myPhone(isDualSim.No) // output 0
myPhone(isDualSim.Both) // ERROR
Kalau kita perhatikan bahwa enum juga dapat kita implementasikan sebagai interface pada function seperti yang ada di TypeScript pada umumnya.
String Enums
Pada dasarnya sama dengan Numeric Enums hanya saja perbedaanya adalah ketika kita assign pada member tipenya adalah String. Dan satu hal lagi tidak ada konsep Auto Increment pada String Enums.
enum Direction {Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT"
}Direction.Up // "UP"
Heterogeneous Enums
Enum jenis adalah gabungan dari Numeric Enums dan String Enums. Sebenernya sangat mudah jadi saya langsung kasih contoh saja:
enum BooleanLikeHeterogeneousEnum {No = 0,
Yes = "YES",
}BooleanLikeHeterogeneousEnum.Yes // "YES"
BooleanLikeHeterogeneousEnum.No // 0
Computed & Constans Member
Pada dasarnya member pada suatu enum adalah constant. Namun demikian, kita dapat menerapkan konsep computed pada member itu sendiri.
enum GadgetInventoy {os: 'Android', // constant
type: 'Phone' | 'Tablet', // constant
stockAvailable: ['Samsung', 'Mi', 'Huawei'].length // computed
}
GadgetInventory.stockAvailable // 3
Union Enums
Intinya kita dapat menjadikan member enum sebagai types di dalam interface.
enum OsTypes {MacOS,
Windows,
Ubuntu
}interface Apple {
os: OsTypes.MacOs;
merk: string;
}interface Samsung {
os: OsTypes.Windows;
merk: string;
}
Kita lihat pada code diatas untuk type di interface kita menggunakan member dari enum. Untuk mengimplementasinya harusnya begini:
let laptop: Apple = {os: OsTypes.MacOS,
merk: 'MacBook Pro'
}
Jika kita salah menempatkan property os pada object di atas maka akan terjadi error. Karena tidak sesuai kontrak. Contoh salah sebagai berikut:
enum OperatingSystem {macOS = 1,
windows,
linux
}0
Error tersebut terjadi karena type property os tidak di dalam kontrak interface Apple. Seharusnya kontrak tersebut ada pada interface Samsung.
Dengan pengenalan Kelas-kelas yang ada di TypeScript dan ES6, sekarang ada skenario tertentu yang memerlukan fitur tambahan untuk mendukung anotasi atau modifikasi kelas dan anggota kelas. Decorators menyediakan cara untuk menambahkan anotasi-anotasi dan sebuah sintaks pemrogragaman meta untuk deklarasi kelas dan anggota kelas. Decorators ada pada stage 2 proposal untuk JavaScript dan juga tersedia pada TypeScript sebagai fitur eksperimental.
CATATAN Decorators adalah fitur eksperimental yang mungkin dapat berubah ketika dirilis nanti.
Untuk mengaktifkan Decorators eksperimental, anda harus menambahkan opsi
ts
function sealed(target) {
// lakukan sesuatu dengan 'target' ...
}
4 ke baris perintah atau ke berkasts
function sealed(target) {
// lakukan sesuatu dengan 'target' ...
}
5.Command Line:
shell
tsc --target ES5 --experimentalDecorators
tsconfig.json:
{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}
Decorator
Decorator adalah jenis deklarasi khusus yang dapat dilampirkan ke , , , , atau . Decorators menggunakan bentuk
ts
function sealed(target) {
// lakukan sesuatu dengan 'target' ...
}
6, dimanats
function sealed(target) {
// lakukan sesuatu dengan 'target' ...
}
7 harus mengevaluasi fungsi yang akan dipanggil saat proses dengan informasi tentang deklarasi yang didekorasi.Sebagai contoh, ada decorator
ts
function sealed(target) {
// lakukan sesuatu dengan 'target' ...
}
8 yang mungkin kita akan menuliskan fungsits
function sealed(target) {
// lakukan sesuatu dengan 'target' ...
}
9 sebagai berikut:ts
function sealed(target) {
// lakukan sesuatu dengan 'target' ...
}
CATATAN Anda dapat melihat contoh lengkapnya di .
Decorator Factories
Jika kita ingin menyesuaikan penerapan decorator pada sebuah deklarasi, kita dapat menuliskan sebuah decorator factory. Decorator Factory adalah sebuah fungsi yang mengembalikan ekspresi yang akan dipanggil oleh decorator ketika proses.
Kita dapat menuliskan decorator factory seperti berikut:
ts
function color(value: string) {
// ini adalah decorator factory
return function (target) {
// ini adalah decorator
// lakukan sesuatu dengan 'target' dan 'value'...
};
}
CATATAN Anda dapat melihat contoh lengkap dari penggunaan decorator factory di
Komposisi Decorator
Lebih dari satu decorator dapat diterapkan pada sebuah deklarasi, seperti contoh berikut:
Penerapan dengan satu baris:
ts
@f @g x
Penerapan lebih dari satu baris:
ts
@f
@g
x
Ketika lebih dari satu decorator diterapkan ke sebuah deklarasi, evaluasi yang dilakukan mirip seperti fungsi komposisi pada matematika. Pada model ini, ketika mengkomposisikan fungsi f dan g, maka akan menjadi (f ∘ g)(x) yang sama dengan f(g(x)).
Dengan demikian, langkah-langkah berikut dilakukan saat mengevaluasi beberapa decorator pada satu deklarasi di TypeScript:
- Ekspresi untuk setiap decorator dievaluasi dari atas ke bawah.
- Hasilnya kemudian disebut sebagai fungsi dari bawah ke atas.
JIka kita menggunakan , kita dapat mengamati urutan evaluasi ini dengan contoh berikut:
ts
function f() {
console.log("f(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("f(): called");
};
}
function g() {
console.log("g(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("g(): called");
};
}
class C {
@f()
@g()
method() {}
}
Yang akan mencetak keluaran ini ke console:
shell
f(): evaluated
g(): evaluated
g(): called
f(): called
Evaluasi Decorator
Ada urutan yang jelas tentang bagaimana decorator diterapkan ke berbagai deklarasi yang ada di dalam kelas:
- Parameter Decorators, diikuti oleh Method, Accessor, atau Property Decorators diterapkan untuk setiap anggota instance.
- Parameter Decorators, diikuti oleh Method, Accessor, atau Property Decorators diterapkan untuk setiap anggota statis.
- Parameter Dekorator diterapkan untuk konstruktor.
- Class Decorators diterapkan untuk kelas.
Decorator Kelas
Class Decorator dideklarasikan tepat sebelum deklarasi kelas. Decorator kelas diterapkan ke konstruktor kelas dan dapat digunakan untuk mengamati, memodifikasi, atau mengganti definisi kelas. Decorator kelas tidak dapat digunakan dalam berkas deklarasi, atau dalam konteks ambien lainnya (seperti pada kelas
ts
function color(value: string) {
// ini adalah decorator factory
return function (target) {
// ini adalah decorator
// lakukan sesuatu dengan 'target' dan 'value'...
};
}
0).Ekspresi untuk decorator kelas akan dipanggil sebagai fungsi pada waktu proses, dengan konstruktor kelas yang didekorasi sebagai satu-satunya argumennya.
Jika decorator kelas mengembalikan nilai, deklarasi kelas akan diganti dengan fungsi konstruktor yang disediakan.
CATATAN Jika Anda memilih untuk mengembalikan fungsi konstruktor baru, Anda harus berhati-hati dalam mempertahankan prototipe asli. Logika yang menerapkan dekorator pada waktu proses tidak akan melakukannya untukmu.
Berikut ini adalah contoh decorator kelas (
ts
function sealed(target) {
// lakukan sesuatu dengan 'target' ...
}
8) yang diterapkan ke kelasts
function color(value: string) {
// ini adalah decorator factory
return function (target) {
// ini adalah decorator
// lakukan sesuatu dengan 'target' dan 'value'...
};
}
2:ts
@sealed
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
Kita dapat mendefinisikan decorator
ts
function sealed(target) {
// lakukan sesuatu dengan 'target' ...
}
8 menggunakan deklarasi fungsi berikut:ts
function sealed(constructor: Function) {
Object.seal(constructor);
Object.seal(constructor.prototype);
}
Ketika
ts
function sealed(target) {
// lakukan sesuatu dengan 'target' ...
}
8 dijalankan, itu akan menyegel konstruktor dan prototipenya.Selanjutnya kita memiliki contoh bagaimana menimpa konstruktor.
{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}
0Method Decorators
Method Decorator dideklarasikan tepat sebelum deklarasi method. Dekorator diterapkan ke Property Descriptor untuk method, yang dapat digunakan untuk mengamati, memodifikasi, atau mengganti definisi method. Method Decorator tidak dapat digunakan dalam berkas deklarasi, saat kelebihan beban, atau dalam konteks ambien lainnya (seperti dalam kelas
ts
function color(value: string) {
// ini adalah decorator factory
return function (target) {
// ini adalah decorator
// lakukan sesuatu dengan 'target' dan 'value'...
};
}
5).Ekspresi untuk method decorator akan dipanggil sebagai fungsi pada waktu proses, dengan tiga argumen berikut:
- Bisa memiliki fungsi konstruktor kelas untuk anggota statis, atau prototipe kelas untuk anggota instance.
- Nama anggota.
- The Property Descriptor untuk anggota.
CATATAN Property Descriptor akan menjadi
ts
function color(value: string) {
// ini adalah decorator factory
return function (target) {
// ini adalah decorator
// lakukan sesuatu dengan 'target' dan 'value'...
};
}
6 jika target skripmu dibawahts
function color(value: string) {
// ini adalah decorator factory
return function (target) {
// ini adalah decorator
// lakukan sesuatu dengan 'target' dan 'value'...
};
}
7.
Jika method decorator mengembalikan sebuah nilai, maka akan digunakan sebagai Property Descriptor untuk method.
CATATAN Nilai yang dikembalikan akan dibiarkan, jika target kodemu dibawah
ts
function color(value: string) {
// ini adalah decorator factory
return function (target) {
// ini adalah decorator
// lakukan sesuatu dengan 'target' dan 'value'...
};
}
7.
Berikut adalah contoh penerapan method decorator (
ts
function color(value: string) {
// ini adalah decorator factory
return function (target) {
// ini adalah decorator
// lakukan sesuatu dengan 'target' dan 'value'...
};
}
9) ke method yang ada pada kelasts
function color(value: string) {
// ini adalah decorator factory
return function (target) {
// ini adalah decorator
// lakukan sesuatu dengan 'target' dan 'value'...
};
}
2:{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}
1Kita dapat mendefinisikan decorator
ts
function color(value: string) {
// ini adalah decorator factory
return function (target) {
// ini adalah decorator
// lakukan sesuatu dengan 'target' dan 'value'...
};
}
9 menggunakan fungsi deklarasi berikut:{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}
2Decorator
ts
@f @g x
2 disini adalah sebuah . Ketika decoratorts
@f @g x
2 dipanggil, ia akan merubahts
@f @g x
4 properti dari properti descriptor.Decorator Aksesor
Sebuah Accessor Decorator dideklarasikan tepat sebelum sebuah deklarasi aksesor. Decorator aksesor diterapkan ke Property Descriptor untuk aksesor dan dapat digunakan untuk mengamati, memodifikasi, atau mengganti definisi aksesor. Decorator aksesor tidak dapat digunakan dalam deklarasi berkas, atau dalam konteks ambien lainnya (seperti dalam kelas
ts
function color(value: string) {
// ini adalah decorator factory
return function (target) {
// ini adalah decorator
// lakukan sesuatu dengan 'target' dan 'value'...
};
}
5).CATATAN TypeScript melarang penerapan decorator ke aksesor
ts
@f @g x
6 dants
@f @g x
7 untuk single member. Sebaliknya, semua decorator untuk anggota harus diterapkan ke pengakses pertama yang ditentukan dalam urutan dokumen. Ini karena decorator berlaku untuk Property Descriptor, yang menggabungkan aksesorts
@f @g x
6 dants
@f @g x
7, bukan setiap deklarasi secara terpisah.
Ekspresi untuk decorator pengakses akan dipanggil sebagai fungsi pada waktu proses, dengan tiga argumen berikut:
- Bisa memiliki fungsi konstruktor kelas untuk anggota statis, atau prototipe kelas untuk anggota instance.
- Nama anggota.
- The Property Descriptor untuk anggota.
CATATAN Property Descriptor akan menjadi
ts
function color(value: string) {
// ini adalah decorator factory
return function (target) {
// ini adalah decorator
// lakukan sesuatu dengan 'target' dan 'value'...
};
}
6, jika target skripmu dibawahts
function color(value: string) {
// ini adalah decorator factory
return function (target) {
// ini adalah decorator
// lakukan sesuatu dengan 'target' dan 'value'...
};
}
7.
Jika aksesor decorator mengembalikan sebuah nilai, ia akan digunakan sebagai Property Descriptor untuk anggota.
CATATAN Nilai yang dikembalikan akan dibiarkan, jika target skripmu dibawah
ts
function color(value: string) {
// ini adalah decorator factory
return function (target) {
// ini adalah decorator
// lakukan sesuatu dengan 'target' dan 'value'...
};
}
7.
Berikut ada contoh penerapan aksesor decorator (
ts
@f
@g
x
3) ke anggota kelasts
@f
@g
x
4:{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}
3Kita dapat mendefinisikan decorator
ts
@f
@g
x
3 menggunakan deklarasi fungsi berikut:{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}
4Property Decorators
Sebuah Property Decorator dideklarasikan tepat sebelum deklarasi properti. Property Decorator tidak dapat digunakan dalam deklarasi berkas, atau dalam konteks ambien lainnya (seperti dalam kelas
ts
function color(value: string) {
// ini adalah decorator factory
return function (target) {
// ini adalah decorator
// lakukan sesuatu dengan 'target' dan 'value'...
};
}
5).Ekspresi untuk properti decorator akan dipanggil sebagai fungsi pada waktu proses, dengan dua argumen berikut:
- Dapat berupa fungsi konstruktor kelas untuk anggota statis, atau prototipe kelas untuk anggota instance.
- Nama anggota.
CATATAN Property Descriptior tidak menyediakan sebuah argumen untuk properti decorator karena bergantung tentang bagaimana properti decorator diinisialisasi pada TypeScript. Ini karena, saat ini tidak ada mekanisme untuk mendeskripsikan sebuah instance properti ketika mendefinisikan anggota dari sebuah prototipe, dan tidak ada cara untuk mengamati atau memodifikasi initializer untuk properti. Dan nilai kembalian juga akan dibiarkan. Sehingga, sebuah properti decorator hanya bisa digunakan untuk mengamati properti dengan nama yang spesifik, yang telah dideklarasikan pada sebuah kelas.
Kita dapat menggunakan informasi tersebut untuk memantau properti metadata, seperti pada contoh berikut:
{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}
5Kemudian, kita dapat mendefinisikan decorator
ts
@f
@g
x
7 dan fungsits
@f
@g
x
8 dengan menggunakan deklarasi fungsi berikut:{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}
6Decorator
ts
@f
@g
x
9 disini adalah sebuah . Ketikats
@f
@g
x
9 dipanggil, ia akan menambahkan properti metadata menggunakan fungsits
function f() {
console.log("f(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("f(): called");
};
}
function g() {
console.log("g(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("g(): called");
};
}
class C {
@f()
@g()
method() {}
}
1 dari pustakats
function f() {
console.log("f(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("f(): called");
};
}
function g() {
console.log("g(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("g(): called");
};
}
class C {
@f()
@g()
method() {}
}
2. Ketikats
@f
@g
x
8 dipanggil, ia akan membaca format dari nilai metadata-nya.CATATAN Contoh ini membutuhkan pustaka
ts
function f() {
console.log("f(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("f(): called");
};
}
function g() {
console.log("g(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("g(): called");
};
}
class C {
@f()
@g()
method() {}
}
2. Lihat untuk informasi lebih lanjut mengenai pustakats
function f() {
console.log("f(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("f(): called");
};
}
function g() {
console.log("g(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("g(): called");
};
}
class C {
@f()
@g()
method() {}
}
2.
Parameter Decorators
Parameter Decorator dideklarasikan tepat sebelum a parameter dideklarasikan. Parameter decorator diterapkan ke fungsi konstruktor pada kelas atau saat deklarasi method. Parameter decorator tidak dapat digunakan dalam deklarasi berkas, overload, atau dalam konteks ambien lainnya (seperti dalam kelas
ts
function color(value: string) {
// ini adalah decorator factory
return function (target) {
// ini adalah decorator
// lakukan sesuatu dengan 'target' dan 'value'...
};
}
5).Ekspresi untuk parameter decorator akan dipanggil sebagai fungsi pada waktu proses, dengan tiga argumen berikut:
- Dapat berupa fungsi konstruktor kelas untuk anggota statis, atau prototipe kelas untuk anggota instance.
- Nama anggota.
- Indeks ordinal dari parameter dalam daftar parameter fungsi.
CATATAN Sebuah parameter decorator hanya bisa digunakan untuk mengamati sebuah parameter yang telah dideklarasikan pada sebuah method.
Nilai kembalian dari parameter decorator akan dibiarkan.
Berikut adalah contoh penggunaan parameter decorator (
ts
function f() {
console.log("f(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("f(): called");
};
}
function g() {
console.log("g(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("g(): called");
};
}
class C {
@f()
@g()
method() {}
}
7) pada anggota kelasts
function color(value: string) {
// ini adalah decorator factory
return function (target) {
// ini adalah decorator
// lakukan sesuatu dengan 'target' dan 'value'...
};
}
2:{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}
7Kemudian, kita dapat mendefinisikan decorator
ts
function f() {
console.log("f(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("f(): called");
};
}
function g() {
console.log("g(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("g(): called");
};
}
class C {
@f()
@g()
method() {}
}
7 danshell
f(): evaluated
g(): evaluated
g(): called
f(): called
0 menggunakan deklarasi fungsi berikut:{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}
8Decorator
ts
function f() {
console.log("f(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("f(): called");
};
}
function g() {
console.log("g(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("g(): called");
};
}
class C {
@f()
@g()
method() {}
}
7 menambahkan entri metadata yang menandakan bahwa parameter tersebut diperlukan. Decoratorshell
f(): evaluated
g(): evaluated
g(): called
f(): called
0 kemudian akan memvalidasi semua argumen yang ada, sebelum method-nya dijalankan.CATATAN Contoh ini memerlukan pustaka
ts
function f() {
console.log("f(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("f(): called");
};
}
function g() {
console.log("g(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("g(): called");
};
}
class C {
@f()
@g()
method() {}
}
2 Lihat untuk informasi lebih lanjut mengenai pustakats
function f() {
console.log("f(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("f(): called");
};
}
function g() {
console.log("g(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("g(): called");
};
}
class C {
@f()
@g()
method() {}
}
2.
Metadata
Beberapa contoh menggunakan pustaka
ts
function f() {
console.log("f(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("f(): called");
};
}
function g() {
console.log("g(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("g(): called");
};
}
class C {
@f()
@g()
method() {}
}
2 yang menambahkan polyfill untuk API metadata eksperimental. Pustaka ini belum menjadi bagian dari standar ECMAScript (JavaScript). Namun, ketika decorator secara resmi diadopsi sebagai bagian dari standar ECMAScript, ekstensi ini akan diusulkan untuk diadopsi.Anda dapat memasang pustaka ini melalui npm:
{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}
9TypeScript menyertakan dukungan eksperimental untuk menghadirkan jenis metadata tertentu untuk deklarasi yang memiliki decorator. Untuk mengaktifkan dukungan eksperimental ini, Anda harus mengatur opsi kompilator
shell
f(): evaluated
g(): evaluated
g(): called
f(): called
6 baik pada baris perintah atau dits
function sealed(target) {
// lakukan sesuatu dengan 'target' ...
}
5 Anda:Command Line:
ts
function sealed(target) {
// lakukan sesuatu dengan 'target' ...
}
0tsconfig.json:
ts
function sealed(target) {
// lakukan sesuatu dengan 'target' ...
}
1Ketika diaktifkan, selama pustaka
ts
function f() {
console.log("f(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("f(): called");
};
}
function g() {
console.log("g(): evaluated");
return function (
target,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("g(): called");
};
}
class C {
@f()
@g()
method() {}
}
2 di-import, informasi jenis design-time tambahan akan diekspos saat runtime.Kita dapat melihat action pada contoh berikut:
ts
function sealed(target) {
// lakukan sesuatu dengan 'target' ...
}
2Kompilator TypeScript akan memasukkan informasi jenis design-time menggunakan decorator
shell
f(): evaluated
g(): evaluated
g(): called
f(): called
9. Anda dapat menganggapnya setara dengan TypeScript berikut:ts
function sealed(target) {
// lakukan sesuatu dengan 'target' ...
}
3CATATAN Decorator metadata adalah fitur experimental dan mungkin dapat menyebabkan gangguan pada rilis di masa mendatang.