斷斷續續碰了一些 TypeScript 的內容,但在實務上始終缺乏一個概念式的整理,導致沒辦法隨心所欲的規劃使用。這回找上 Hiskio 上的「布魯斯的 TypeScript 入門教學」課程,看能不能有所進步。此篇會筆記下泛型。
課程相關資訊
[連結]:https://hiskio.com/courses/628/lectures/33172
本篇範圍:Chapter 6
請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。
內容
1. 泛型是為了要解決「同樣的函式邏輯,僅是傳入的變數型別改變」的情況
2. 通常以 <T> 的寫法來代表,T 為 Type
1 2 3 4 5 6 |
function hello<T,U>(text: T, text2: U): T{ console.log(text, text2) return text } hello<string, number>('Andy', 999) |
3. 泛型在 function 的範圍內可以自由使用,但也可以在 interface, class… 等範圍中使用
4. 泛型你可以把其當作數學中的「變數」的概念
程式碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
interface Card<T>{ title: string, desc: T } function printCard<U>(desc: U): Card<U>{ const data: Card<U> = { title: 'test', desc } return data } console.log(printCard<number>(12345)) interface CarProps<T>{ name: string } class Car<U> implements CarProps<U>{ name: U constructor(val: U){ this.name = val } } const car = new Car<string>('my car') console.log(car) |