在微信中阅读,欢迎👏👏👏关注公众号:
CodeFit
。
创作不易,如果你觉得这篇文章对您有帮助,请不要忘了 点赞、分享 和 关注 我的公众号:CodeFit
,为我的持续创作提供动力。
本系列已经完结啦🎉🎉🎉,下一个内容是 Vue3,欢迎订阅《Vue 3.x 必修课| 2024》:http://t.csdnimg.cn/hHRrM,目前持续更新中~🚀🚀🚀
精品内容🥇🥇🥇,物超所值🔥🔥🔥(9.9 元!20+篇内容!)。
上文回顾:TypeScript 声明文件
上一篇文章我们回顾了 TypeScript 中的 声明文件(Declaration Files) 及其在使用 第三方库 时的作用。
注意,这里要补充说明一下,上一篇文章在讲解第三方声明文件时,以 Axios 举例,但实际上,从版本 0.19.0 开始,Axios 就在其包中包含了自己的 TypeScript 声明文件。
所以,目前我们在安装 Axios 时也获得了它的类型定义,直接npm install axios
即可,不需要添加安装 @types/axios。
-
声明文件的概念
- 声明文件(.d.ts) 用于为 非 TypeScript 编写的库提供类型信息。
- 它们只包含类型定义,不包含实际的实现代码。
-
创建简单的声明文件
- 我们讲解了如何为像 Axios 这样的库创建基本的 声明文件。
- 使用
declare
关键字来声明全局变量或函数。
-
复杂声明文件
- 使用 接口(interface) 来描述更复杂的库结构。
- 定义方法和属性的类型。
-
使用第三方声明文件
- 许多流行库已有社区维护的声明文件。
- 通过 npm 安装 @types 包来获取这些声明文件。
-
声明文件的作用域
- 项目中的声明文件自动被 TypeScript 编译器识别。
- node_modules/@types 目录下的声明文件对所有项目文件可用。
-
查看类型定义:
- 使用 IDE 的 “转到定义” 功能快速查看第三方库的类型定义。
-
声明文件的重要性:
- 允许在 TypeScript 项目中无缝集成 JavaScript 库。
- 提供 类型检查 和 自动补全 功能,提高开发效率。
这些概念帮助我们更好地理解 TypeScript 的类型系统,以及如何在 TypeScript 项目中有效地使用第三方库。
下面开始本文主题。
大纲
- 内置对象(Built-in Objects)
- TypeScript标准库
- 实用工具类型(Utility Types)
- 总结
1. 内置对象(Built-in Objects)
在 TypeScript 项目中,除了第三方库的声明文件,也有许多原生对象,称为 内置对象(Built-in Objects)。
这些对象是根据 ECMAScript 和其他环境(如 DOM)的标准,在 **全局作用域(global)**上存在的。
在安装 TypeScript 时,这些 内置对象 的类型定义会自动加载到项目中。
1.1 全局对象示例
数组(Array)
let numbers: Array<number> = [1, 2, 3];
数组类型定义默认在多个以 lib
开头、以 .d.ts
结尾的文件中,这些文件表示它们是内置的对象类型。
日期(Date)
let currentDate: Date = new Date();
currentDate.getTime(); // 可以调用Date对象的方法
正则表达式(RegExp)
let regex: RegExp = /ABC/;
regex.test("ABC"); // 可以调用RegExp对象的方法
Math对象
Math.pow(2, 3); // Math是静态对象,所有属性和方法都是静态的
1.2 DOM和BOM对象
除了 ECMAScript 标准语法,JavaScript 还需要与浏览器交互,这就需要 DOM(文档对象模型) 和 BOM(浏览器对象模型) 的标准对象。
let body: HTMLElement = document.body;
let ols: NodeList = document.querySelectorAll('li');
document.addEventListener('click', (e: MouseEvent) => {
e.preventDefault();
});
2. TypeScript标准库
TypeScript 的内部标准库包含了许多 .d.ts
文件,涵盖了从 ES2015 到最新版本的 JavaScript 语法。这意味着在 TypeScript 中,我们可以使用最新版本的 JavaScript 语法,非常方便。
3. 实用工具类型(Utility Types)
TypeScript 还提供了一些功能性的辅助类型,称为 实用工具类型(Utility Types)。这些类型提供了简洁明快且非常方便的功能。
3.1 Partial
Partial<T>
可以将传入的类型的所有属性变为 可选。
interface IPerson {
name: string;
age: number;
}
let viking: IPerson = {
name: "Viking",
age: 20
};
type IPartial = Partial<IPerson>;
let viking2: IPartial = {}; // 所有属性都变为可选
3.2 Omit<T, K>
Omit<T, K>
返回的类型可以 忽略 传入类型的某个属性。
type IOmit = Omit<IPerson, 'name'>;
let viking3: IOmit = {
age: 20
}; // 只需要age属性
这些实用工具类型定义在 lib.es5.d.ts
文件中,虽然它们不是 ES5 的一部分,但在 TypeScript 编码环境中可以直接使用。
结论
TypeScript 的内置对象和实用工具类型大大丰富了我们的编码能力。
通过了解这些类型,我们可以更好地理解 TypeScript 的设计理念,并在日常开发中更加得心应手。
各位看官,本文结束,下文更精彩!
感谢您的阅读!
如果觉得这篇文章对您有所帮助,请点赞、分享,并关注 CodeFit,这样就不会错过更多的精彩内容。
本系列已经完结啦🎉🎉🎉,下一个内容是 Vue3,欢迎订阅《Vue 3.x 必修课| 2024》:http://t.csdnimg.cn/hHRrM,目前持续更新中~🚀🚀🚀
精品内容🥇🥇🥇,物超所值🔥🔥🔥(9.9 元!20+篇内容!)。
同时,您的 支持 和 反馈 对我非常重要,欢迎在评论区留言,与我互动。
付出不一定有收获,但是有付出才有收获,大家下次见!