不特定多数の非同期処理をtypescriptで行いたい

Question

タイトルの通りです。

以下のサイトを参考にJSと同じようにやろうとしたら怒られました。
https://msitter29.hatenablog.com/entry/2016/04/15/200058
上記サイトのコードを引用をさせていただきます。

// タイマー
function delay(data){
  
  var ret = new $.Deferred();

  setTimeout(function(){
    console.log('timeout: ' + data + ' / ' + new Date().getTime());
    // OK通知
    ret.resolve();
  }, 3000);

  return ret.promise();
}

// 実際の処理
(function(){
  
  var data = [1, 2, 3];
  var tasks = [];

  // タスクをつめる
  for(var i = 0; i < data.length; i++){
    tasks.push(delay(data[i]));
  }

  var when = $.when.apply($, tasks);
  when.then(function(){
    // 全部終わったらログ出す
    console.log('tasks finish.' + new Date().getTime());
  });
})();

大体こんなようなことをTypescriptで行いたいです。
よろしくおねがいします。

追記：失礼しました。以下のようなエラーでした。
「’new’キーワードで呼び出せるのはvoid関数のみです」
また、ご指摘のあったPromiseを使った処理も是非教えていただきたいです。

Answer 1

jQuery全くわからないのですが、使わずに書くと大体こんな感じでしょうか？
return ret.promise()してるので勝手にPromise返すと推測してますが、間違ってたら申し訳ない。

delay<T>のTは型を推測してくれる便利な物なのでgenerics typescriptでググりましょう。

function delay<T>(data: T) {
  return new Promise<void>((resolve) =>
    setTimeout(() => {
      console.log('timeout: ' + data + ' / ' + new Date().getTime());
      resolve();
    }, 3000)
  );
}

(async () => {
  const data = [1, 2, 3];
  const tasks = data.map(d => delay(d)); // これはPromise<void>[]になります。
  await Promise.all(tasks); // tasksを宣言せずに、Promise.all(data.map(d => delay(d)))でもOK
  console.log('tasks finish.' + new Date().getTime());
})();

Answer 2

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/513268bc3709933e27dc1a4a0fc1c98baad37000/types/jquery/misc.d.ts#L2326

Defferedはそもそも(型に従うなら)newで呼び出せません。
普通に

const ret = $.Deferred()

でやってみてください。

ちなみにPromise.{all | allSettled}ですが、

const fetches = [
  fetch('./page1.html'),
  fetch('./page2.html'),
  fetch('./page3.html'),
  fetch('./page4.html'),
  fetch('./page5.html'),
]

// 全ての fetch が Resolve したら Resolve する
await Promise.allSettled(fetched)

こんな感じで使え、fetchesの中の非同期処理群が全てsettleされた時(=fullfilled | rejectされた時)その結果群をオブジェクトとして返します。

詳しくはMDNをどうぞ

Answer 3

エラーコードがなく、また詳しい実装もないためのでなんとも言えませんが、そもそもdelayはPromiseを返すようになっていますでしょうか？

おそらくコンパイル時に怒られたのだろうなと思いますが、他の考えられる原因だと

• jQueryをimportしてない(ただjQueryはsample codeで使われているだけなのでこれは違う気がしますが)
• 型がanyに推論されている
• Object is possibly nullエラー

あたりかなとは思います。
二つ目のエラーはしっかり型も含めて変数宣言する(any宣言してもエラーは取れますがプログラマの責任が増え、可読性も下がり非推奨です)ことで解決できます。
三つ目のエラーはNon-Null-Assertion-Operatorで解決できます。

もしこれら以外のエラーであればエラーメッセージの追記をお願いします????‍♂️

また質問を見る限り、不特定多数の非同期処理を扱うのであれば、PromiseのallかallSettledを使った方が可読性、運用の面で楽かなとは思います。

参考