TypeScript装饰器解释：现在编写更干净、更智能的代码

typescript是一种基于javascript的强类型编程语言，可在大规模开发中提供更好的工具支持。typescript的开发目的是帮助解决使用javascript编写代码时出现的一些问题。通过使用类型，typescript克服了javascript的缺陷。

typescript源代码中的每个值都有一个类型。typescript检查每个值是否符合其类型的规则。typescript可以在不执行或运行程序的情况下检查源代码中的错误。

这被称为静态类型检查，它基于程序中使用的值的类型对开发中的错误进行检查。

除了帮助您编写更清晰和可读性更高的代码以及提供静态类型检查外，typescript还提供了其他功能，以帮助提高代码的可读性，可重用性和可维护性。其中一个功能是typescript装饰器。

typescript装饰器

typescript中的装饰器是一种功能，允许您在运行时更改或增强代码的行为，或向代码添加元数据。装饰器允许在typescript中进行元编程。元编程是一种编程技术，其中程序可以将其他程序视为其数据，从而修改其行为。

本质上，装饰器是在访问或修改装饰的元素时将被调用以执行某些逻辑的函数。

通过这种方式，可以向装饰的元素添加附加功能。typescript装饰器可以附加到类声明、方法、属性、访问器（getter和setter）和方法参数。

在typescript中，装饰器以@符号为前缀，并采用@expression的形式，其中expression求值为在运行时将被调用的函数。使用装饰器在typescript中的一般语法如下所示：

@decoratorname
itemtodecorate

下面是一个简单类装饰器的示例：

function logclass(target: function) {
  console.log("装饰器已被调用")
  console.log("类:", target);
}

@logclass // @logclass是一个装饰器
class myclass {
  constructor() {
    console.log("myclass的一个实例已被创建");
  }
}

const myinstance = new myclass();

执行上述代码的结果如下所示：

输出：

装饰器已被调用
类: [class myclass]
myclass的一个实例已被创建

函数logclass()接受一个名为target的单个参数，其类型为function。参数target的类型为function，因为它将接收我们要装饰的类的构造函数。

要将logclass()用作装饰器来装饰名为myclass的类，我们将@logclass放在myclass的声明之前。装饰器的名称必须与要用于装饰元素的函数的名称相同。

当创建myclass的一个实例时，装饰器的行为将与类构造函数一起执行，如输出所示。

装饰器目前在typescript中作为实验性功能可用。因此，要在typescript中使用装饰器，您需要在tsconfig.json文件的编译器选项中启用experimentaldecorators。

为此，在您的typescript项目文件夹中执行以下命令以生成tsconfig.json文件：

tsc --init

生成tsconfig.json文件后，打开它并取消对experimentaldecorators的注释，如下所示：

此外，请将您的javascript目标版本设置为至少es2015。

typescript装饰器的重要性

好的代码可以通过代码的可读性、可重用性和可维护性来确定。可读性强的代码是容易理解和解释的代码，并清晰地向阅读代码的人传达开发人员的意图。

另一方面，可重用的代码允许将特定的组件（如函数和类）重新用于应用程序的其他部分或全新的应用程序中，而无需进行大量修改。

可维护的代码可以在其生命周期内轻松修改、更新和修复。

typescript装饰器允许您实现代码的可读性、可重用性和可维护性。首先，typescript装饰器允许您使用更易于阅读的声明性语法来增强代码的行为。您可以在装饰器中封装逻辑，并通过为代码的不同元素添加装饰器来调用它们。

这使得您的代码易于阅读，并且容易理解正在发生的事情。装饰器清楚地传达了开发人员的意图。

装饰器不是一次性的元素；它们是可重用的。您可以创建一次装饰器，并在多个区域的多个位置多次使用。

因此，您可以定义装饰器，导入它们，并在代码中的任何位置使用它们来修改代码的行为。这是有益的，因为它可以避免在代码库中重复逻辑，从而增强代码的可重用性。

装饰器还为您的代码提供了极大的灵活性和模块化，允许您将不同功能分离为独立的组件。这与它们允许编写可读和可重用代码的事实相结合，意味着typescript装饰器将使您能够拥有易于维护的代码。

typescript装饰器的类型

如前所述，typescript装饰器可以附加到类、类属性、类方法、类访问器和类方法参数。从我们可以装饰的元素中，我们可以得到不同类型的typescript装饰器。这些装饰器包括：

