TypeScript - 内置对象 - Powered by Discuz! Archiver

新城星玛百货 發表於 2019-5-17 17:21:00

TypeScript - 内置对象

JavaScript 中有很多内置对象，它们可以直接在 TypeScript 中当做定义好了的类型。内置对象是指根据标准在全局作用域（Global）上存在的对象。这里的标准是指 ECMAScript 和其他环境（比如 DOM）的标准。
ECMAScript 标准提供的内置对象有：<code class="code-81e98f88" data-slate-leaf="true">Boolean</code>、<code class="code-81e98f88" data-slate-leaf="true">Error</code>、<code class="code-81e98f88" data-slate-leaf="true">Date</code>、<code class="code-81e98f88" data-slate-leaf="true">RegExp</code> 等。我们可以在 TypeScript 中将变量定义为这些类型：
<div class="cnblogs_code">
<pre>let b: Boolean = new Boolean(1);
let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = //;</pre>
</div>
DOM 和 BOM 提供的内置对象有：<code class="code-81e98f88" data-slate-leaf="true">Document</code>、<code class="code-81e98f88" data-slate-leaf="true">HTMLElement</code>、<code class="code-81e98f88" data-slate-leaf="true">Event</code>、<code class="code-81e98f88" data-slate-leaf="true">NodeList</code> 等。
<div class="cnblogs_code">
<pre>let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent) {
// Do something
});</pre>
</div>
当你在使用一些常用的方法的时候，TypeScript 实际上已经帮你做了很多类型判断的工作了，比如：
<div class="cnblogs_code">
<pre>Math.pow(10, '2');
// index.ts(1,14): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.</pre>
</div>
上面的例子中，<code class="code-81e98f88" data-slate-leaf="true">Math.pow</code> 必须接受两个 <code class="code-81e98f88" data-slate-leaf="true">number</code> 类型的参数。事实上 <code class="code-81e98f88" data-slate-leaf="true">Math.pow</code> 的类型定义如下：
<div class="codeBlock-18b09018">
<div data-key="75967827ab874e73bca8a829c13d5635">
<div class="codeLine-3035e01e" data-key="f14f593d6ba348d189060ea6e8de1dcb">
<div class="cnblogs_code">
<pre>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;
}</pre>
</div>
再举一个 DOM 中的例子：
</div>
</div>
</div>
<div class="codeBlock-18b09018">
<div class="codeHeader-e3625762--codeHeaderFloating-7f73cde3">
<div class="cnblogs_code">
<pre>document.addEventListener('click', function(e) {
console.log(e.targetCurrent);
});

// index.ts(2,17): error TS2339: Property 'targetCurrent' does not exist on type 'MouseEvent'.</pre>
</div>
上面的例子中，<code class="code-81e98f88" data-slate-leaf="true">addEventListener</code> 方法是在 TypeScript 核心库中定义的：
<div class="cnblogs_code">
<pre>interface Document extends Node, GlobalEventHandlers, NodeSelector, DocumentEvent {
　　addEventListener(type: string, listener: (ev: MouseEvent) => any, useCapture?: boolean): void;
}</pre>
</div>
所以 <code class="code-81e98f88" data-slate-leaf="true">e</code> 被推断成了 <code class="code-81e98f88" data-slate-leaf="true">MouseEvent</code>，而 <code class="code-81e98f88" data-slate-leaf="true">MouseEvent</code> 是没有 <code class="code-81e98f88" data-slate-leaf="true">targetCurrent</code> 属性的，所以报错了。
</div>
</div>
注意，TypeScript 核心库的定义中不包含 Node.js 部分。用 TypeScript 写 Node.js，Node.js 不是内置对象的一部分，如果想用 TypeScript 写 Node.js，则需要引入第三方声明文件：npm install @types/node --save-dev 
来源：https://www.cnblogs.com/xjy20170907/p/10882509.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript - 内置对象