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

在微信中阅读，关注公众号：CodeFit。

创作不易，如果你觉得这篇文章对您有帮助，请不要忘了 点赞、分享 和 关注，为我的 持续创作 提供 动力！

上文回顾：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）

在 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 来说非常重要，欢迎在评论区留言，与我互动。

谢谢大家，下次见！