Zenn
🦚

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

2021/05/15に公開
TypeScript
idea

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