五、typescript(内置对象)

皓月当空hy

已于 2024-01-23 15:52:55 修改

阅读量385

点赞数 7

文章标签： typescript javascript

于 2024-01-19 17:20:26 首次发布

本文链接：https://blog.csdn.net/qq_33911541/article/details/135702961

版权

本文介绍了如何在TypeScript中使用类型断言处理ES内置对象（如Boolean、Error等）、DOM和BOM对象，以及如何正确引用Math.pow和DOM事件处理函数，强调了类型安全的重要性。

摘要由CSDN通过智能技术生成

四、typscript(类型断言)-CSDN博客

5.1 ES 的内置对象(JS 中有很多内置对象，可以直接在 TS 中当做定义好了的类型)

// Boolean、Error、Date、RegExp 等

let b: Boolean = new Boolean(1);
let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = /[a-z]/;

5.2 DOM 和 BOM 的内置对象

// Document、HTMLElement、Event、NodeList 等

let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent) {
  // Do something
});

5.3 TS 核心库的定义文件

Math.pow(10, '2');
// 编译错误


因为 Math.pow 必须接受两个 number 参数，其类型定义如下：
interface Math {
    pow(x: number, y: number): number;
}


例2：
document.addEventListener('click', function(e) {
    console.log(e.targetCurrent);
});
// 编译错误

// addEventListener 在 TS 核心库的定义如下

interface Document extends Node, GlobalEventHandlers, NodeSelector, DocumentEvent {
    addEventListener(type: string, listener: (ev: MouseEvent) => any, useCapture?: boolean): void;
}
所以 e 被推断成了 MouseEvent，而 MouseEvent 是没有 targetCurrent 属性的，所以报错了(注意：TS 核心库的定义中不包含 Node.js 部分。)