斷斷續續碰了一些 TypeScript 的內容,但在實務上始終缺乏一個概念式的整理,導致沒辦法隨心所欲的規劃使用。這回找上 Hiskio 上的「布魯斯的 TypeScript 入門教學」課程,看能不能有所進步。此篇會筆記下 TypeScript 的 Function 的 Overload。
課程相關資訊
[連結]:https://hiskio.com/courses/628/lectures/33151
本篇範圍:Chapter 5
請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。
內容
1. Function 的 overload,顧名思義就是同名的函式,可以有不同的實作方式(傳入參數)和回傳值。
1 2 3 4 5 6 7 8 9 10 11 12 |
function getData(data:string):string[] function getData(data:number):number function getData(data:boolean):boolean function getData(data:unknown):unknown{ if(typeof data === 'string') return [] if(typeof data === 'number') return 88 return data } getData('hello world') getData(999) getData(false) |
2. overload 要記得預期和實作要保持一致,不然會報錯
3. 如果有多個參數要傳進來,可以用 … 來收集成一個陣列。反之,也可以將一個陣列斷言宣告成 const 後,再傳入函式內
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function calculate(...nums:number[]){ console.log(nums) } calculate(1,2,3,4,5) function calculate2(a:number, b:number, c:number){ console.log(a) console.log(b) console.log(c) } const test = [1,2,3] as const calculate2(...test) |