TypeScript的内置对象

本文摘自

https://ts.xcatliu.com/basics/built-in-objects


内置对象

JavaScript 中有很多内置对象,它们可以直接在 TypeScript 中当做定义好了的类型。

内置对象是指根据标准在全局作用域(Global)上存在的对象。这里的标准是指 ECMAScript 和其他环境(比如 DOM)的标准。

ECMAScript 的内置对象

ECMAScript 标准提供的内置对象有:

BooleanErrorDateRegExp 等。

我们可以在 TypeScript 中将变量定义为这些类型:

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

更多的内置对象,可以查看 MDN 的文档

而他们的定义文件,则在 TypeScript 核心库的定义文件中。

DOM 和 BOM 的内置对象

DOM 和 BOM 提供的内置对象有:

DocumentHTMLElementEventNodeList 等。

TypeScript 中会经常用到这些类型:

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

它们的定义文件同样在 TypeScript 核心库的定义文件中。

TypeScript 核心库的定义文件

TypeScript 核心库的定义文件中定义了所有浏览器环境需要用到的类型,并且是预置在 TypeScript 中的。

当你在使用一些常用的方法的时候,TypeScript 实际上已经帮你做了很多类型判断的工作了,比如:

Math.pow(10,  '2');


// index.ts(1,14): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

上面的例子中,Math.pow 必须接受两个 number 类型的参数。事实上 Math.pow 的类型定义如下:

interface  Math  {
 /**
 * Returns the value of a base expression taken to a specified power.
 * @param x The base value of the expression.
 * @param y The exponent value of the expression.
 */
 pow(x:  number, y:  number):  number;
}

再举一个 DOM 中的例子:

document.addEventListener('click',  function(e)  {
 console.log(e.targetCurrent);
});
​
// index.ts(2,17): error TS2339: Property 'targetCurrent' does not exist on type 'MouseEvent'.

上面的例子中,addEventListener 方法是在 TypeScript 核心库中定义的:

interface  Document  extends  Node, GlobalEventHandlers, NodeSelector, DocumentEvent {
 addEventListener(type:  string, listener:  (ev: MouseEvent)  =>  any, useCapture?:  boolean):  void;
}

所以 e 被推断成了 MouseEvent,而 MouseEvent 是没有 targetCurrent 属性的,所以报错了。

注意,TypeScript 核心库的定义中不包含 Node.js 部分。

用 TypeScript 写 Node.js

Node.js 不是内置对象的一部分,如果想用 TypeScript 写 Node.js,则需要引入第三方声明文件:

npm  install @types/node --save-dev

参考

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、什么是 TypeScript? 百度解释:TypeScript是一种由微软开发的自由和开源的编程语言。它是Ja...
    wave浪儿阅读 2,257评论 1 20
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,368评论 0 3
  • 简介 TypeScript 是 JavaScript 的一个超集,主要提供了 类型系统 和对 ES6 的支持,由 ...
    MrWelson阅读 15,974评论 3 21
  • 译者按: TypeScript 学习成本不高,项目切换成本不低,不过还是值得试一试的! 原文:7 bad excu...
    Fundebug阅读 2,921评论 6 23
  • JS 简史 Web 的兴起已经把 JavaScript 带到一个前所未有的地步, 了解JS 的历史更好的使用JS ...
    迷缘火叶阅读 1,717评论 0 1