0Pricing
TypeScript Academy · レッスン

関数オーバーロードとcall signature

異なる呼び出し形式に対応するオーバーロードシグネチャを宣言し、柔軟なAPIのためにオブジェクト型内でcall signatureを使います

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

導入

目標：オーバーロードを使って、異なる入力を受け取り異なる出力を返す関数をモデル化します。また、コールバックのようなAPIのオブジェクト型で呼び出しシグネチャを表現する方法も学びます。

オーバーロードパターン

オーバーロードは複数のシグネチャと、入力を絞り込んで正しい型を返す1つの実装として宣言します。

// 1) Overload signatures (no body)
function parse(input: string): number;
function parse(input: number): string;
// 2) Single implementation compatible with all overloads
function parse(input: string | number): string | number {
  if (typeof input === "string") {
    return input.length; // string -> number
  } else {
    return String(input); // number -> string
  }
}

console.log(parse("TS"));   // 2 (number)
console.log(parse(123));    // "123" (string)

呼び出しシグネチャ

呼び出しシグネチャを使うと、オーバーロードを持つオブジェクト型を呼び出し可能にできます（プロパティ付きの呼び出し可能な関数を公開するライブラリに便利です）。

type Stringify = {
  (v: number): string;
  (v: boolean): string;
};

const toStr: Stringify = (v: number | boolean) => {
  return typeof v === "number" ? v.toFixed(1) : (v ? "true" : "false");
};

console.log(toStr(3));
console.log(toStr(false));

実装内での絞り込み

実装ではすべてのオーバーロードの形に対応する必要があります。inチェックや判別可能なユニオンを使って、安全に分岐してください。

function area(value: { r: number } | { w: number; h: number }): number {
  if ("r" in value) {
    return Math.PI * value.r ** 2; // circle
  }
  return value.w * value.h; // rect
}

console.log(area({ r: 2 }));
console.log(area({ w: 3, h: 4 }));

オーバーロードとユニオン

オーバーロードとユニオン：

  • オーバーロードでは、呼び出しごとに正確な戻り値の型が得られます。
  • ユニオンではシグネチャを1つに保てますが、よりシンプルな一方で具体性は下がります。
  • 呼び出し側が正確な戻り値の型から恩恵を受ける場合は、オーバーロードを選んでください。

DXのヒント

ヒント：

  • オーバーロードの数は少なく、明確に保ってください。
  • パラメーターと戻り値の違いをドキュメント化してください。
  • ユーザー体験が向上する場合は、戻り値の型の正確さを優先してください。

オーバーロードの確認

クイックチェック：関数のオーバーロードを正しく宣言しているパターンはどれですか？

まとめ

まとめ：呼び出しごとに正確な型を得るにはオーバーロードを使い、呼び出し可能なオブジェクトを表現するには呼び出しシグネチャを使います。1つの実装内で絞り込みを行い、すべてのケースに対応してください。

よくある質問

「関数オーバーロードとcall signature」レッスンは無料ですか？

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

「関数オーバーロードとcall signature」で何を学びますか？

異なる呼び出し形式に対応するオーバーロードシグネチャを宣言し、柔軟なAPIのためにオブジェクト型内でcall signatureを使います ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「関数オーバーロードとcall signature」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. 関数オーバーロードとcall signature
  2. thisパラメーターの型付け、void、never
  3. アサーション関数とユーザー定義型ガード
← TypeScript Academyに戻る