Skip to content

TypeScript | Function Overloading

Posted on:March 9, 2021

一般在寫函式時,可能會有接收不同參數而回傳不同內容的情境,例如這樣:

這函式相當易懂,可接收三個參數,前兩個是 required,第三個是 optional,function 內會判斷有什麼參數或參數什麼型態來執行 / 回傳不同內容。
但這時就有個問題,當在使用時,得到的型態被判斷可能是這三個:

此時也無法享受到編輯器對 TS 帶來的 autocomplete 效果。

Function Overload

而解決這個辦法的就是 function overload,最近因一些因緣際會下,認識到了這個,
這邊先上 code,來看一下這個東西是長怎樣:

它會對 foo 定義所有可能的型態,在使用時會根據傳進的參數符合哪種定義來回傳正確的 type:

可以看到當我前兩個參數皆為 number 時,得到的 type 會是 number;而有第三個參數時,得到的 type 就是 void。

autocomplete 就能正常使用了。

以前看公司專案中有人這樣寫過,當時以為只是讓「人」讀起來比較方便;後來才意識到最大的好處是讓編輯器正確判別型態。在那之前應該用了不少錯誤的方式繞過這型態問題。