首页 前端知识 前端技术回顾系列 13|TS 中的内置对象和实用工具类型

前端技术回顾系列 13|TS 中的内置对象和实用工具类型

2024-08-25 23:08:10 前端知识 前端哥 294 972 我要收藏

在微信中阅读,欢迎👏👏👏关注公众号: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

  1. 声明文件的概念

    • 声明文件(.d.ts) 用于为 非 TypeScript 编写的库提供类型信息。
    • 它们只包含类型定义,不包含实际的实现代码。
  2. 创建简单的声明文件

    • 我们讲解了如何为像 Axios 这样的库创建基本的 声明文件
    • 使用 declare 关键字来声明全局变量或函数。
  3. 复杂声明文件

    • 使用 接口(interface) 来描述更复杂的库结构。
    • 定义方法和属性的类型。
  4. 使用第三方声明文件

    • 许多流行库已有社区维护的声明文件。
    • 通过 npm 安装 @types 包来获取这些声明文件。
  5. 声明文件的作用域

    • 项目中的声明文件自动被 TypeScript 编译器识别。
    • node_modules/@types 目录下的声明文件对所有项目文件可用。
  6. 查看类型定义

    • 使用 IDE“转到定义” 功能快速查看第三方库的类型定义。
  7. 声明文件的重要性

    • 允许在 TypeScript 项目中无缝集成 JavaScript 库。
    • 提供 类型检查自动补全 功能,提高开发效率。

这些概念帮助我们更好地理解 TypeScript 的类型系统,以及如何在 TypeScript 项目中有效地使用第三方库。

下面开始本文主题。

大纲

  1. 内置对象(Built-in Objects)
  2. TypeScript标准库
  3. 实用工具类型(Utility Types)
  4. 总结

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+篇内容!)。

同时,您的 支持反馈 对我非常重要,欢迎在评论区留言,与我互动。

付出不一定有收获,但是有付出才有收获,大家下次见!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16855.html
标签
评论
发布的文章

LoopBack组件JSONAPI使用指南

2024-09-04 23:09:43

编译JSONCPP源码

2024-09-04 23:09:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!