實際專案中會運到的 Typescript 回呼函式、事件偵聽的型別定義，如果剛碰到會一臉蒙真的，我就是
這是第一次我自己對 Typescript 記錄學習，所以得先說一下我與 Typescript 的孽緣
記得最早是在2014年遇上 Typescript 當時是完全看不上這東西的，甚至帶著鄙視的心態，到不是因為它比原生 Js 要多寫很多代碼而是
作為一名前端老兵遇上 Typescript 的語法與型別就會讓我想起剛作業時學習的 Flash Actionscript3.0 腳本時代，不能說是完全相同，簡直是一模一樣，
大約2006年 Adobe 的 flash 9 就開發了自己的新腳本語言 ActionScript 3 完全符合 ECMAScript 第四版規范， 也就是ES4
與當時代的 Javascript 還處于刀耕火種不同，在 Flash 編輯器中使用 ActionScript3 撰寫代碼就有了比較完善的型別檢測與型別提示，
曾經的 Actionscript3.0 輝煌的時代，那時影片有Flash, 應用有 Flex, 跨平臺桌面應用有 Adobe air ，后面還支持移動端，這些用的都是 Actionscript3.0 腳本
而 Actionscript3.0 在我熟練掌握后退出了歷史舞臺，，，多棒的腳本語言啊，我又白學了，原因大致是 Adobe 的不上進和其它大公司的聯合圍剿
所以當我第一次接觸到 Typescript 的時候內心非常抵觸，
這幾年 Javascript 跟其它語言相比可能還差一大截，但已和當年刀耕火種不同，前端工具與框架層出不窮，快速更新迭代 web 應用越來越復雜，前端工具越來越成熟，Typescript 的應用
也就水到渠成了，當在團隊中使用 Typescript 雖然多寫了點兒型別代碼，但是好處太多了，可以說是用了就回不去了
我們這樣的小角色怎能與時代洪流相抵呢，隨波逐流吧，學吧學到廢為止
如果你學過 Actionscript3 那么對 Typescript 中普通的，類、介面、繼承、變數型別等概念與語法就會非常熟悉
唯一沒有且用的比較廣泛的概念當屬 Typescirpt 中的 "泛型" , 泛型的理解與運用自我感覺是比較難的，但又不能不面對，只能多看多學了
我所學到與理解的也是看的其它人分享的資料，拾人牙慧
最討厭別人寫的文章、書，上來就是一堆概念和名詞解釋，把你繞的云里霧里
我希望的是從實際運用出發，從問題開始找解決方案，也就是學了干啥用，得學以致用才能更好的理解
以下假設你已經對 Typescript 已經有了一定的基礎了解
如果你從未學過 Typescript 那么請退出先去學基礎！
一、回呼函式的型別提示
注冊自定義事件，傳入的回呼函式，如果事件型別(事件名)對應的回呼函式內回呼引數不一樣
那么回呼函式的型別注釋我們無能為力，只能用 any ，如下 addEvent 函式，用于注冊事件
eventType 定義為 string 型別
listener 這個是函式 Function， 但由于事件型別有多種，對應的回呼函式也有好多種
這就尬住了，暫時只能用 (...args: any[]) => any 來作為 listener 的型別
但這樣還是沒有辦法明確 listener 里邊有多少個具體的引數以及型別
// 自定義注冊事件函式的型別注釋
const addEvent = (eventType: string, listener:(...args: any[]) => any) => {
console.log(eventType, listener);
}
addEvent('eventTypeName1', () => {
})
如果是這樣，那么 呼叫 addEvent 時回呼函式是沒有任何有用的提示的
尬住了是不是
eventType 不同，對應的 listener 也不同
這時就應該想是不是能用泛型來解決，泛型就是在傳入的時候才確寫具體的型別約束
- 先建一個用于映射的型別物件 MyEventMap， key 是 eventType 型別， value 是對應的 listener 型別
- 添加泛型 T
- 用 extends keyof MyEventMap 約束 T 在 MyEventMap 的 key 范圍內，而key 范圍又是通過 keyof 來提取的
- listener 的型別通過 MyEventMap[T] 來獲取
type MyEventMap = {
'eventTypeName1': (a: string) => number
'eventTypeName2': (test: boolean) => string[]
}
const addEvent = <T extends keyof MyEventMap>(eventType: T, listener: MyEventMap[T]) => {
console.log(eventType, listener);
}
addEvent('eventTypeName1', (a) => {
return 1
})
這樣就有提示了，看效果
兩個關鍵點
- extends 來約束 eventType
- MyEventMap[T] 來獲取具體的 listener 型別
二、代理 DOM 事件的型別注釋
比如你自己在寫 Js 框架，其中需求是要實作 addEventListener 的代理函式，如何給這個代理函式寫ts注釋呢？
on('click', ()=> {}) 這樣的方法，且能提示 Typescript 默認提供的型別,并約束 eventName 在dom事件
const on = (eventName: string, listener: (...args: any[]) => any) => {
console.log(eventName, listener);
}
這樣寫也通過了檢測...那肯定不行，因為需求是約束為 dom 事件，但現在約束了eventName為 string
on('click', () => {
})
又尬住了，我們得在 ts 提供的 lib.dom.d.ts 檔案內找答案
原始碼中找到 interface HTMLElement 的介面定義
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
顯然 HTMLElementEventMap 就是我們要找的通過 eventName 映射 具體回呼的 Map
那就和上面自定義注冊函式一樣處理就可以了即
const on = <T extends keyof HTMLElementEventMap>(eventName: T, listener: (this: HTMLElement, ev: HTMLElementEventMap[T]) => any, options?: boolean | AddEventListenerOptions) => {
console.log(eventName, listener, options);
}
這樣就都有正常的提示了
on('mousedown', (e) => {
console.log(e)
})
on('paste', (e) => {
console.log(e)
})
三、fetch 的 ts 注釋
很多情況下，我們會給 fetch 請求回來的函式用 data as User[] 來主動告訴編譯器回傳資料的型別, 雖然能用，但不優雅
我們會順著思路，我們試試給 fetch 請求函式作 ts 注釋
一樣先建一個 ResponseMap ,key 是 三、fetch 請求地址 value 是 fetch 回傳的資料型別
type ResponseMap = {
'hello/world': number
'test/getlist': string[]
}
const get = async <T extends keyof ResponseMap>(url: T):Promise<ResponseMap[T]> => {
const response = await fetch(url);
return response.json();
}
測驗一下
get('hello/world')
get('test/getlist')
試了一下挺完美，但是，但是，肯定沒這么簡單，請求地址很多情況下是帶有引數的
get('test/getlist?a=1&b=2')
發現提示錯誤，通不過校驗了
果然型別很麻煩，，，
！！！需要改進一下泛型匹配
const get = async <T extends keyof ResponseMap>(url: T | `${T}?${string}`):Promise<ResponseMap[T]> => {
const response = await fetch(url);
return response.json();
}
get('test/getlist?a=1&b=2')
這下可以通過校驗了，提示也正常作業
關鍵在于
url: T | ${T}?${string}
這一句的改動， 通過字串模板提取出 T 來
最后，人家的建議是泛型也需要更友好的命名，T、K、R、等等都太不友好了，可以更具名化如下, 把范圍名字變的更具體
const addEvent = <EventType extends keyof MyEventMap>(eventType: EventType, listener: MyEventMap[EventType]) => {
console.log(eventType, listener);
}
const get = async <FetchUrl extends keyof ResponseMap>(url: FetchUrl | `${FetchUrl}?${string}`):Promise<ResponseMap[FetchUrl]> => {
const response = await fetch(url);
return response.json();
}
說明：以上知識是看到國外某個講 typescript 的視頻中學到的，沒找到原視頻內容，當然很多英文內容也沒有翻譯，我只是把理解的知識轉化一下，所以才叫拾人牙慧么...
cnblogs.com/willian/
https://github.com/willian12345
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544764.html
標籤：Html/Css