Practical Use of TypeScript Decorators in Front‑End Development

Many developers are familiar with TypeScript decorators and have used them in NestJS or other frameworks, but few realize the full potential of decorators on the front end. This article skips basic definitions and instead shows practical implementations of decorators to solve real‑world UI requirements.

1. Class Decorator

Even if you dislike object‑oriented programming in the front end, you can still use class decorators to attach metadata to a class. For example, the Label decorator stores a label on the class, which can later be retrieved via Reflect.getMetadata .

function Label(label: string) {
  return (target: any) => {
    Reflect.set(target, "label", label);
  };
}
@Label("用户")
class User {}

By using Reflect.getMetadata('label', User) you can obtain the stored label without hard‑coding strings throughout the codebase.

To avoid cluttering a class with many @ decorators, a single ClassConfig decorator can store a configuration object:

interface IClassConfig {
  label?: string;
  tableEmptyText?: string;
  tableDeleteTips?: string;
}
function ClassConfig(config: IClassConfig) {
  return (target: any) => {
    Reflect.set(target, "config", config);
  };
}
@ClassConfig({
  label: "用户",
  tableEmptyText: "用户们都跑光啦",
  tableDeleteTips: "你确定要删除这个牛逼的人物吗？"
})
class User {}

The configuration can be retrieved with Reflect.getMetadata('config', User) and used by components such as a <Table :model="User" :list="list" /> to automatically display the appropriate empty‑state text.

2. Property Decorator

Property decorators allow you to attach metadata to individual fields. For instance, you can define a @Field decorator that stores a label and validation rules, and then use @Form or @Table decorators to describe how the field should behave in a form or table.

class User {
  @Field({ label: "账号", isEmail: true })
  @Form({ isEmail: true, isRequired: true, placeholder: "请输入你牛逼的邮箱账号" })
  @Table({ isEmail: true, width: 200, isMask: true })
  account!: string;
}

The corresponding decorator implementations store the configuration on the prototype using Reflect.set , and you can retrieve it later with Reflect.get(User.prototype, "account") .

3. Method and Parameter Decorators

3.1 Method Decorator

Method decorators are a natural fit for Aspect‑Oriented Programming (AOP). By wrapping a method with a decorator, you can add pre‑ or post‑logic without modifying the original method body. The example below shows an @AdminRequired decorator that checks permissions before executing the method.

class User {
  @AdminRequired
  add(name: string) {
    console.log("user " + name + " added!");
  }
}
function AdminRequired(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    if (/* your condition */) {
      return originalMethod.apply(this, args);
    }
    throw new Error("没有权限");
  };
}

This approach keeps the original business logic untouched while adding security checks in a clean, reusable way.

3.2 Parameter Decorator

Parameter decorators are less common on the front end but are widely used in NestJS. The article mentions them briefly and suggests they can be explored in future posts.

4. Summary

Decorators provide a powerful syntax for building more modular and maintainable front‑end code. By attaching metadata to classes, properties, and methods, you can drive component behavior, validation, and access control without scattering magic strings or invasive logic throughout your codebase.

For further reading, see the related articles in the series such as “Using TypeScript and Decorators for Data Masking”, “Enum‑Based Dictionary with Decorators”, and “Replacing JSON Config with Decorators for Forms”.