前端面试题“请说说你对 TS 中装饰器的理解“

数擎科技

于 2024-10-11 21:05:16 发布

阅读量851

点赞数 21

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

本文链接：https://blog.csdn.net/qq_34820371/article/details/142863125

版权

TypeScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端面试题包括ECMScript,TypeScript,Nodejs,React,Webgl,Threejs等还在整理中，在线地址前端面试题，源码地址大家多多支持才有动力给大家分享更多好的面试题。

在 TypeScript 中，装饰器（Decorators）是一种特殊的语法，用于在类及其成员（如属性、方法、访问器）上添加元数据或修改行为。它们可以用于函数和类的注解，也可以用于动态修改类的行为。装饰器的核心概念是在不改变类本身逻辑的前提下，增强类的功能或控制类的行为。

装饰器的基本概念

装饰器本质上是一种函数，它可以应用到类、方法、访问器、属性或者参数上。装饰器在编译时执行，并且可以访问被装饰元素的元数据，从而对其进行操作或修改。装饰器通常用于元编程、依赖注入、日志记录、权限控制等场景。
TypeScript 中的装饰器可以应用在以下四个地方：

类装饰器：作用于整个类。
方法装饰器：作用于类的方法。
访问器装饰器：作用于属性的 getter 和 setter。
属性装饰器：作用于类的属性。
参数装饰器：作用于方法的参数。

启用装饰器

在 TypeScript 中使用装饰器，首先需要在 tsconfig.json 中启用 “experimentalDecorators” 选项：

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

类装饰器

类装饰器用于修改或增强整个类。它的形式是接受一个类构造函数作为参数，可以返回一个新的类或修改类的行为。

// 定义一个简单的类装饰器
function Logger(constructor: Function) {
  console.log(`Creating new instance of ${constructor.name}`);
}

@Logger
class Person {
  constructor(public name: string) {}
}

// 创建一个 Person 实例，触发装饰器
const john = new Person('John');

在上面的例子中，@Logger 是一个装饰器，它记录了类的创建过程。在 Person 类上应用了 @Logger 装饰器后，每当实例化这个类时，控制台都会输出类名。

方法装饰器

方法装饰器用于修改或增强类的方法。它接收三个参数：类的原型、方法的名称以及方法的属性描述符。通过装饰器，可以修改方法的行为或属性描述符。

// 定义一个方法装饰器
function LogMethod(
  target: any,
  propertyName: string,
  descriptor: PropertyDescriptor,
) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(
      `Calling ${propertyName} with arguments: ${JSON.stringify(args)}`,
    );
    return originalMethod.apply(this, args);
  };
}

class Calculator {
  @LogMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(2, 3); // 输出: Calling add with arguments: [2,3]

在这个例子中，@LogMethod 是一个方法装饰器，它拦截了 add 方法的调用并记录了参数信息，之后再执行原始方法逻辑。

访问器装饰器

访问器装饰器用于装饰类的 getter 或 setter 方法。它与方法装饰器类似，但只能用于访问器。

// 定义一个访问器装饰器
function CheckAge(
  target: any,
  propertyName: string,
  descriptor: PropertyDescriptor,
) {
  const originalSetter = descriptor.set;

  descriptor.set = function (value: number) {
    if (value < 0) {
      throw new Error('Age cannot be negative');
    }
    originalSetter?.call(this, value);
  };
}

class User {
  private _age: number = 0;

  @CheckAge
  set age(value: number) {
    this._age = value;
  }

  get age(): number {
    return this._age;
  }
}

const user = new User();
user.age = 25; // 正常设置
// user.age = -5;  // 抛出错误: Age cannot be negative

在这个例子中，@CheckAge 是一个访问器装饰器，它确保年龄不能设置为负数。

属性装饰器

属性装饰器用于类的属性，主要用于元数据的记录，不能修改属性的行为。属性装饰器接收两个参数：类的原型和属性名称。

// 定义一个属性装饰器
function ReadOnly(target: any, propertyKey: string) {
  console.log(`Setting up property: ${propertyKey}`);
}

class Car {
  @ReadOnly
  model: string;

  constructor(model: string) {
    this.model = model;
  }
}

在上面的例子中，@ReadOnly 是一个属性装饰器，它不能改变属性本身的行为，但可以记录属性的元数据或添加其他额外逻辑。

参数装饰器

参数装饰器用于装饰方法的参数，它接收三个参数：类的原型、方法名以及参数的位置索引。参数装饰器通常用于依赖注入等场景。

// 定义一个参数装饰器
function LogParam(target: any, propertyKey: string, parameterIndex: number) {
  console.log(
    `Parameter of ${propertyKey} at index ${parameterIndex} is being decorated`,
  );
}

class CarService {
  getCar(@LogParam carId: number) {
    console.log(`Fetching car with ID: ${carId}`);
  }
}

const service = new CarService();
service.getCar(123); // 输出: Parameter of getCar at index 0 is being decorated

在这个例子中，@LogParam 是一个参数装饰器，用于记录方法参数的信息。

装饰器工厂

装饰器工厂是一个返回装饰器的函数，可以接受参数，从而让装饰器更加灵活。

// 定义一个装饰器工厂
function Log(message: string) {
  return function (constructor: Function) {
    console.log(message);
  };
}

@Log('Logging for the User class')
class User {
  constructor(public name: string) {}
}