【TS】関数のオーバーロード

見るからに戻り値がstring型でもstring|number型になってしまう

function toUpperFunc(x: string | number) {
  if (typeof x === "string") {
    return x.toLocaleUpperCase();
  }
  return x;
}

// const foo: string | number
const foo = toUpperFunc("foo");

関数をオーバーライドしてstring型で返す

function toUpperFunc(x: string): string;
function toUpperFunc(x: number): number;
function toUpperFunc(x: string | number) {
  if (typeof x === "string") {
    return x.toLocaleUpperCase();
  }
  return x;
}

// const foo: string
const foo = toUpperFunc("foo");

注意点① 一番下のstring|numberのシグネチャは必須

//エラー：このオーバーロード シグネチャには、実装シグネチャとの互換性はありません。
function toUpperFunc(x: string): string;
function toUpperFunc(x: number): number {
  if (typeof x === "string") {
    return x.toLocaleUpperCase();
  }
  return x;
}

注意点② ベースのシグネチャがとり得る型しかオーバーロードできない

// エラー：string|numberのどちらかのみ
function toUpperFunc(x: boolean): string;
function toUpperFunc(x: number): number {
function toUpperFunc(x: string | number) {
  if (typeof x === "string") {
    return x.toLocaleUpperCase();
  }
  return x;
}

注意点③ ベースのシグネチャがとり得る型であればありえない型を指定できる

function toUpperFunc(x: string): number;
function toUpperFunc(x: number): number;
function toUpperFunc(x: string | number) {
  if (typeof x === "string") {
    return x.toLocaleUpperCase();
  }
  return x;
}

// 大文字が返ってくるはずなのにnumber型で受け取る
// エラーにならない
// const foo: number
const foo = toUpperFunc("foo");

オーバーライドした関数を代入した変数の型

function toUpperFunc(x: string): string;
function toUpperFunc(x: number): number;
function toUpperFunc(x: string | number) {
  if (typeof x === "string") {
    return x.toLocaleUpperCase();
  }
  return x;
}

// fooの型はコールシグネチャで型定義される
// toUpperFunc: {
//    (x: string): string;
//    (x: number): number;
//}
const foo = toUpperFunc;