<section><div><div><div><a><div><img></div><div>Node.js</div></a><a><div><img></div><div>React</div></a><a><div><img></div><div>TypeScript</div></a><a><div><img></div><div>tech</div></a></div><div><div><p data-line="0">先日チームメンバーのコードレビューをしていた際、<code>Awaited</code>を使ったコードを見つけました。<br>
個人的にはなんとなく最近追加されたTypeScriptの型ユーティリティだな〜くらいの認識で実務で使ったことがなかったので、せっかくの機会なので調べてみました。</p>
<h2 data-line="3">
<a aria-hidden="true"></a> ユーティリティ <code>Awaited<T></T></code>型とは？</h2>
<p data-line="5"><code>Awaited</code> は、TypeScript 4.5 で導入された型ユーティリティです。Promise の結果を型として抽出するのに役立ちます。つまり、Promise が解決されたときに返される値の型を取得するために使用できます。<br>
この型は再帰的に定義されており、Promise が多重にネストされている場合でも、最終的な解決された値の型を抽出できます。</p>
<h3 data-line="8">
<a aria-hidden="true"></a> TypeScript Documentationのサンプル</h3>
<p data-line="9">以下は、 TypeScript Documentationのサンプルコードの内容です</p>
<div><pre><code data-line="11">type A = Awaited<Promise<string>>;
=> type A = string

type B = Awaited<Promise<Promise>>;
=> type B = number
 
type C = Awaited>;
=> type C = number | boolean
</string></code></pre></div><p data-line="21"><span><iframe frameborder="0" scrolling="no"></iframe></span><a>https://www.typescriptlang.org/docs/handbook/utility-types.html#awaitedtype</a></p>
<h3 data-line="23">
<a aria-hidden="true"></a> 具体的な使用例</h3>
<p data-line="24">以下は、 <code>Awaited</code> 型の具体的な使用例です。</p>
<div><pre><code data-line="25">async function fetchHoge() {
  return "Hello, World!";
}

type Result = Awaited<ReturnType<typeof fetchHoge>>;
// Resultの型は `string` になります。
</typeof></code></pre></div><p data-line="34">この例では、fetchHohe 関数は Promise&lt;string&gt; を返しますが、<code>Awaited</code> 型を使用することで、その結果である string 型を得ることができます。</p>
<h2 data-line="36">
<a aria-hidden="true"></a> せっかくなので内部実装を見てみる</h2>
<p data-line="37"><code>Awaited</code>がどのように型定義されているかをせっかくなので詳しく見てみます。</p>
<p data-line="39"><span><iframe frameborder="0" scrolling="no"></iframe></span><a>https://github.com/microsoft/TypeScript/blob/2a8865e6ba95c9bdcdb9e2c9c08f10c5f5c75391/src/lib/es5.d.ts#L1542-L1550</a></p>
<div><pre><code data-line="41">type Awaited<T> = 
  T extends null | undefined    // ① T が null または undefined であれば、そのまま T を返す。
  ? T
  : T extends object & { then(onfulfilled: infer F, ...args: infer A): any }  // ② T が then メソッドを持つオブジェクト（Promise など）であるかを確認。
  ? F extends (value: infer V, ...args: A) => any    // ③ then メソッドの onfulfilled コールバックの型 F が、ある値 V を引数に取るか確認。
    ? Awaited   // ④ V に対して再帰的に Awaited を適用し、最終的な型を得る。
    : never  // ⑤ もし V が推論できない場合、never 型を返す。
  : T;   // ⑥ T が Promise でも then メソッドを持つオブジェクトでもない場合、そのまま T を返す。
