这
打字稿弹跳功能和将在实际项目中交付的事件侦听的类型定义，如果你只是看到它会被蒙蔽，我是
这是我第一次自己录制和学习打字稿，所以我不得不先谈谈我和 Typescript 的关系
我
记得 2014 年第一次遇到 Typescript 的时候，我根本没看过这个东西，甚至还有一副厌恶的态度，并不是因为它写的代码比原生 JS 多很多。
作为一名后端老手，遇到 Typescript 句型和类型让我想起了我刚开始工作时学到的 FlashActionscript 3.0 脚本时代。不能说一模一样，一模一样。
大约在2006年，Adobe的Flash 9开发了自己的新脚本语言ActionScript3，它完全符合ECMAScript规范的第四个版本，即ES4。
与当时的Javascript还是刀耕火种不同，使用ActionScript3在Flash编辑器中编译代码具有相对合理的类型检查和类型提示。
在之前的 Actionscript 3.0 中
辉煌时代，动漫有Flash，应用有Flex，跨平台桌面应用有Adobeair，支持联通，这种Actionscript 3.0脚本用的就是
Actionscript 3.0 在我掌握它之后从历史中退休了......多么棒的脚本语言，我又白白学了。原因大致是Adobe缺乏进展与其他大公司的联合歼灭
所以当我第一次接触Typescript时，我非常反感。
近年来，Javascript与其他语言相比可能仍然有很大的区别，但它与原来的斜杠和烧毁不同，后端工具和框架相继出现，快速更新迭代Web应用程序变得越来越复杂，后端工具越来越成熟，Typescript应用程序
仅此而已。在团队中使用 Typescript 时，你实际上多写了一点类型代码，它非常有用，你可以说使用完就回不去了
像我们这样的小人物，怎么能抗拒时代的洪流，随波逐流，学又学，直到浪费
如果你学过 Actionscript 3，你会特别熟悉普通 Typescript 的概念和句型，比如类、接口、继承、变量类型等。
唯一更多
不可用和使用的广泛概念是Typescirpt中的“子类”，我认为它更难理解和使用，但我忍不住面对它，我只能看到更多，学到更多
我所学到和理解的，也是别人分享的信息，捡起人的牙齿
别人写的最恶心的文章和书是一堆概念和名词解释。把你放在雾中的云层周围
我希望的是，从实际应用出发，从问题入手，找到解决方案。也就是说，如果你学会了使用什么，你必须学习和使用它才能更好地理解
以下假设您已经对 Typescript 有一些基本的了解
如果您以前没有学过 Typescript，请先退出并学习基础知识！
如果注册自定义风波，如果回弹函数中与风波类型（风波名称）对应的回弹参数不同，则传入反弹函数
我们无能为力
关于这种反弹函数的类型注释，我们只能使用任何，比如addEvent函数，用于注册风暴
事件类型定义为字符串类型
监听器 这是一个函数函数，但由于风波的种类很多typescript 回调 写法，所以有很多对应的反弹函数
这很尴尬，暂时只能使用（...）args：any[]）=>any作为侦听器类型
但是，仍然无法澄清侦听器中有多少特定的参数和类型
自定义注册风波函数的类型标注
const addEvent = (eventType: string, listener:(...args: any[]) => any) => {
console.log(eventType, listener);
}
addEvent("eventTypeName1", () => {
})
如果是这样，则在此调用 addEvent 函数时没有有用的提示
道路
尴尬，不是吗
事件类型不同，对应的侦听器不同
这时你应该考虑是否可以使用类库来解决，子类在进入时只用特定的类型约束编写
首先构建一个类型对象 MyEventMap 进行映射，key 是 eventType 类型，value 是对应的侦听器类型，
添加子类 T，在 MyEventMap 的键范围内使用 extendskeyofMyEventMap 约束 T，通过 keyof 提取键范围，通过 MyEventMap[T] 获取侦听器类型。
type MyEventMap = {
"eventTypeName1": (a: string) => number
"eventTypeName2": (test: boolean) => string[]
}
const addEvent = (eventType: T, listener: MyEventMap[T]) => {
console.log(eventType, listener);
}
addEvent("eventTypeName1", (a) => {
return 1
})
所以有提示，看疗效
两个关键点
二、代理DOM风暴评论的类型
例如，如果你自己编写一个 Js 框架，其中要求是实现 addEventListener 代理函数，那么如何为这个代理函数编写 ts 注释？
on（”
click“，（）=>{}），并且可以提示 Typescript 默认提供类型，并在 dom 中约束 eventName
const on = (eventName: string, listener: (...args: any[]) => any) => {
console.log(eventName, listener);
}
像这样写也通过了检查...这绝对是不行的，因为要求被限制在 dom storms 中，但现在它将 eventName 限制为字符串
on("click", () => {
})
尴尬，我们必须在ts提供的lib.dom.d.ts文件中找到答案
在源代码中查找interfaceHTML的套接字定义
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
事实上，HTMLElementEventMap 是我们正在寻找的地图，用于通过 eventName 映射特定的反弹
然后按照前面的自定义注册函数一样处理它，即
const on = (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)
})
用于获取的 TS 注释
在很多情况下，我们会使用 dataasUser[] 来获取请求函数来主动告诉编译器返回的数据类型，这很有用但并不高尚
我们将遵循思路，让我们尝试 TS 注释获取请求函数
同样，首先构建一个 ResponseMap，键是 3，fetch 请求地址值是 fetch 返回的数据类型
type ResponseMap = {
"hello/world": number
"test/getlist": string[]
}
const get = async (url: T):Promise => {
const response = await fetch(url);
return response.json();
}
测试它
get("hello/world")
get("test/getlist")
尝试一下是完美的，但是，它肯定不是那么简单，而且在许多情况下，请求地址带有参数
get("test/getlist?a=1&b=2")
发现提示错误未通过校准
果然typescript 回调 写法，类型很麻烦...
!! 子类匹配有待改进
const get = async (url: T | `${T}?${string}`):Promise => {
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: EventType, listener: MyEventMap[EventType]) => {
console.log(eventType, listener);
}
const get = async (url: FetchUrl | `${FetchUrl}?${string}`):Promise => {
const response = await fetch(url);
return response.json();
}
注：以上知识在美国被打字稿的视频听到，但未找到原始视频内容。其实很多中文内容都没翻译过，我只是把知识转化理解，所以叫捡人牙......
cnblogs.com/willian/
原文链接：
