0Pricing
TypeScript Academy · レッスン

パラメーターデコレーターとメタデータ

reflect-metadataとパラメーターデコレーターを使います。

「パラメーターデコレーターとメタデータ」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。

概要

このレッスンでは、TypeScript のパラメーターデコレーターとメタデータを扱います。

導入

デコレーターは、メタデータの追加やクラスとそのメンバーの変更を行うための、Stage 3 の JavaScript 提案であり、TypeScript の実験的な機能です。

基本概念

デコレーターは、@ 構文を使ってクラス、メソッド、プロパティ、パラメーターに適用する関数です。
@sealed
class BugReport {
  type = 'report';
  title: string;
  constructor(t: string) { this.title = t; }
}

クラスデコレーター

クラスデコレーターはコンストラクター関数を受け取り、変更したバージョンを返すことができます。
function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

メソッドデコレーター

メソッドデコレーターは、ターゲット、プロパティ名、プロパティディスクリプターを受け取ります。
function log(target: any, key: string, desc: PropertyDescriptor) {
  const orig = desc.value;
  desc.value = function(...args: any[]) {
    console.log('Calling', key);
    return orig.apply(this, args);
  };
}

プロパティデコレーター

プロパティデコレーターは、ターゲットとプロパティキーを受け取ります。読み取りや書き込みを直接インターセプトすることはできません。
function readonly(target: any, key: string) {
  Object.defineProperty(target, key, { writable: false });
}

パラメーターデコレーター

パラメーターデコレーターは、ターゲット、メソッド名、パラメーターのインデックスを受け取ります。
function required(target: any, key: string, index: number) {
  const meta = Reflect.getMetadata('required', target, key) || [];
  meta.push(index);
  Reflect.defineMetadata('required', meta, target, key);
}

デコレーターファクトリ

デコレーターファクトリは、デコレーターを返す関数です。設定用のパラメーターを受け取ります。
function role(name: string) {
  return function(target: any, key: string) {
    Reflect.defineMetadata('role', name, target, key);
  };
}

class UserController {
  @role('admin')
  deleteUser() {}
}

NestJS のデコレーター

NestJS では、コントローラー、依存性注入、ルーティングにデコレーターが幅広く使われています。
@Controller('users')
class UsersController {
  constructor(private usersService: UsersService) {}

  @Get()
  findAll(): User[] {
    return this.usersService.findAll();
  }
}

reflect-metadata

デコレーターは、実行時にメタデータを保存・取得するため、reflect-metadata のポリフィルと組み合わせて使われることがよくあります。
import 'reflect-metadata';
// Enable in tsconfig: experimentalDecorators: true, emitDecoratorMetadata: true

デコレーターの適用順序

同じ宣言に複数のデコレーターを付けた場合、下から上の順に適用されます(最後に記述したものが最初に評価されます)。
@first
@second
class Example {}
// Applied: second first, then first

確認問題

デコレーターを使用するには、TypeScript のどの設定が必要ですか?

まとめ

デコレーターは @ 構文を使って、クラス、メソッド、プロパティ、パラメーターを変更します。tsconfig の experimentalDecorators で有効にでき、NestJS や Angular などのフレームワークで広く使われています。

よくある質問

「パラメーターデコレーターとメタデータ」レッスンは無料ですか?

はい。「パラメーターデコレーターとメタデータ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。

「パラメーターデコレーターとメタデータ」で何を学びますか?

reflect-metadataとパラメーターデコレーターを使います。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「パラメーターデコレーターとメタデータ」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか?

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. クラスデコレーター:動作のラップ
  2. メソッドデコレーターとプロパティデコレーター
  3. パラメーターデコレーターとメタデータ
  4. フレームワークのデコレーター:NestJSの例
← TypeScript Academyに戻る