TypeScriptのinferは、型を簡単に推論するための便利な仕組みです。
この記事では、inferの使い方を簡単に紹介します。
型推論の基礎
TypeScriptは明示的な型注釈がない場合、以下のように型を推論をしてくれます。
let str = "Hello, World!"; // strは文字列
TypeScriptは自動的にstr型で推論します。
inferの使用方法
基本的な使用例
inferを使って型推論を行う基本的な例：
type GetType<T> = T extends infer S ? S : never;
type T1 = GetType<typeof str>; // string
この例では、inferキーワードを使ってTの型をSとして推論しています。
配列内の型を推論する
配列内の要素の型を抽出する方法を見てみましょう：
let arr = [1, 2, 3];
type GetTypeOfArrayElement<T> = T extends (infer S)[] ? S : never;
type T1 = GetTypeOfArrayElement<typeof arr>; // number
この方法で、配列内の要素の型を推論することができます。
Promiseの型を推論する
Promiseが返す値の型を特定する場合、inferが役立ちます：
let promise = Promise.resolve([1, 2, 3]); // Promise<number[]>
type GetTypeOfPromise<T> = T extends Promise<infer S> ? S : never;
type T1 = GetTypeOfPromise<typeof promise>; // number[]
TypeScriptには、これを支援するビルトインユーティリティ型Awaitedもあります：
type T4 = Awaited<typeof promise>; // number[]
関数の引数の型を推論する
関数の引数の型を取得するには、次のようにします：
type GetTypeOfFirstArgument<T> = T extends (arg: infer U, ...args: any[]) => any ? U : never;
type T1 = GetTypeOfFirstArgument<typeof document.getElementById>; // string
この方法で、関数の最初の引数の型を推論することができます。
Reactコンポーネントのプロップス型を推論する
ライブラリがコンポーネントのプロップスをエクスポートしていない場合でも、inferを使ってプロップス型を取得できます：
const OutsideComponent: React.FC<{ name: string }> = () => null;
type InferProps<T> = T extends React.FC<infer P> ? P : never;
type Props = InferProps<typeof OutsideComponent>;
この技術で、Reactコンポーネントのプロップス型を推論することができます。
最後に
今回はinferについて解説してみました！
inferを取り入れることで、コードを大幅に簡素化し、複雑な型操作をシンプルにし、開発の生産性を向上させることができます。
この仕組みを活用して、TypeScriptの型推論の真の可能性を引き出しましょう!