TypeScriptで関数の型を再利用！ParametersとReturnTypeの使い方を初心者向けに徹底解説

TypeScriptの`Parameters<T>`と`ReturnType<T>`で関数の型情報を再利用する方法

先生と生徒の会話形式で理解しよう

生徒

「TypeScriptで、すでに作った関数の引数の型や、戻り値の型を別の場所で使い回したいときはどうすればいいですか？」

先生

「そんなときは、ParametersとReturnTypeという便利な機能を使います。これらを使うと、元の関数を書き換えても自動で型が更新されるので、修正漏れがなくなりますよ。」

生徒

「自動で更新されるのは便利そうですね！具体的にどうやって書くのか教えてください！」

先生

「もちろんです。プログラミングが初めての方でもわかるように、一つずつ丁寧に解説していきますね。」

1. TypeScriptの型再利用とは？

プログラミングの世界では、一度書いた命令を何度も使い回すことがよくあります。TypeScriptという言語では、プログラムが扱うデータの種類を「型（かた）」として定義しますが、この「型」も再利用することができます。

例えば、ある関数の設定を別の場所でも使いたい場合、手書きで同じ型を何度も書くのは大変です。書き間違えるかもしれませんし、元の関数の設定が変わったときに、すべての場所を修正しなければなりません。これは非常に効率が悪く、間違いの元になります。

そこで登場するのが、今回のテーマである「ユーティリティ型」と呼ばれる便利な機能です。これを使うことで、元の関数から自動的に「引数の型」や「戻り値の型」を抽出して、別の場所で利用することができるようになります。これをマスターすれば、開発の効率が劇的に上がります。

2. Parametersとは？引数の型を取り出す魔法

まずは Parameters<T> について学習しましょう。これは、一言で言うと「関数の引数（ひきすう）がどんな種類のものかを調べて、配列の形として取り出してくれるもの」です。

「引数」とは、関数という機械に投入する材料のようなものです。例えば、「名前」と「年齢」を受け取って挨拶を表示する関数があれば、「名前」と「年齢」が引数になります。Parameters を使うと、「この関数は文字列と数値を受け取りますよ」という情報を抜き取ることができます。

なぜこれが必要なのでしょうか。それは、大きなプログラムを作っていると、ある関数に渡すデータを、別の場所で準備することが多いからです。その準備する場所で、「この関数にはどんなデータを渡せばいいんだっけ？」と迷わないように、型を共有するのです。

3. ReturnTypeとは？戻り値の型を自動取得

次に ReturnType<T> です。これは「関数が処理を終えた後に返してくれる結果（戻り値）の型を取り出すもの」です。

「戻り値（もどりち）」とは、関数という機械が処理をした後に出てくる製品のようなものです。例えば、計算をして合計金額を出す関数なら、その「合計金額」が戻り値です。ReturnType を使うと、「この関数からは最終的に数値が返ってきます」という情報を型として取得できます。

関数の処理結果を別の変数に保存したり、さらに別の関数に渡したりするときに、この ReturnType があれば、手動で型を定義する必要がなくなります。元の関数の計算結果が「数値」から「文字列」に変わったとしても、ReturnType を使っていれば自動的に追随してくれるのです。

4. 実際にParametersを使ってみよう

それでは、具体的なプログラムの例を見てみましょう。ここでは、ユーザーの名前を登録する関数を想定して、その引数の型を再利用する方法を紹介します。


// ユーザーを登録する関数
function registerUser(name: string, age: number) {
    console.log("登録完了:", name, age);
}

// registerUser関数の引数の型を抽出する
// [string, number] という配列の型になります
type RegisterParams = Parameters<typeof registerUser>;

// 取り出した型を使って、データを準備する
const userData: RegisterParams = ["田中太郎", 25];

// 関数を実行する
registerUser(...userData);

このコードでは、typeof registerUser と書くことで、「registerUserという関数の設計図」を参照しています。それを Parameters に渡すことで、引数の型である文字列（string）と数値（number）をセットで取り出しています。このように、既存の関数から型を盗み出すような感覚で使えるのが特徴です。

5. 実際にReturnTypeを使ってみよう

次は ReturnType の実例です。商品の価格を計算して、消費税込みの金額を返す関数の戻り値を利用してみましょう。


// 商品の税込価格を計算する関数
function calculateTotal(price: number) {
    return price * 1.1;
}

// calculateTotal関数の戻り値（number）の型を取り出す
type TotalAmount = ReturnType<typeof calculateTotal>;

// 取り出した型を使って変数を作る
const finalPrice: TotalAmount = 1100;

console.log("最終支払額は", finalPrice, "円です。");

実行結果は以下のようになります。


最終支払額は 1100 円です。

