詳情可查看官方網(wǎng)址;https://www.tslang.cn/docs/handbook/decorators.html
image.png
tsc --target ES5 --experimentalDecorators
實(shí)例
簡(jiǎn)單的使用裝飾器
- app.ts
//簡(jiǎn)單的使用裝飾器
//定義下面的裝飾器所指代的函數(shù)
//taget 是被修飾的傳進(jìn)來(lái)的參數(shù)
function hello(target) {
console.log('xiaochuan');
}
//裝飾器的聲明方法 @+裝飾器的名稱
//下面是用裝飾器去裝飾一個(gè)類
@hello
class xiaochuan{
}
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TypeScript 裝飾器</title>
</head>
<body>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
- 命令行中的執(zhí)行命令與之前的也有所差異
tsc --target ES5 --experimentalDecorators app.ts
- 瀏覽器效果圖
image.png
- 總結(jié)：
上面的示例輸出了
xiaochuan，但是我們并沒(méi)有在代碼中去調(diào)用這個(gè)方法，我們是使用了這個(gè)裝飾器hello去裝飾xiaochuan這個(gè)類，從而成功的打印出了上面的效果
使用裝飾器工廠函數(shù)
//需求：定制一個(gè)裝飾器應(yīng)用到聲明上
//使用裝飾器工廠函數(shù) 裝飾器工廠實(shí)際上就是一個(gè)函數(shù)
function color(value: string) { // 這是一個(gè)裝飾器工廠
return function (target) { // 這是裝飾器
// do something with "target" and "value"...
}
}
多個(gè)裝飾器的定義方法
//需求：定義一個(gè)函數(shù) 他的里面不止有一個(gè)裝飾器
//下面示例是 定義了 f 和 g 兩個(gè)裝飾器去裝飾 x
@f @g x//單行的寫法
//多行的寫法
@f
@g
x
多個(gè)裝飾器的執(zhí)行順序
//如何知道多個(gè)裝飾器的執(zhí)行順序？
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() {}
}
- 瀏覽器效果圖
image.png
- 總結(jié)：
上面的執(zhí)行其實(shí)是按照這樣的邏輯來(lái)的：
f 先執(zhí)行他將 g 包裹在里面 g 里面包裹的是 x f(g(x))
類裝飾器
// 我們可以這樣定義@sealed裝飾器：
function sealed(constructor: Function) {
Object.seal(constructor);
Object.seal(constructor.prototype);
}
// 下面是使用類裝飾器(@sealed)的例子，應(yīng)用在Greeter類：
@sealed
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
- 總結(jié)：
當(dāng)@sealed被執(zhí)行的時(shí)候，它將密封此類的構(gòu)造函數(shù)和原型。(注：參見(jiàn)Object.seal)
方法裝飾器
//下面是一個(gè)方法裝飾器（@enumerable）的例子
//我們可以用下面的函數(shù)聲明來(lái)定義@enumerable裝飾器：
function enumerable(value: boolean) {
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {//PropertyDescriptor 是屬性描述器
descriptor.enumerable = value;
console.log(descriptor.enumerable);
};
}
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
@enumerable(false)
greet() {
return "Hello, " + this.greeting;
}
}
//上面類中的@enumerable(false)是一個(gè)裝飾器工廠。 當(dāng)裝飾器 @enumerable(false)被調(diào)用時(shí)，它會(huì)修改屬性描述符 descriptor 的enumerable屬性。
- 瀏覽器效果圖
image.png
訪問(wèn)器裝飾器
// 我們可以通過(guò)如下函數(shù)聲明來(lái)定義@configurable裝飾器：
function configurable(value: boolean) {
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
descriptor.configurable = value;
};
}
// 下面是使用了訪問(wèn)器裝飾器（@configurable）的例子，應(yīng)用于Point類的成員上：
class Point {
private _x: number;
private _y: number;
constructor(x: number, y: number) {
this._x = x;
this._y = y;
}
@configurable(false)
get x() { return this._x; }
@configurable(false)
get y() { return this._y; }
}
屬性裝飾器
function configurable(value: boolean) {
return function (target: any, propertyKey: string) {
console.log('屬性：',value);
};
}
class Hello{
@configurable(false)//這里在執(zhí)行值會(huì)直接在控制臺(tái)輸出一個(gè) false
name:string;
}
參數(shù)裝飾器
function require(value: boolean) {
return function (target: any, propertyKey: string,index:number) {//index 是增加的索引參數(shù)
console.log('參數(shù)：',value);
};
}
class Hello{
xiaochuan(@require(false) age:number){
}
}
