callback-this-type

コールバックの API に this が含まれる場合は、型を指定します

概要

ライブラリが特定の this コンテキストでユーザー提供のコールバックを呼び出す場合、そのコンテキストは API の一部です。TypeScript では、実際の引数ではありませんが、関数の最初のパラメーターとして this の型を指定できます。これにより、期待されるコンテキストをドキュメント化し、適用できます。

このスキルを使う場面

• コールバックで this を使用する
• API が this コンテキストを提供する
• イベントハンドラーに型を付ける
• ライブラリがコールバック内の this を設定する
• コールバックのコンテキストをドキュメント化する

絶対ルール

コールバック API の一部である場合は、最初のパラメーターとして this の型を指定します。これにより、期待されるコンテキストがドキュメント化され、オートコンプリートが有効になります。

例

// BAD: this is untyped
interface EventEmitter {
  on(event: string, handler: (data: any) => void): void;
}

// User doesn't know what 'this' is:
emitter.on('click', function(data) {
  this.something; // What properties does this have?
});

// GOOD: this is typed
interface EventEmitter {
  on(
    event: string,
    handler: (this: EventContext, data: any) => void
  ): void;
}

interface EventContext {
  target: Element;
  timestamp: number;
  preventDefault(): void;
}

// User now gets autocompletion for 'this'
emitter.on('click', function(data) {
  this.target; // Autocomplete works!
  this.timestamp; // Typed as number
});

参考資料

• Dan Vanderkam 著『Effective TypeScript』第 2 版
• 項目 69：コールバックの API に this が含まれる場合は、型を指定します