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 装饰器就是一个特定函数在不改变原来的逻辑下用来修改类或者是属性 方法名逻辑