🦚

TypeScript 学習記録 #7(非同期処理の型定義(Promise))

commits3 min read

TypeScript 学習記録 #6 の続編。
今回のメインテーマ、「非同期処理の型定義について」

今回主に参考にした教材:

見返す用リスト(主に自分用)

TypeScript基礎学習を完走したので、いつでも見返すことの出来るようにリスト化しておく(5/17)

非同期処理の型定義

以下のことについて学んだ。

  • 非同期処理における型定義

Promise型(Promise<T>)

Promise型を用いることで、非同期処理の実行完了後の値を定義することが出来る。
Promise<string>のように定義して、関数の型定義の返り値のところに置く(合ってるか?)。
後で思ったが、Promiseではないのかもしれない?。Promiseという型に対して、ジェネリクスで型を割り当てている感じ?

実際の流れ

以下に「GitHub APIからユーザーデータを取得するような関数」のコードサンプルを記述する(詳しくは動画参照)。また、ここではasync/awaitを用いての非同期処理のコードを記述する。

以下のコードでは、fetchAPIを用いて非同期通信を行っているが、axiosを使えばもっと簡潔に記述できると思う。ただ、axios特有の型があるようなのでそこを学ぶ必要はあるかもしれない。

// APIを叩いた結果として返ってくる型を定義
type Profile = {
  login: string;
  id: number;
};

// 関数の型定義(呼び出しシグネチャの省略記法)
// 引数はナシで、返り値にPromise型を返すことを表している。ジェネリック型<T>で型を指定している感じ?
// 非同期処理の実行結果は`Promise<string>`のように定義することができる
type FetchProfile = () => Promise<Profile | null>;

// GitHub APIのユーザーデータを取得する用のエンドポイント
const url = "https://api.github.com/users/username";

// 実際のGitHub APIを叩く非同期関数
// 上で定義した`FetchProfile`型をアノテーションで指定する(この非同期関数は`Profile`型か`null`型のPromiseを返すということ)
const fetchProfile: FetchProfile = async () => {
  const response = await fetch(url)
      .then((res) => res)
      .catch((error) => {
        console.error(error);
        return null;
      });

  if (!response) return null;

  const json = await response.json()
    // レスポンスとして返ってきた`json`が確りと`Profile`型に沿っているかを確認
    .then((json: Profile) => json)
    .catch((error) => {
      console.error(error);
      return null;
    });

  if (!json) return null;

  return json;
};

// 呼び出す時(呼び出し側もasync関数である場合)
const response = await fetchProfile();
if (profile) console.log(profile); // → { login: "aiko", id: 1122 }

ここまでの感想

非同期処理の際に用いるPromise型について学んだ。上で書いたとおり、正確にはPromiseではないのかもしれない?
今後APIを叩いてなにかするということは、ほぼ必ずといっていいほどあると思われるので、今回学んだことが活きればいいなという思い。

今回でトラハックさんの「TypeScript入門講座」が完了した。
ほぼ1週間弱でやりきったが、相当TypeScriptの基礎文法の理解は深まったと思う。正直TS入門はこれ1つで十分な気もした。
ここで最低限を学んで、そこからは自分で手を動かしながら「あーでもないこーでもない」とやっていくのがよさそう。

ひとまずTS基礎はある程度理解できたので、あとはReact特有の型を学んだりして実践に入るとする。

今後の予定

  • 非同期処理について学ぶ → 済
  • ReactでのTypeScriptの型定義を学ぶ
  • Next.js×TypeScript×Tailwind×ESLint×Prettierの環境構築方法を学ぶ
  • じゃけぇさんのReact講座をTypeScriptで作り直す
GitHubで編集を提案

Discussion

ログインするとコメントできます