</T></code></pre></div><p data-line="52">次のようなプロセスで <code>Awaited</code> 型を決定しているようです</p>
<ol data-line="53">
<li data-line="53">null または undefined のチェック:<br>
T に null や undefined が与えられた場合はそれらをそのまま型として返しています。</li>
<li data-line="55">Promise かどうかのチェック:<br>
T がオブジェクトであり、かつ then メソッドを持っているかどうかを確認し Promise のような構造をしているかを確認しています</li>
<li data-line="57">then メソッドの型をチェック:<br>
then メソッドの最初の引数が関数であり、その関数が特定の値（V）を引数に取るかを確認しています</li>
<li data-line="59">再帰的な適用:<br>
上記で推論されたVに対して再帰的にAwaited型を適用し、最終的に解決された型を返します。これによってPromise&lt;Promise&lt;number&gt;&gt; のような多重ネストされた場合でも最終的な解決済みの型を取得できます。</li>
<li data-line="61">推論できない場合<br>
もし V の型を推論できない場合はneverとしています。コールバックの型が適切でない場合のエラーハンドリング的な意味合いに見えます。</li>
<li data-line="63">最終的な型の決定:<br>
最後に、T が Promise でない場合はそのまま T を返しています。</li>
</ol>
<p data-line="66">あまり自分で型パズルのようなものを作ることがないので非常に勉強になりましたし、<code>Awaited</code>についても理解を深めることができました。</p>
<h2 data-line="68">
<a aria-hidden="true"></a> 実務的な使用例を考えてみる</h2>
<p data-line="69">実務では前もってPromiseの返り値の型定義は事前にされていることが多いので、あまり<code>Awaited</code>の出番はないと感じています。どういった場合に使いどきがありそうかいくつか考えてみました。</p>
<h3 data-line="71">
<a aria-hidden="true"></a> 例1) APIコールが行われている関数の返り値の推論</h3>
<p data-line="72">API コールがある場合の関数などで、そのような関数の結果を引数としてとるような関数を使う場合に<code>Awaited</code>はうまく活用できそうですし、普段の利用イメージも持てました。</p>
<div><pre><code data-line="74">async function fetchUser(): Promise<{ id: number; name: string }> {
  return { id: 1, name: "Funteractive User" };
}

async function fetchHoge(userId: number): Promise<{ fuga: number; }[]> {
  return [{ fuga: 101 }];
}

async function getUserData() {
  const user = await fetchUser();
  const hoge = await fetchHoge(user.id);

  return { user, hoge };
}

// userData の型は { user: { id: number; name: string }, hoge: { fuga: number } } になります
async function doSomethingUser(userData: Awaited<ReturnType<typeof getUserData>>) {
    return "do something by Userdata";
}

</typeof></code></pre></div><h3 data-line="97">
<a aria-hidden="true"></a> 例2)Reactで非同期操作を扱うhooksの作成</h3>
<p data-line="98">カスタムフックが非同期データを返す場合、Awaited を使用してフックの返り値の型を安全に定義することがでそうです。<br>
例えば小さなアプリケーションでReactQueryやSWRなどのライブラリをいれるまでもない場合などは、以下のように型安全にデータfetchを扱うユーティリティhooksを作るといい感じに使えそうです。</p>
<div><pre><code data-line="101">function useFetchData<T>(fetchFunction: () => Promise</T>): { data: Awaited<T> | null; error: Error | null; isLoading: boolean } {
  const [data, setData] = React.useState<Awaited</T> | null>(null);
  const [error, setError] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(false);

  React.useEffect(() => {
    setIsLoading(true);
    fetchFunction()
      .then(result => {
        setData(result);
        setError(null);
      })
      .catch(err => {
        setError(err instanceof Error ? err : new Error(String(err)));
        setData(null);
      })
      .finally(() => {
        setIsLoading(false);
      });
  }, [fetchFunction]);

  return { data, error, isLoading };
}

// 使用例
async function fetchHoge(): Promise<{ id: number; name: string; }> {
  return { id: 1, name: "AAA" };
}

const { data: hoge, error, isLoading } = useFetchData(fetchHoge);
// hoge の型は { id: number; name: string; } | null になります