#1. 类装饰器

类装饰器是用于观察、修改或替换类定义的装饰器。它在所装饰的类之前声明。类装饰器应用于所装饰的类的构造函数。在运行时，类装饰器将以所装饰的类的构造函数作为其唯一参数调用。

下面是一个用于防止类被扩展的类装饰器的示例：

function logdecorator(target: any, methodname: string, descriptor: propertydescriptor) {
  const originalmethod = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`calling method: ${methodname}`);
    const result = originalmethod.apply(this, args);
    console.log(`method ${methodname} returned: ${result}`);
    return result;
  }
  return descriptor;
}

class vehicle {
  wheels: number = 4;

  @logdecorator
  drive() {
    console.log("the vehicle is driving");
  }
}

the output of running the code is shown below:

calling method: drive
the vehicle is driving
method drive returned: undefined

#4. parameter decorator

a parameter decorator, declared just before a parameter declaration, is a decorator that is used to observe, modify, or replace a parameter declaration. it takes in three arguments, the constructor function of the class in case the member is static or the prototype of the class in case it is an instance member.

the second argument is the name of the member and, finally, the ordinal index of the parameter in the function’s parameter list.

parameter decorators can be used to perform some action before or after a method is called. they can also be used to validate the input provided to a method.

an example of a parameter decorator is shown below:

function required(target: any, methodname: string, parameterindex: number) {
  console.log(`parameter ${parameterindex + 1} for method ${methodname} is required`);
}

class vehicle {
  wheels: number = 4;

  drive(@required speed: number) {
    console.log(`driving at speed: ${speed}`);
  }
}

the output of running the code is shown below:

parameter 1 for method drive is required

const logparameter =(target: any, methodname: string, parameterindex: number) => {
  console.log(`method: ${methodname}, parameter: ${parameterindex}`)
}

class vehicle {
  constructor() {
    console.log("a vehicle has been created")
  }
  updatemileage(@logparameter newmileage: number): void {
    console.log("mileage updated");
  }
}

output:

method: updatemileage, parameter: 0

parameter decorators can also be used to modify the behavior of the method or getter/setter. however, caution should be exercised when using parameter decorators, as they can affect the overall functionality of the method.

#6. decorator factories

decorator factories are functions that return the actual decorator function. they are useful when you need to pass arguments to a decorator at runtime. the decorator factory function takes in the arguments and returns the decorator function.

an example of a decorator factory is shown below:

const logmessage =(message: string) => {
  return (target: any, methodname: string, descriptor: propertydescriptor) => {
    console.log(`${message}: ${methodname}`)
    console.log(descriptor);
  }
}

class vehicle {
  constructor() {
    console.log("a vehicle has been created")
  }
  @logmessage("calling")
  startengine(): void {
    console.log("engine started");
  }
}

output:

calling: startengine
{
  value: [function: startengine],
  writable: true,
  enumerable: false,
  configurable: true
}

decorator factories allow for dynamic behavior based on runtime values, allowing decorators to be more flexible and reusable.

conclusion

decorators are a powerful feature in typescript that allow for the modification or observation of class declarations and members. they provide a clean and easy way to add functionality to classes without modifying their source code. decorators can be used to implement cross-cutting concerns such as logging, caching, and access control, making code more modular and maintainable.

const passengerlog = (target: object, propertykey: string, parameterindex: number) => {
console.log(`装饰器在${propertykey}的参数索引${parameterindex}上`);
}

class vehicle {
private wheels: number = 4;
constructor() {
console.log(“已创建一个车辆”);
}
pickpassenger( location: string, numpassengers: string, @passengerlog driver: string) {
console.log(`${numpassengers}个乘客被${driver}在${location}上车`);
}
droppassenger(driver: string, @passengerlog location: string, numpassengers: string) {
console.log(`${numpassengers}个乘客被${driver}在${location}下车`);
}
}

输出：

装饰器在pickpassenger的参数索引2上
装饰器在droppassenger的参数索引1上

结论

typescript装饰器在提高代码可读性和帮助编写模块化、可重用的代码方面发挥了重要作用，可以一次声明装饰器并多次使用。此外，装饰器有助于代码的整体可维护性。

尽管装饰器仍然是一个实验性特性，但它们非常有用，你应该考虑熟悉它们。

您还可以阅读如何在typescript中将字符串转换为数字。