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