if (isLoading) {
  console.log("Loading...");
} else if (error) {
  console.error("Failed:", error);
} else if (hoge) {
  console.log("fetched:", hoge);
}
</code></pre></div><h3 data-line="143">
<a aria-hidden="true"></a> 例3) 型安全なデータ取得のハンドリング</h3>
<p data-line="144">非同期関数の実行結果をエラーハンドリングしやすい形式にまとめるためのユーティリティ関数を作ってみます。safeFetch関数は、非同期処理の成功時と失敗時の両方に対応し、エラーが発生しても例外をスローせずに結果を一つのオブジェクトにまとめて返すため、使い勝手が良くなりそうです。</p>
<div><pre><code data-line="146">type Result<T> = { data: Awaited<T> | null; error: Error | null };

async function safeFetch</T>(asyncFunction: () => Promise<T>): Promise<Result</T>> {
  try {
    const data = await asyncFunction();
    return { data, error: null };
  } catch (error) {
    const err = error instanceof Error ? error : new Error(String(error));
    return { data: null, error: err };
  }
}

// 使用例
async function getHogeData(): Promise<Result<{ id: number; name: string; price: number }>> {
  return await safeFetch(fetchHoge);
}
// getHogeData の型は { data: { id: number; name: string; } | null; error: Error | null } になります
</T></code></pre></div><p data-line="166">まだまだありそうなので、もし思いついたものなどがあれば教えていただければ幸いです。</p>
<h2 data-line="168">
<a aria-hidden="true"></a> 余談</h2>
<p data-line="169">今回は<code>Awaited</code>ってなんだっけみたいな些細な疑問から、内部実装理解・活用イメージまで広げることができてよかったです。</p>
<p data-line="171">弊社のメンバーにも雑に聞いてみたところ、僕と同じく使ったことないメンバーやそもそも知らなかったメンバーもいるようだったので知見にもなってよかったです。</p>
<p data-line="173"><img></p>
</div></div><div><span></span><aside><header><a><img alt height="26" referrerPolicy="no-referrer" width="26"></a><div>ファンタラクティブテックブログ により固定</div></header><div><div><p>ユーザーファーストなサービスを伴に考えながらつくる、デザインとエンジニアリングの会社です。</p>
<ul>
<li><a>他の記事も読む</a></li>
<li><a>コーポレートサイト</a></li>
</ul>
<p>エンジニア積極採用中です！カジュアル面談もやってます。<br>
<a>採用情報</a></p>
</div></div></aside></div><span></span><div><div><a><img alt="ファンタラクティブテックブログ" height="80" referrerPolicy="no-referrer" width="80"></a><div><a>ファンタラクティブテックブログ</a><span><a>Publication</a></span></div><div><p><span>ユーザーファーストなサービスを伴に考えながらつくる、デザインとエンジニアリングの会社です。エンジニア積極採用中です！<a>hrmos.co/pages/funteractive/jobs</a></span></p><div><span></span><a aria-label="@funteractive_jp" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg width="27" height="28" viewBox="0 0 27 28" fill="none" aria-label="X(Twitter)"><g clip-path="url(#clip0_1_18)"><path d="M16.0687 11.7356L26.12 0H23.7382L15.0106 10.1899L8.03988 0H0L10.5411 15.4089L0 27.7155H2.38199L11.5985 16.9546L18.9601 27.7155H27L16.0681 11.7356H16.0687ZM12.8062 15.5447L11.7382 14.0103L3.24025 1.80106H6.89884L13.7568 11.6543L14.8248 13.1887L23.7393 25.9963H20.0807L12.8062 15.5452V15.5447Z" fill="currentColor"></path></g><defs><clipPath><rect width="27" height="27.7297" fill="white"></rect></clipPath></defs></svg></a></div></div></div></div></div></div><div><div></div></div></section>

Promiseの結果を型として抽出するため

非同期関数の実行をブロックするため

データベース接続を簡素化するため

型安全性を完全に排除するため

Tがオブジェクトであり、thenメソッドを持っているか

APIコールを行う関数の返り値を推論する場合

静的型チェックを無効にする場合

データベースのスキーマを定義する場合