TypeScriptで学ぶ：オーバーロード関数×ジェネリクス×extendsの使い方と実例

1つの関数で汎用的にデータを返す方法について解説します。関数の呼び出し方に応じて、2パターンの型推論が自動で働くため、とても便利です。
パターン１：userオブジェクトからデータを全て取得する
パターン２：選択したデータのみを取得する（例　name）

// 型定義
type User = {
  name: string;
  age: number;
  email: string;
};

// オーバーロード定義 波括弧がない
function getUser(): User;//1つ目のシグネチャ *１つの定義をシグネチャといいます
function getUser<K extends keyof User>(key: K): User[K];//2つ目のシグネチャ
//上記シグネチャでTypeScriptに二通りの定義があることを教えている

// 実装本体 （見分け方は波括弧がある）
function getUser(key?: keyof User) {//波括弧はここのこと
  const user = {
    name: "Taro",
    age: 25,
    email: "[e-mail]",
  };

  if (key) {
    return user[key];
  }

  return user;
}

オーバーロード関数　シグネチャ部分解説

function getUser(): User;//返り値の型宣言User つまり全て返すという意味です

//Kには引き数に渡す値が入ります、これはジェネリクスです
//extendsは制約を付ける宣言です右辺の閉じ括弧>までのコードをｋの制約にします
//keyof User は「User型のプロパティ名（キー）」を意味します。つまり "name" | "age" | "email" になります
//つまり決まったkeyを引数に選択するという構文です
function getUser<K extends keyof User>(key: K): User[K];
//返り値はUser[K]なので引数がnameであればuser[name]となり"Taro"が返ります

実装本体解説

//引数がある場合はuserの中身の該当するデータを返す
function getUser(key?: keyof User) {
  const user = {
    name: "Taro",
    age: 25,
    email: "[e-mail]",
  };

  if (key) {
    return user[key];
  }
//引数がない場合はuserを返す、
  return user;
}