03.TypeScript 高级语法

最新推荐文章于 2024-04-04 14:13:19 发布

John是橘红

最新推荐文章于 2024-04-04 14:13:19 发布

阅读量349

点赞数

分类专栏： TypeScript 文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/weixin_45196863/article/details/125000416

版权

TypeScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

TypeScript 高级语法

1. 类的装饰器

装饰器入门

装饰器本身是一个函数，装饰器通过 @ 进行调用。

要使用装饰器，tsconfig 需要添加允许装饰器的配置：

    "experimentalDecorators": true,                   
    "emitDecoratorMetadata": true,

尝试运行以下代码：

function testDecorator(constructor: any) {
  console.log("decorator");
}

@testDecorator
class Test {}

可以看到控制台输出了 “decorator”。类装饰器在类创建好后立即执行，和是否创建类实例无关。

类装饰器接收的函数是被修饰的类的构造函数。

当使用多个装饰器时候，离 class 越近的，就优先执行。

function testDecorator(constructor: any) {
  console.log("decorator");
}

function testDecorator1(constructor: any) {
  console.log("decorator1");
}

@testDecorator
@testDecorator1
class Test {}
// 先输出 decorator1 再输出 decorator

工厂模式生成装饰器

执行一个函数来生成一个新的装饰器。

function testDecorator(text: string) {
  return function(constructor: any) {
    console.log(text);
  }
}

@testDecorator("hello")
class Test {}

使用装饰器扩展类的功能

直接放代码：

function testDecorator<T extends new (...args: any[]) => {}>(constructor: T) {
  return class extends constructor {
    name = "decorator";
  };
}

@testDecorator
class Test {
  name: string;
  constructor(name: string) {
    console.log(1);
    this.name = name;
    console.log(this.name);
    console.log(2);
  }
}

const test = new Test("sjh");
console.log(test);

输出结果：

1
sjh
2
Test { name: 'decorator' }

输出结果表明了，装饰器修改了类中的成员变量，同时，装饰器的执行是在类的构造器之后的。

装饰器上的泛型比较难理解，说白一点，就是指明 T 为具有构造函数的类型。下面详细解析内容：

new (...args: any[]) => {}

该构造函数函数返回一个对象类型，这个函数能接受任意多的参数，并且不限制类型。

