TypeScript：非同期処理と型

出力 == 84

async function getValue(): Promise { return 42; } と書く。main を作って await する。

async function getValue(): Promise<number> {
  return 42;
}

async function main() {
  const value = await getValue();
  console.log(value * 2);
}

main();

戻り値の型は Promise<number>。中身が number でも、async を付けた時点で Promise に包まれる。

解答 == B

Promise は掛け算できるか。

B

JS15で最も悩まされた落とし穴が、ここで解決する。JavaScriptなら [object Promise] が表示されて初めて気づいたが、TypeScriptは書いた時点で止めてくれる。

出力 == こんにちは、田中さん

戻り値の型は Promise。

async function getName(): Promise<string> {
  return "田中";
}

async function main() {
  const name = await getName();
  console.log(`こんにちは、${name}さん`);
}

main();

await した結果は string として扱える。テンプレートリテラルに埋め込んでも安全。

async function getCount(): ____<number> {
  return 10;
}

async function main() {
  console.log(await getCount());
}

main();

出力 == 10

非同期の結果を包む型。先頭大文字で7文字。

Promise

async を付けたら戻り値は必ず Promise で包む。: number と書くとエラーになる。

解答 == B

何が投げられるか分からない。

B

JavaScriptでは Error 以外も throw できるので、TypeScriptは unknown として扱う。e.message と書く前に確認が必要（TS09）。

出力 == 42 / 田中

const [n, s] = await Promise.all([getNum(), getName()]); と書く。それぞれの型が保たれる。

async function getNum(): Promise<number> {
  return 42;
}

async function getName(): Promise<string> {
  return "田中";
}

async function main() {
  const [num, name] = await Promise.all([getNum(), getName()]);
  console.log(`${num} / ${name}`);
}

main();

Promise.all は要素ごとの型を保つ。num は number、name は string として正しく推論される。

async function main() {
  try {
    throw new Error("失敗しました");
  } catch (e) {
    console.log(e ____ Error ? e.message : "不明");
  }
}

main();

出力 == 失敗しました

「このクラスのインスタンスか」を判定する演算子。10文字。

instanceof

unknown のままでは message にアクセスできない。instanceof で Error だと確認して初めて、そのプロパティが使える。

解答 == B

宣言した型と返す値が一致しているか。

B

Promise の中身の型もチェックされる。「数値を返す」と宣言したのに文字列を返せば、その場でエラーになる。

出力 == ノートPC：128,000円

戻り値の型は Promise のように、型を定義してから使う。

type Product = { name: string; price: number };

async function fetchProduct(): Promise<Product> {
  return { name: "ノートPC", price: 128000 };
}

async function main() {
  const p = await fetchProduct();
  console.log(`${p.name}：${p.price.toLocaleString()}円`);
}

main();

await した結果は Product として扱える。p.nmae のような打ち間違いも、その場で検出される。

出力2行。42 / あ

async function wrap(value: T): Promise { return value; } と書く。

async function wrap<T>(value: T): Promise<T> {
  return value;
}

async function main() {
  console.log(await wrap(42));
  console.log(await wrap("あ"));
}

main();

ジェネリクスと非同期の組み合わせ。入れた型がそのまま出てくるので、any を使わずに汎用的な非同期処理が書ける。

出力2行が完全一致

戻り値の型は Promise。null チェックが必要になる。

type Product = { name: string; price: number };

async function fetchProduct(id: number): Promise<Product | null> {
  return id === 1 ? { name: "ノートPC", price: 128000 } : null;
}

async function main() {
  for (const id of [1, 99]) {
    const p = await fetchProduct(id);
    console.log(
      p ? `${p.name}：${p.price.toLocaleString()}円` : "該当なし"
    );
  }
}

main();

Promise<Product | null> で「見つからない可能性」を型で表現している。呼び出し側は null チェックを迫られるので、確認漏れが起きない。

出力 == ノートPC：在庫5個

Promise.all の結果を分割代入で受け取る。型は [string, number] になる。

async function fetchName(): Promise<string> {
  return "ノートPC";
}

async function fetchStock(): Promise<number> {
  return 5;
}

async function main() {
  const [name, stock] = await Promise.all([fetchName(), fetchStock()]);
  console.log(`${name}：在庫${stock}個`);
}

main();

それぞれの型が正しく保たれている。name は string、stock は number——順序を取り違えれば型エラーになる。

出力 == エラー：通信に失敗しました

catch (e) の e は unknown。instanceof Error で確認する。

async function fetchData(): Promise<string> {
  throw new Error("通信に失敗しました");
}

async function main() {
  try {
    await fetchData();
  } catch (e) {
    const message = e instanceof Error ? e.message : "不明なエラー";
    console.log(`エラー：${message}`);
  }
}

main();

e は unknown なので、そのまま message にアクセスできない。TS09の型ガードが、エラー処理の場面でも必要になる。

出力2行が完全一致

型は Promise<{ ok: true; data: T } | { ok: false; error: string }>。try/catch で包む。

type Result<T> =
  | { ok: true; data: T }
  | { ok: false; error: string };

async function safe<T>(promise: Promise<T>): Promise<Result<T>> {
  try {
    return { ok: true, data: await promise };
  } catch (e) {
    return {
      ok: false,
      error: e instanceof Error ? e.message : "不明なエラー",
    };
  }
}

async function main() {
  const a = await safe(Promise.resolve(42));
  console.log(a.ok ? `成功：${a.data}` : `失敗：${a.error}`);

  const b = await safe(Promise.reject(new Error("通信エラー")));
  console.log(b.ok ? `成功：${b.data}` : `失敗：${b.error}`);
}

main();

例外を「値」に変換している。try/catch を毎回書かずに、if (result.ok) で分岐できるようになる——TS09のタグ付きユニオンとTS10のジェネリクスの組み合わせ。

出力4行が完全一致

for...of の中で try/catch する。カウンタをループの外に用意する。

async function fetchName(id: number): Promise<string> {
  if (id === 2) {
    throw new Error("取得失敗");
  }
  return id === 1 ? "ノートPC" : "マウス";
}

async function main() {
  let ok = 0;
  let ng = 0;

  for (const id of [1, 2, 3]) {
    try {
      const name = await fetchName(id);
      console.log(`[${id}] ${name}`);
      ok++;
    } catch (e) {
      const message = e instanceof Error ? e.message : "不明";
      console.log(`[${id}] ${message}`);
      ng++;
    }
  }

  console.log(`成功${ok}件 / 失敗${ng}件`);
}

main();

try/catch をループの中に置くのが要点（JS15と同じ）。外に置くと最初の失敗で全体が止まる。