import { mkdir } from "fs"
import copySync from "fs-extra/lib/copy-sync"
一、typeScritp的裝飾器
創建目錄 mkdir tsProject
進入目錄中 執行npm init 初始化項目
因爲是ts項目 所以需要創建ts的的配置文件 tsconfig.json
執行tsc init 如果沒有安裝tsc 編譯器
我們創建ts 使用的webpack4.x版本上
二、安裝依賴和基本配置
進到目錄下typeScript / ts - loader 和 webpack
執行 npm i typescript ts - loader webpack - D
因爲webpack默認找的是index.js 入口文件
所有還得配置一下webpack.config.js
三、創建webpack.config.js文件
配置需要加載器
例如 module.exports = {
entry: '/src/index.ts'
module: {
rules: [
{
test: '/.ts$/',
loader: 'ts-loader',
exclude: 'node_modules'
}
]
}
}
四、在index.ts
function typeScriptHello(): void {
console.log("typeScript")
}
五、typeScript 的裝飾器的使用
在ts 中裝飾器就是函數 可以裝飾 類 或是屬性 、方法或者方法的參數等
ts默認不開啓支持裝飾器 所以我們必須到tsconfig.json 中將experimentalDecorators 設置爲true
六、編寫一個裝飾器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屬性 並且賦值，也就是我們可以不改變類內部代碼邏輯情況下
實現動態修改類的內部邏輯，同樣道理可以在裝飾器中去重寫類的方法成員等等
七、屬性裝飾器
與類的裝飾器一樣通過函數的申明方式，使用
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 裝飾器就是一個特定函數在不改變原來的邏輯下用來修改類或者是屬性 方法名邏輯