【十月打卡】第60天 TypeScript(16)
2022/10/5 4:23:56
本文主要是介绍【十月打卡】第60天 TypeScript(16),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
类型描述文件
- 类型描述文件格式为*.d.ts
- 全局或者模块需要declare来声明
全局
如下以jquery来举例
// index.html <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./src/index.ts"></script> // index.ts $(function () { $('body').html('<div>Hello world</div>'); });
针对上面用法的类型描述文件:jquery.d.ts
interface JqueryInstance { html: (html: string) => JqueryInstance; } // 方式一:函数重载 declare function $(readyFn: () => void): void; declare function $(selector: string): JqueryInstance; // 方式二:使用interface,实现函数的重载 interface Jquery { (readyFn: () => void): void; (selector: string): JqueryInstance; } declare var $: Jquery;
如果jquery增加了对象以及类怎么处理?
$(function () { $('body').html('<div>Hello world</div>'); new $.fn.init(); });
interface JqueryInstance { html: (html: string) => JqueryInstance; } declare function $(readyFn: () => void): void; declare function $(selector: string): JqueryInstance; // 命名空间实现对象以及类进行类型定义 declare namespace $ { namespace fn { class init {} } }
模块
如果jquery是以模块来引入,类型描述文件该怎么处理呢
import $ from 'jquery'; $(function () { $('body').html('<div>Hello world</div>'); new $.fn.init(); });
- 声明模块加上module
- 通过export导出
declare module 'jquery' { interface JqueryInstance { html: (html: string) => JqueryInstance; } // 重载 function $(readyFn: () => void): void; function $(selector: string): JqueryInstance; namespace $ { namespace fn { class init {} } } // 导出 export = $; }
泛型结合keyof
先看下面实例
TS报错:return this.info[key]
原因:因为getInfo传入的参数无法保证是name、age或者gender中的一个
interface Person { name: string; age: number; gender: string; } class Teacher { constructor(private info: Person) {} getInfo(key: string) { return this.info[key]; // 报错 } } const teacher = new Teacher({ name: 'tz', age: 30, gender: 'male', }); teacher.getInfo('name');
通过keyof可以来解决, keyof遍历Person的属性
interface Person { name: string; age: number; gender: string; } class Teacher { constructor(private info: Person) {} getInfo<T extends keyof Person>(key: T): Person[T] { return this.info[key]; } } const teacher = new Teacher({ name: 'tz', age: 30, gender: 'male', }); teacher.getInfo('name');
这篇关于【十月打卡】第60天 TypeScript(16)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15PingCAP 黄东旭参与 CCF 秀湖会议,共探开源教育未来
- 2024-05-13PingCAP 戴涛:构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升