TypeScript 裝飾器的簡單使用

import { mkdir } from "fs"
import copySync from "fs-extra/lib/copy-sync"

1、typeScritp的裝飾器

建立目錄 mkdir tsProject
進入目錄中 執行npm init 初始化項目
由於是ts項目 因此須要建立ts的的配置文件 tsconfig.json
執行tsc init 若是沒有安裝tsc 編譯器

咱們建立ts 使用的webpack4.x版本上

2、安裝依賴和基本配置

進到目錄下typeScript / ts - loader 和 webpack
執行 npm i typescript ts - loader webpack - D

由於webpack默認找的是index.js 入口文件
全部還得配置一下webpack.config.js

3、建立webpack.config.js文件

配置須要加載器
例如 module.exports = {
entry: '/src/index.ts'
module: {
rules: [
{
test: '/.ts$/',
loader: 'ts-loader',
exclude: 'node_modules'
}
]
}
}

4、在index.ts
function typeScriptHello(): void {
console.log("typeScript")
}

5、typeScript 的裝飾器的使用
在ts 中裝飾器就是函數 能夠裝飾 類 或是屬性 、方法或者方法的參數等

ts默認不開啓支持裝飾器 因此咱們必須到tsconfig.json 中將experimentalDecorators 設置爲true

6、編寫一個裝飾器hello

function hello(target: any): void {
console.log(target, '參數')
}

接着 建立一個anminal類, 將裝飾器用在類上

@hello
class Anminal {
constructor() { }
}
這時候能夠看到hello 打印[Function Anminal]說明hello 裝飾器獲取第一個參數是Anminal類
意味着咱們在裝飾器裏面返回的也必須是個函數
例如
function hello(name: any): Function {
return function (target: any): void {
target.proptype.name = name;
}
}

@hello('tsScript')
class Anminal {
constructor() { }
}
let a: any = new Anminal()
console.log(a.name)
這裏調用時候傳入'tsScript'參數，在裝飾器內部能夠接受到這個函數。
打印出tsScript，它是經過裝飾器傳入的。給類的對象添加多一個name屬性 而且賦值，也就是咱們能夠不改變類內部代碼邏輯狀況下
實現動態修改類的內部邏輯，一樣道理能夠在裝飾器中去重寫類的方法成員等等

7、屬性裝飾器

與類的裝飾器同樣經過函數的申明方式，使用

class Anminal {
constructor() { }br/>@printProerty('屬性裝飾器')
public name:any;

}

function printProerty(params:any):any{
return function(target:any,attr:any){
target[attr] = params;
console.log(target[attr])
}
}
這裏面params是咱們傳入裝飾器的參數
target是咱們修飾的屬性對象
attr是咱們要裝飾的屬性名

target[attr] = params; 改變類的屬性名的

總結：ts 裝飾器就是一個特定函數在不改變原來的邏輯下用來修改類或者是屬性 方法名邏輯