PromiseオブジェクトとGenerics構文

はじめに

初めまして。プログラミング勉強中のチョコ柿と申します。
今回は、TypeScriptを使って開発をしているときに、PromiseオブジェクトとGenerics構文の組み合わせを書いてみて、色々勉強になったので記事にします。

何か間違っていることがあればコメントでご教示いただけると嬉しいです！！

Generics構文とPromiseオブジェクト

早速コードを記載します。

type FetchData = {
  adult: boolean;
  backdrop_path: string;
 // 長いので省略
};
const fetchInformations = async (): Promise<FetchData[]> => {
  const response = await fetch(
    "https:XXX"
  );
  const data: FetchData[] = await response.json(); // dataに型をつけて配列にする。
  return data;
};

これはAPIからfetchする時のコードです。
（fetch元のURLはKeyも混じっているので隠してます)

今回話をしたいのはここの部分です。
async (): Promise<FetchData[]>
非同期処理のasyncに型をつけています。ただGenerics構文でもなかなかみたことない形で、最初は戸惑いました。

結論としてはasyncで返ってくるPromiseにGenericsで型をつけているという形です。

そもそもasyncは非同期処理でPromiseを常に返します。そしてPromiseは成功していようが失敗していようが非同期処理の結果を返すメソッドです。

よってそのメソッドであるPromiseにGenericsで型を付与しているというわけです。
そしてこのPromiseには事前に型定義がされています。

interface Promise<T> {
    /**
     * Attaches a callback that is invoked when the Promise is settled (fulfilled or rejected). The
     * resolved value cannot be modified from the callback.
     * @param onfinally The callback to execute when the Promise is settled (fulfilled or rejected).
     * @returns A Promise for the completion of the callback.
     */
    finally(onfinally?: (() => void) | undefined | null): Promise<T>;
}

ご自身の環境がある方はF12でコードジャンプしてみてください。
ここでPromiseのgenericsが定義されているので、Promise<FetchData[]>のようにgenerics構文の形で宣言できるといったわけです。

終わりに

いかがでしたでしょうか？
皆様の何かの学びになれば幸いです！！
ここまで読んでいただきありがとうございましたmm