TypeScriptのデコレーター入門

TypeScriptのデコレーター入門

TypeScriptのデコレーターは、クラスやメソッドなどに特定の加工を実装するための機能です。これは、コードをシンプルにし、再利用性を高めるのに役立ちます。

この記事では、TypeScriptで使用可能な四種のデコレーターについて解説し、各タイプの簡単な例を提供します。

---

1. クラス・デコレーター

クラスに定義された時点で実行されるデコレーターです。例えば、ログを出力するような加工を追加したい場合に便利です。

function LogClass(constructor: Function) {
  console.log(`Class ${constructor.name} が作成されました。`);
}

@LogClass
class Example {
  constructor(public message: string) {
    console.log(this.message);
  }
}

// 実行結果
const example = new Example("Hello, Decorator!");

2. メソッド・デコレーター

メソッドの定義や実行を加工するためのデコレーターです。例えば、自動的にログを出力したり、判定を追加したりできます。

function LogMethod(
  target: any,
  propertyKey: string,
  descriptor: PropertyDescriptor
) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyKey} が呼び出されました。`);
    return originalMethod.apply(this, args);
  };
}

class Example {
  @LogMethod
  sayHello(name: string) {
    console.log(`Hello, ${name}!`);
  }
}

// 実行結果
const example = new Example();
example.sayHello("World");

3. プロパティ・デコレーター

プロパティに加工を追加したい場合に使用します。たとえば、特定のプロパティにバリデーションを追加することが可能です。

function LogProperty(target: any, propertyKey: string) {
  console.log(`Property ${propertyKey} が定義されました。`);
}

class Example {
  @LogProperty
  message: string;

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

// 実行結果
const example = new Example("Hello, Decorator!");

4. パラメータ・デコレーター

メソッドの参数に加工を追加したい場合に使用されます。

function LogParameter(
  target: any,
  propertyKey: string,
  parameterIndex: number
) {
  console.log(`Parameter at index ${parameterIndex} がメソッド ${propertyKey} で定義されました。`);
}

class Example {
  sayHello(@LogParameter name: string) {
    console.log(`Hello, ${name}!`);
  }
}

// 実行結果
const example = new Example();
example.sayHello("World");

---

これで、TypeScriptのデコレーターの基本的な使い方を理解できました。デコレーターは、ユーザー定義の函数やプロパティバリデーションを加えるのに最適です。