TS 的装饰器

TS - 装饰器

注意：装饰器目前是一项试验性特性，在未来的版本中可能会发生改变

• 装饰器一般使用在以下几个地方
  • 类
  • 类属性
  • 类方法
  • 类方法的参数
  • 通过这些也能看出，只有 类 会使用到装饰器
• 装饰器的意义：
  • 装饰器其实就是一个方法，可以注入到 类的 属性/方法中，对其进行一些扩展
  • 让我们的一个类变得更加的多样化，更加的完善
• 就好像一个房间，如果只是一个毛坯房那么并不美观也不实用，但是如果加上各种各样的装饰器（家具），变成了精装房，那就特别的美观和实用

前置工作

• 因为 ts 的装饰器功能，所以默认是不允许使用的，如果确实需要使用，那么请按照以下步骤修改
  1. 打开你的 tsconfig.json 文件。如果文件不存在，你可以通过在项目的根目录下运行 tsc --init 命令来生成它。
  2. 在 compilerOptions 对象中，添加或修改以下属性：
     • "target": "ES5",: 将 TS 代码编译为甚么版本的 JS 版本
     • "experimentalDecorators": true：这个选项启用对传统实验装饰器的实验支持。

类装饰器

• 其实就是自己书写一个方法，对一个类进行扩展

// 准备一个装饰器函数
function fn(params: any) {
    // params 就是将来 fn 去装饰的类
    params.prototype.name = "jack";
    params.prototype.sayHi = function () {
        console.log("hello world");
    };
}

• 我们就可以在定义这个类的时候，使用 fn 方法对其进行装饰

@fn
class Person {
    constructor() {}
}

// 使用 Person 类去创建实例
// 在创建的时候，会先执行一遍 fn 装饰器函数
const user = new Person();

interface IUser {
    name: string;
    sayHi: () => void;
}

console.log((user as IUser).name);
(user as IUser).sayHi();

• 看起来好像没有什么用，但是我们可以通过下列的案例来看

原始代码

class Person {
    constructor() {}
    play() {}
    study() {}
    sleep() {}
}
class Student {
    constructor() {}
    play() {}
    study() {}
    sleep() {}
}
class Teacher {
    constructor() {}
    play() {}
    study() {}
    sleep() {}
}

继承优化

• 我们发现每一个类里面都会有一个 play 一个 study 一个 sleep 方法
• 这个时候, 我们就是在重复的书写代码
• 我们这个时候就想到一个内容, 叫做继承

class People {
    constructor() {}
    play() {}
    study() {}
    sleep() {}
}
// 每次定义其他类的时候进行继承
class Student extends People {}
class Person extends People {}
class Teacher extends People {}

装饰器实现

function fn(params: any) {
    params.prototype.play = function () {};
    params.prototype.study = function () {};
    params.prototype.sleep = function () {};
}

@fn
class Student {}

@fn
class Person {}

@fn
class Teacher {}

• 同样的内容, 我们用装饰器也可以实现, 我们发现和继承没有什么区别
• 但是, 我们如果用装饰器实现的话, 可以通过装饰器, 把不同的内容分开, 实现更加灵活

装饰器优化

function addPlay(params: any) {
    params.prototype.play = function () {};
}
function addStudy(params: any) {
    params.prototype.study = function () {};
}
function addSleep(params: any) {
    params.prototype.sleep = function () {};
}

// 扩展 study 和 sleep
@addStudy
@addSleep
class Student {}

// 扩展 play 和 sleep
@addPlay
@addSleep
class Person {}

// 扩展 play 和 study
@addPlay
@addStudy
class Teacher {}

类属性装饰器

• 顾名思义, 就是用来对于类里面属性的扩展
• 注意 : 可以修改属性的值, 但是不能修改该属性的类型限制
• 这样我们在定义类的时候, 可以根据装饰器对于某些属性进行修饰

// formatTime 函数用来生成装饰器函数
// 目的: 为了将来使用装饰器的时候可以传递参数
function formatTime(time: Date) {
    // 把这个返回值函数当做装饰器函数
    return function (params: any, key: string) {
        // params 就是将来 返回值函数 去装饰的类
        // key 就是你想修改的属性
        // 做一个简单的格式化时间的逻辑
        let timeStr = `${time.getFullYear()}-${
            time.getMonth() + 1
        }-${time.getDate()}`;

        Object.defineProperty(params, key, {
            value: timeStr,
        });
    };
}

// 创建一个类
class Student {
    // 在创建属性的时候直接对该属性进行赋值
    @formatTime(new Date(1652500063190))
    time: string | undefined;

    constructor() {}
}

const s1 = new Student();
console.log(s1.time); // '2022-5-14'

类方法的装饰器

• 同样的, 我们的方法装饰器就是用来对方法进行一些修饰

function fn(x: string, y: number) {
    // 返回一个真实的装饰器函数
    return function (
        target: any,
        name: string,
        descriptor: TypedPropertyDescriptor<() => void>
    ) {
        // 保存原方法
        const originalMethod = descriptor.value;

        // 修改方法，添加额外逻辑
        descriptor.value = function (...args: any[]) {
            console.log(
                `Student2 --- play --- 我玩的是 ${x}, 已经玩了 ${y} 年了`
            );
            // 调用原方法
            return (originalMethod as Function).apply(this, args);
        };

        // 如果需要，还可以返回修改后的 descriptor
        return descriptor;
    };
}

// 不使用装饰器
class Student1 {
    play() {
        console.log("Student1 我喜欢玩的是 篮球, 足球, 羽毛球");
    }
}

const s1 = new Student1();
s1.play();
// Student1 我喜欢玩的是 篮球, 足球, 羽毛球

// 使用装饰器
class Student2 {
    @fn("TS", 3)
    play() {
        console.log("Student2 我喜欢玩的是 篮球, 足球, 羽毛球");
    }
}

const s2 = new Student2();
s2.play();
// Student2 --- play --- 我玩的是 TS, 已经玩了 3 年了
// Student2 我喜欢玩的是 篮球, 足球, 羽毛球

类方法的参数装饰器

• 这种装饰器就是用来修饰类身上的方法中的参数的

// 依旧是我书写的装饰器工厂
function fn(n: any) {
    console.log("n : ", n);
    return function (params: any, name: string, index: number) {
        // params 接受的是当前的原型
        // name: 函数名
        // index: 索引位置
        // 查看函数实参的个数
        console.log("length : ", params[name].length);
    };
}

• 注意
  • 只能做监控参数是否传递, 没办法修改
  • 必须要使用装饰器工厂形式
  • 因为目前的装饰器机制还不是很完善

class Student {
    play(
        // 修饰参数, 就放在参数的前面
        @fn(20)
        n: number
    ) {
        console.log("play 内的 n : ", n);
    }
}

const s1 = new Student();
s1.play(100);

/**
 *  n :  20
 *  length : 1
 *  'play 内的 n' : 100
*/

总结

• 各种装饰器就是对对应的内容进行一些修饰而已
• 目前还没有那么完善, 期待后期 TS 的更新和完善
• 我相信完善以后的装饰器会是非常强大的存在