T extends new (...args: any[]

T 这种类型可以通过这种构造函数被实例化出来。

装饰器扩展类的方法

按照上面的写法，是这样写的：

function testDecorator<T extends new (...args: any[]) => {}>(constructor: T) {
  return class extends constructor {
    name = "decorator";
    getName() {
      return this.name;
    }
  };
}

@testDecorator
class Test {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

const test = new Test("sjh");

但是如果使用 @ 装饰器，TS 是无法提供拓展方法 getName 的提示的，因此得写成较为晦涩的写法：

function testDecorator<T extends new (...args: any[]) => {}>(constructor: T) {
  return class extends constructor {
    name = "decorator";
    getName() {
      return this.name;
    }
  };
}

const Test = testDecorator(
  class {
    name: string;
    constructor(name: string) {
      this.name = name;
    }
  }
);

const test = new Test("sjh");
console.log(test.getName());

@ 装饰器直接写成更原生的方法，Test 就是经过修饰后的新的类。这样的话就能被识别，就可以获得提示了。

2. 方法装饰器

同样的，方法也有装饰器。

一般有的场景是，不允许原本的方法被修改，因此可以用方法装饰器进行改装来避免这个问题。还有的场景是，在原本方法的基础上添加新的特性。

方法装饰器本质也是函数，里边有三个参数：

function decorator(target: any, key: string, descriptor: PropertyDescriptor) {
  // 函数执行内容
}

target：如果是普通方法，target 对应的是类的 prototype；如果是静态方法，target 对应的是类的构造函数
key：方法名
descriptor：存着一些属性，用来控制该被装饰的函数

2.1 应用场景

类里的方法不可被修改

function uneditable(target: any, key: string, descriptor: PropertyDescriptor) {
  // 该方法不可被重写
  descriptor.writable = false;
}

class Test {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  @uneditable
  getName() {
    return this.name;
  }
}

const test = new Test("sjh");

test.getName = () => {
  return "123";
};
// 尝试修改不可被重写的方法，因此会报错

console.log(test.getName());

用方法装饰器修改方法，用 descriptor.value 顶替掉原来的方法。

function changeFunc(target: any, key: string, descriptor: PropertyDescriptor) {
  // descriptor.value = function getName
  descriptor.value = function () {
    return "modified";
  };
}

class Test {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  @changeFunc
  getName() {
    return this.name;
  }
}

const test = new Test("sjh");

console.log(test.getName()); // 输出 modified

3. 访问器的装饰器

复习一下访问器

class Test {
  private _name: string;
  constructor(name: string) {
    this._name = name;
  }
  get name() {
    return this._name;
  }
  set name(name: string) {
    this._name = name;
  }
}

const test = new Test("sjh");
test.name = "123";
console.log(test.name); // 输出 "123"

访问器修饰器的使用

访问器本质上还是方法，因此该咋用还是咋用。

例如，数据不可被修改：

function visitDecorator(target: any, key: string, descriptor: PropertyDescriptor) {
  descriptor.writable = false;
}

class Test {
  private _name: string;
  constructor(name: string) {
    this._name = name;
  }
  get name() {
    return this._name;
  }
  @visitDecorator
  set name(name: string) {
    this._name = name;
  }
}

const test = new Test("sjh");
test.name = "123";
// setter 上的装饰器不允许修改内容，因此会报错
console.log(test.name);

4. 属性的装饰器

属性同样有装饰器，但是就不能接收到 descriptor 了。

第一个参数是 target，代表类的原型，第二个参数是 key，为属性名称。

自己建一个 descriptor

虽然没有 descriptor，但是可以自己写。例如，实现属性不可被改写。装饰器函数返回一个 descriptor，里边的 writable 改为 false，可以创造出不能被修改的属性。

function nameDecorator(target: any, key: string): any {
  const descriptor: PropertyDescriptor = {
    writable: false,
  };
  return descriptor;
}

class Test {
  @nameDecorator
  name = "sjh";
}

const test = new Test();
test.name = "123"; // 报错
console.log(test.name);

target 指的是类的原型

function nameDecorator(target: any, key: string): any {
  // Test.prototype.name = 123
  target[key] = "123";
}

class Test {
  @nameDecorator
  name = "sjh";
}

const test = new Test();
console.log(test.name);

上面的代码输出结果仍然是 “sjh”，原因在于，“sjh” 是在实例下的属性，而装饰器里的 “123” 被放置在了原型上。根据原型链的查找原则，优先找到实例下的属性。

如果要访问 “123”，则需要找实例的隐式原型上的 name 属性。

console.log((test as any).__proto__.name)

5. 参数装饰器

可以对类里的方法的参数进行装饰。

装饰器携带三个参数：

target：类的原型
method：方法名
paramIndex：参数在方法里的 index

function paramDecorator(target: any, key: string, paramIndex: number): any {
  console.log(target, key, paramIndex);
}

class Test {
  getInfo(name: string, @paramDecorator age: number) {
    console.log(name, age);
  }
}

const test = new Test();
console.log(test.getInfo("sjh", 18));

6. 装饰器的实际使用范例

获取对象里的属性，但是这个属性不一定存在，不存在的话给提示，普通写法会这样写：

class Test {
  userInfo: any = undefined;
  getName() {
    try {
      return this.userInfo.name;
    } catch (e) {
      console.log("userInfo.name 不存在")
    }
  }
  getAge() {
    try {
      return this.userInfo.age;
    } catch (e) {
      console.log("userInfo.age 不存在")
    }
  }
}

但是这样会有大量的重复代码，因此这里使用装饰器解决。

function catchError(msg: string) {
  return function(target: any, key: string, descriptor: PropertyDescriptor) {
    const fn = descriptor.value;
    descriptor.value = function () {
      try {
        fn();
      } catch (e) {
        console.log(msg);
      }
    };
  }
}

class Test {
  userInfo: any = undefined;

  @catchError("userInfo.name 不存在")
  getName() {
    return this.userInfo.name;
  }
  
  @catchError("userInfo.age 不存在")
  getAge() {
    return this.userInfo.age;
  }
}

7. reflect-metadata

元数据是挂在对象上的数据，但是不能直接通过输出查看到。

yarn add reflect-metadata

添加和获取元数据内容基本使用

import "reflect-metadata";

const user = {
  name: "sjh",
};

Reflect.defineMetadata("data", "test", user);
console.log(Reflect.getMetadata("data", user));

用装饰器添加和获取元数据

元数据可以添加到类、类方法、类属性上。

import "reflect-metadata";

@Reflect.metadata("data", "test")
class User {
  @Reflect.metadata("nameMeta", "hhh")
  name = "sjh";
}

console.log(Reflect.getMetadata("data", User));
// 属性的元数据放在类的原型的对应属性上，方法同理
console.log(Reflect.getMetadata("nameMeta", User.prototype, "name"));

其他 API

hasMetadata // 有该元数据
hasOwnMetadata // 有该元数据且不是继承过来的
getMetadataKeys // 显示所有的元数据名称
deleteMetadata // 删除元数据

@Reflect.metadata 实现原理

本质上是一个函数，返回一个装饰器。

自己实现一个功能相同的注解：

function setData(dataKey: string, msg: string) {
  return function (target: User, key: string) {
    Reflect.defineMetadata(dataKey, msg, target, key);
  };
}

@showData
class User {
  @Reflect.metadata("data", "name")
  getName() {
    console.log("name");
  }
  @setData("data", "age")
  getAge() {
    console.log("age");
  }
}

8. 装饰器执行顺序

方法装饰器优先于类装饰器

John是橘红

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
03.TypeScript 高级语法

TypeScript 高级语法1. 类的装饰器装饰器入门装饰器本身是一个函数，装饰器通过 @ 进行调用。要使用装饰器，tsconfig 需要添加允许装饰器的配置： "experimentalDecorators": true, "emitDecoratorMetadata": true, 尝试运行以下代码：function testDecorator(constructor: any) { console.log("decorator"
复制链接

扫一扫