TypeScriptで動的な `this`値のタイプを定義するにはどうすればよいですか？

debugcn 投稿 Dev

気候

たとえば、このコードを考えると：

async function forEachAsync<T>(
    iterable: T[],
    callback: (this: typeof context, currentValue: T, index: number, array: typeof iterable) => void | Promise<void>,
    context?: any
){
  const { length } = iterable;
  for (let i = 0; i < length; i++){
    await callback.call(context, iterable[i], i, iterable);
  }
}

thisコールバック関数のタイプは常にでanyあるため、そのプロパティのチェックは実行されません。たとえば、以下のコードは.charAtプロパティの型チェックに失敗するはずですが、型がany次の理由で失敗するはずです。

forEachAsync([1, 2, 3], function(){
  console.log(this.charAt);  // Should fail type check but couldn't
}, window);

型チェックをthis可能にするために、私は以下を試しました：

async function forEachAsync<T, C = any>(
    iterable: T[],
    callback: (this: typeof context, currentValue: T, index: number, array: typeof iterable) => void | Promise<void>,
    context?: C
){
  const { length } = iterable;
  for (let i = 0; i < length; i++){
    await callback.call(context, iterable[i], i, iterable);
  }
}

これで、関数を呼び出すと、型の検証が機能します。ただし、別のエラーが発生します。

forEachAsync([1, 2, 3], function(){
  console.log(this.charAt);
  // Error: Object is possibly undefined.
  // [expected] Error: Property 'charAt' does not exist on type 'Window & typeof globalThis'
}, window);

質問

どのように私は適切に型を定義することができますcontextし、this維持しながら、同じようにcontextオプションのパラメータを？

アレクセイL.

オーバーロードを使用できます。1つは使用しcontext、もう1つは使用しません。

async function forEachAsync<T>(
    iterable: T[],
    callback: (this: Window, currentValue: T, index: number, array: typeof iterable) => void | Promise<void>,
): Promise<void>
async function forEachAsync<T, C>(
    iterable: T[],
    callback: (this: C, currentValue: T, index: number, array: typeof iterable) => void | Promise<void>,
    context: C
): Promise<void>
async function forEachAsync<T, C>(
    iterable: T[],
    callback: (currentValue: T, index: number, array: typeof iterable) => void | Promise<void>,
    context?: C
): Promise<void>
{
  const { length } = iterable;
  for (let i = 0; i < length; i++){
    await callback.call(context, iterable[i], i, iterable);
  }
}

forEachAsync([1, 2, 3], function(){
  console.log(this.charAt); // Property 'charAt' does not exist on type 'Window & typeof globalThis'
}, window);

遊び場

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]