0Pricing
TypeScript Academy · レッスン

Promise<T>とasync/awaitの型付け

Promise の形を理解し、async関数に型を付け、awaitした値を安全に扱います

「Promise<T>とasync/awaitの型付け」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。

はじめに

目標: Promise<T>ベースのコードを読み書きします。非同期関数に型を付け、awaitで値を待機し、エラーの型を維持します。

Promiseの基本

Promise<T>は、後で得られる値をラップします。値が解決されない場合はPromiseを使います。

function delay(ms: number): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, ms));
}

const p: Promise<void> = delay(100);

p.then(() => console.log("done"));

asyncの戻り値の型付け

async関数は常にPromise<U>を返します。関数本体はUを返し、TSが自動的にラップします。

async function fetchNumber(): Promise<number> {
  await delay(10);
  return 42; // inferred as Promise<number>
}

fetchNumber().then(n => console.log(n.toFixed(0)));

awaitの型付け

awaitはPromiseを展開して内部の型（ここではstring）を返すため、正しいIntelliSenseが得られます。

async function readUserName(id: number): Promise<string> {
  await delay(5);
  return `user-${id}`;
}

async function main(): Promise<void> {
  const name = await readUserName(7); // name: string
  console.log(name.toUpperCase());
}

main();

Promise.allの型付け

Promise.allはタプルの型と順序を保持します。各要素は内部の型まで自動的にawaitされます。

async function both() {
  const [n, s] = await Promise.all([
    fetchNumber(),
    readUserName(1),
  ]);
  console.log(n, s);
}

both();

エラーの型付け

catchではunknownを優先します。フィールドにアクセスする前に、instanceof Error（またはカスタムチェック）で型を絞り込みます。

async function safe() {
  try {
    await delay(1);
    throw new Error("boom");
  } catch (e: unknown) {
    if (e instanceof Error) {
      console.error("Handled:", e.message);
    } else {
      console.error("Unknown error", e);
    }
  }
}

safe();

非同期関数の戻り値の型の確認

簡単な確認: 型Uの値を返す非同期関数の戻り値の型は何でしょうか?

まとめ

まとめ: Promise<T>は後で得られる値をラップし、async関数はPromise<U>を返し、awaitは型を展開します。また、catch内のエラーは最初にunknownとして扱います。

よくある質問

「Promise<T>とasync/awaitの型付け」レッスンは無料ですか？

はい。「Promise<T>とasync/awaitの型付け」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。

「Promise<T>とasync/awaitの型付け」で何を学びますか？

Promise の形を理解し、async関数に型を付け、awaitした値を安全に扱います ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。

「Promise<T>とasync/awaitの型付け」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Promise とasync/awaitの型付け
  2. エラーの型付け（unknown）、catchでの絞り込み
  3. 並行処理パターン（all/settled/race）の型
← TypeScript Academyに戻る