TypeScript のデコレータ

TypeScript のデコレーターは、メタデータを追加したり、クラス、メソッド、プロパティ、パラメーターの動作を変更したりできる強力な機能です。これらは、コンポーネントやサービスを強化するために Angular などのフレームワークでよく使用されます。初心者でも経験豊富な開発者でも、この記事では、TypeScript アプリケーションを強化するための独自のデコレーターを作成する手順を段階的に説明します。

前提条件

始める前に、以下のものがあることを確認してください:

• TypeScript の基本的な理解。
• tsconfig.json ファイルで ExperimentalDecorators オプションを有効にして構成された TypeScript:

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

デコレータとは何ですか?

デコレーターは、クラス、メソッド、プロパティ、またはパラメーターに適用される関数です。記号 @ を先頭に付けると、デコレーターは、付加されている要素を変更または強化できます。その主な用途は次のとおりです:

• メタデータの追加: クラスまたはプロパティに関する追加情報を提供するのに役立ちます。
• 動作の変更: メソッドまたはクラスの操作を動的に変更できます。
• 依存関係の挿入: モジュラー アーキテクチャで実用的です。

コンポーネントデコレータの作成

ステップ 1: デコレータを定義する

componentName プロパティをクラスに追加するデコレーターを作成します。

function Component(name: string) {
    return function (constructor: Function) {
        constructor.prototype.componentName = name;
    };
}

説明:

このデコレータは名前文字列を受け取り、それをクラス プロトタイプのプロパティとして追加します。このクラスのすべてのインスタンスは、このプロパティにアクセスできます。

ステップ 2: デコレータを適用する

デコレータをクラスに適用してみましょう。

@Component('MonComposant')
class MonComposant {
    constructor() {
        console.log(`Le nom du composant est : ${this.componentName}`);
    }
}

ステップ 3: デコレータをテストする

クラスのインスタンスを作成して、その動作を確認してみましょう。

const composant = new MonComposant(); 
// Affiche : Le nom du composant est : MonComposant

入力デコレータの作成

ステップ 1: 入力デコレーターを定義する

このデコレータはプロパティへの変更を監視し、ログに記録します。

function Input() {
    return function (target: any, propertyKey: string) {
        let value: any;

        const getter = () => {
            return value;
        };

        const setter = (newValue: any) => {
            console.log(`La valeur de ${propertyKey} a été mise à jour : ${newValue}`);
            value = newValue;
        };

        Object.defineProperty(target, propertyKey, {
            get: getter,
            set: setter,
            enumerable: true,
            configurable: true,
        });
    };
}

説明:

デコレーターは Object.defineProperty を使用して、プロパティへの変更をインターセプトします。これにより、変更ログなどのカスタム ロジックを追加できます。

ステップ 2: 入力デコレータを適用する

プロパティに適用してみましょう。

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

ステップ 3: 入力デコレーターをテストする

プロパティを変更して効果を確認します。

function Component(name: string) {
    return function (constructor: Function) {
        constructor.prototype.componentName = name;
    };
}

結論

TypeScript デコレーターは、クラスとプロパティに機能とメタデータを追加するためのエレガントかつ強力な方法を提供します。この記事を読むことで、次のことを学びました:

1. コンポーネント デコレーターを作成してクラスを強化します。
2. プロパティの変更を監視するために入力デコレータを実装します。

これらの簡単な例は、デコレーターがコードの読みやすさと保守性をどのように向上させることができるかを示しています。 TypeScript の公式ドキュメントをさらに詳しく調べて、Reflect.metadata でリフレクトされたメタデータを使用するなど、さらに高度なアプリケーションを見つけてください。

以上がTypeScript のデコレータの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。