もし将来的に calculateTotal 関数が、「1,100円」といった文字列を返すように変更されたとしても、TotalAmount という型は自動的に文字列型に切り替わります。これが自動化の素晴らしいところです。

6. なぜtypeofが必要なの？

コードの中に typeof という言葉が出てきましたね。これは初心者の方が最初につまずきやすいポイントです。TypeScriptには、「値（実際のデータ）」の世界と「型（データの種類）」の世界の2つがあります。

registerUser や calculateTotal は実際の「関数（値）」です。しかし、Parameters や ReturnType が欲しがっているのは「型」の情報です。そこで、typeof を使うことで、「この値が持っている型情報を教えて！」と変換をお願いしているのです。

これを忘れて Parameters<registerUser> と書くと、パソコンは「関数そのものを型として扱おうとしているよ！」と怒ってしまいます。必ず typeof を添えて、型情報として渡してあげましょう。

7. 複数の引数がある場合の取り扱い

引数が複数ある場合、Parameters はそれらを一つの「タプル（順番が決まっている配列）」として取り出します。例えば、1番目が文字列、2番目が数値、3番目が真偽値（Yes/No）といった具合です。特定の引数だけを取り出したいときは、配列の添え字（番号）を使って指定することも可能です。


// 複雑な設定を持つ関数
function setupServer(host: string, port: number, secure: boolean) {
    console.log(host, port, secure);
}

// 2番目の引数（port）の型だけをピンポイントで取得したい場合
// 配列の番号は0から始まるので、2番目は[1]になります
type PortType = Parameters<typeof setupServer>[1];

const myPort: PortType = 8080;
console.log("使用するポート番号は", myPort);

このように、配列のように番号を指定することで、必要な部分だけを抜き取ることができます。これも大規模な開発では非常によく使われるテクニックです。

8. Mapped Typesとの組み合わせでさらに便利に

さらに応用編として、「Mapped Types（マップドタイプス）」という機能についても少し触れておきましょう。これは、既存の型を元に、新しい型を大量生産する工場のような機能です。

例えば、ある関数の戻り値がたくさんの項目（名前、住所、電話番号など）を持っているオブジェクトだった場合、そのすべての項目を「読み取り専用（書き換え禁止）」に加工した新しい型を作ることができます。ReturnType で取り出した型を、Mapped Typesの工場に入れることで、安全性の高いプログラムが作れます。

今は「型を変換する便利な仕組みがあるんだな」くらいの理解で大丈夫です。まずは Parameters と ReturnType を使いこなせるようになることが、脱初心者の第一歩です。

9. 実践！非同期関数の型を取り出す

最近のプログラミングでは、「データの読み込み待ち」が発生する処理（非同期処理）が一般的です。これには Promise というものが使われます。ReturnType を使うと、この Promise の型もバッチリ取得できます。


// データを取得する関数（時間がかかる処理をシミュレート）
async function fetchData() {
    return { id: 1, message: "成功" };
}

// 戻り値の型を取得する
type FetchResult = ReturnType<typeof fetchData>;

// FetchResultは Promise<{ id: number, message: string }> になります
console.log("非同期関数の型も再利用可能です。");

複雑に見えるかもしれませんが、やっていることはこれまでの例と同じです。どんなに複雑な関数でも、TypeScriptがその中身を解析して、正確な型を教えてくれるのです。これがTypeScriptを使う最大のメリットの一つと言えます。

10. 型の再利用がもたらすメリット

最後に、なぜここまでして型を再利用するのか、その理由を整理しましょう。一番の理由は「一貫性」です。人間は必ずミスをします。一箇所を直したときに、別の場所を直し忘れるのはプログラミングで最も多いミスの原因です。

Parameters や ReturnType を使って「型を自動で計算させる」ようにしておけば、修正が必要な場所は最小限で済みます。これは、プログラムが大きくなればなるほど、命綱のようにあなたを助けてくれるはずです。

最初は難しく感じるかもしれませんが、自分でコードを書いて、わざと関数の引数を変えてみてください。すると、再利用している場所で自動的にエラーが出て、間違いを教えてくれることに感動するはずです。その積み重ねが、スキルアップに繋がります。

現役テックリードが直接指導【TypeScript設計実践セミナー】

TypeScript型安全設計・実践セミナー｜React/Next.js時代の堅牢なコード構築術

累計120万PV超の専門メディアが監修。商用フロントエンド開発の「設計の型」を最短習得。

「型」を味方にする。TypeScript基礎とモダン開発の第一歩。

本講座では、モダンフロントエンドの標準であるTypeScriptの真価を体験し、初心者が陥りがちな「型の迷子」を卒業して、堅牢なコードを書くための土台を築きます。単なる文法の解説ではなく、React等のフレームワークで必須となる型推論の活用や非同期処理（Async/Await）の本質を60分で濃縮体験します。