アロー関数でもオーバーロードがしたい

はじめに

アロー関数でもオーバーロードがしたくなったので書きます。

function宣言のオーバーロード

function func(a: number): void; // interface
function func(a: string, b: number): void; // interface

function func(a: string | number, b?: number) { // 実装
  console.log("a");
  console.log("b")
}

typescriptのオーバーロードは、インターフェイス部分と実装部分を分けて書きます。

アロー関数のオーバーロード

アロー関数は無名関数なので、上記のような宣言方法をすることができません。

でも、function宣言ではなくアロー関数を使用したい場面も多いですよね。
実はアロー関数でもオーバーロードを実装できます。

const func: {
    (a: number):void; // interface
    (a: string, b: number):void
} = (a: string | number, b?: number) => { // 実装
    console.log(a);
    console.log(b);
}

これで、上記のfunction宣言と同じ実装ができます。

おそらく、見慣れない書き方なのではないでしょうか?
関数の型の書き方には二つあります。

type Func = () => void; // FunctionType
type Func = {():void}; // CallSignature

CallSignatureの書き方で型宣言をすれば、オーバーロードを実現できます。

最後に

playgroundを用意しています。