返回

TypeScript 装饰器使用指南:从入门到精通

前端

TypeScript 装饰器:深入浅出

装饰器是一种允许您在不改变类或方法本身的情况下向它们添加元数据或修改它们行为的强大工具。它们可以用于各种目的,例如添加元数据、验证、日志记录或性能优化。

在 TypeScript 中,装饰器使用 @ 符号来标记函数或类。装饰器函数本身接受一个类或方法作为参数,并返回一个修改后的类或方法。

装饰器类型

TypeScript 中有三种类型的装饰器:

  • 类装饰器:用于修改类的行为或添加元数据。
  • 属性装饰器:用于修改类属性的行为或添加元数据。
  • 方法装饰器:用于修改方法的行为或添加元数据。

应用装饰器

为了应用装饰器,只需在类、属性或方法前加上 @ 符号,然后跟上装饰器函数即可。例如,以下代码展示了一个类装饰器,用于在类实例化时输出一条日志消息:

function logClass(target: any) {
  console.log(`Class ${target.name} instantiated`);
}

@logClass
class MyClass {
  constructor() {
    console.log('MyClass constructor');
  }
}

const myClassInstance = new MyClass();

在 Express 中使用装饰器

Express 是一个流行的 Node.js Web 框架,允许您轻松构建 Web 应用程序。TypeScript 可以与 Express 一起使用,并利用装饰器来组织和简化代码。

Controller 装饰器

Controller 装饰器用于标记一个类为控制器。控制器负责处理 HTTP 请求并返回响应。例如,以下代码展示了一个简单的控制器,用于处理 /users 路由:

@Controller('/users')
class UserController {
  @Get('/')
  getAllUsers() {
    return 'All users';
  }

  @Get('/:id')
  getUserById(@Param('id') id: string) {
    return `User with ID ${id}`;
  }
}

在上面的代码中,@Controller 装饰器将 UserController 类标记为一个控制器,并指定其路由为 /users@Get 装饰器用于标记方法为 GET 请求处理程序,@Param 装饰器用于从请求中提取参数。

Service 装饰器

Service 装饰器用于标记一个类为服务。服务负责执行特定任务,例如数据访问或业务逻辑。例如,以下代码展示了一个简单的服务,用于获取所有用户:

@Service()
class UserService {
  getAllUsers() {
    return ['Alice', 'Bob', 'Charlie'];
  }
}

在上面的代码中,@Service 装饰器将 UserService 类标记为一个服务。

更多装饰器

除了类装饰器、属性装饰器和方法装饰器之外,TypeScript 中还有许多其他的装饰器,例如:

  • 参数装饰器:用于修改方法参数的行为或添加元数据。
  • 方法返回值装饰器:用于修改方法返回值的行为或添加元数据。
  • 访问器装饰器:用于修改访问器行为或添加元数据。

总结

装饰器是 TypeScript 中一种强大的工具,可以用于各种目的,例如添加元数据、验证、日志记录或性能优化。在 Express 中使用装饰器可以帮助您组织和简化代码,并提高开发效率。