Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧

实际项目中会运到的 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 虽然多写了点儿类型代码，但是好处太多了，可以说是用了就回不去了

我们这样的小角色怎能与时代洪流相抵呢，随波逐流吧，学吧学到废为止

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 也不同
这时就应该想是不是能用泛型来解决，泛型就是在传入的时候才确写具体的类型约束

  1. 先建一个用于映射的类型对象 MyEventMap， key 是 eventType 类型， value 是对应的 listener 类型
  2. 添加泛型 T
  3. 用 extends keyof MyEventMap 约束 T 在 MyEventMap 的 key 范围内，而key 范围又是通过 keyof 来提取的
  4. 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
})

这样就有提示了，看效果

Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧

两个关键点

二、代理 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)
})

Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧

on('paste', (e) => {
    console.log(e)
})

Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧

三、fetch 的 ts 注释

很多情况下，我们会给 fetch 请求回来的函数用 data as User[] 来主动告诉编译器返回数据的类型, 虽然能用，但不优雅

Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧

我们会顺着思路，我们试试给 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')

Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧

get('test/getlist')

Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧

试了一下挺完美，但是，但是，肯定没这么简单，请求地址很多情况下是带有参数的

get('test/getlist?a=1&b=2')

发现提示错误，通不过校验了

Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧

果然类型很麻烦。。。

Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧

！！！需要改进一下泛型匹配

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')

这下可以通过校验了，提示也正常工作

Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧

关键在于

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

标签 , ,

发表回复