首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【TypeScript】009-内置对象

【TypeScript】009-内置对象

作者头像
訾博ZiBo
发布于 2025-01-06 10:27:25
发布于 2025-01-06 10:27:25
20100
代码可运行
举报
运行总次数:0
代码可运行

10、内置对象

JavaScript 中有很多内置对象,它们可以直接在 TypeScript 中当做定义好了的类型。 内置对象是指根据标准在全局作用域(Global)上存在的对象。这里的标准是指 ECMAScript 和其他环境(比如 DOM)的标准。

ECMAScript 的内置对象

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

BooleanErrorDateRegExp 等。

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 中会经常用到这些类型:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent) {
  // Do something
});

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

TypeScript 核心库的定义文件

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 的类型定义如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 中的例子:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 核心库中定义的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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,则需要引入第三方声明文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install @types/node --save-dev

参考内置对象:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-01-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
深度讲解TS:这样学TS,迟早进大厂【13】:内置对象
初学者玩转 TypeScript系列,总计 21 期,点赞、收藏、评论、关注、三连支持! TS系列地址: 21篇文章带你玩转ts
江一铭
2022/09/08
7950
04. 从TypeScript入手,驾驭HarmonyOS开发的技术风潮!-----------(番外篇)
指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定具体类型的一种特性。
全栈若城
2024/03/12
1780
04. 从TypeScript入手,驾驭HarmonyOS开发的技术风潮!-----------(番外篇)
红宝书 📒 5.4 基本引用类型-单例内置对象
任何由ECMAScript提供、与宿主环境无关,并在ECMAScript执行时就存在的对象。我们前面提到的String、Object、Array、Number、Boolean这些都是内置对象。
用户4793865
2023/01/12
4890
TypeScript学习笔记(一)—— TypeScript入门
TypeScript是一种由微软开发的自由和开源的编程语言,它是JavaScript的一个超集,扩展了JavaScript的语法,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格,C#的首席架构师,工作于TypeScript的开发。
张果
2022/10/04
1.4K0
TypeScript学习笔记(一)—— TypeScript入门
Typescript学习笔记,从入门到精通,持续记录
TypeScript 最大的优势之一便是增强了编辑器和 IDE 的功能,包括代码补全、接口提示、跳转到定义、重构等。
房东的狗丶
2023/02/17
2.2K0
【JavaScript】内置对象 ① ( 内置对象简介 | JavaScript 中的三类对象 - 自定义对象 / 内置对象 / 浏览器对象 | 常用的内置对象 )
在 JavaScript 中 , 对象可以分为三类 : 自定义对象 , 内置对象 , 浏览器对象 ;
韩曙亮
2024/05/04
9120
【JavaScript】内置对象 ① ( 内置对象简介 | JavaScript 中的三类对象 - 自定义对象 / 内置对象 / 浏览器对象 | 常用的内置对象 )
【万字长文】TypeScript入门指南
本文主要讲述叶秋学长通过一个月对TypeScript的学习整理出一份完整的入门指南,希望对正在学习前端的小伙伴有所帮助~
叶秋学长
2023/12/07
1.1K0
【万字长文】TypeScript入门指南
JavaScript内置对象
参考资料:https://www.bilibili.com/read/cv4744418/?spm_id_from=333.788.b_636f6d6d656e74.13 自己学习完善,整理出来 内置
乐心湖
2020/07/31
8400
JavaScript内置对象
会写 TypeScript 但你真的会 TS 编译配置吗?
随着 TypeScript 的流行,越来越多的项目通过使用 TypeScript 来实现编写代码时候的类型提示和约束,从开发过程中减少 BUG 出现的概率,以此提升程序的健壮性和团队的研发效率。
小东同学
2022/07/29
4.7K1
会写 TypeScript 但你真的会 TS 编译配置吗?
TypeScript 贪吃蛇游戏详细教程
我们这个项目使用webpack来打包构建,所以需要安装webpack的相关的一些依赖,把webpack和TypeScript等一些东西整合一下,以方便我们后面整个项目的开发。
害恶细君
2022/11/22
1.4K1
TypeScript 贪吃蛇游戏详细教程
关于原始typescript实现todolist笔记(装饰器模式)
我是歌谣 最好的种树是十年前 其次是现在 今天继续给大家带来的是原始typescript的讲解
爱学习的前端歌谣
2023/10/19
2940
关于原始typescript实现todolist笔记(装饰器模式)
一篇文章搞懂TypeScript
TypeScript 是 JavaScript 的超集,一方面给动态类型的 js 增加了类型校验,另一方面扩展了 js 的各种功能。
人人都是码农
2024/01/11
2370
一篇文章搞懂TypeScript
内置对象,原生对象和宿主对象
js内置对象是ECMAScript规范中要求实现的一些函数和对象,具体包括Object,Function,Number,Boolean,Array, String,RegExp,Error,Date,Global,Math。其中,Math比较特殊,是一个静态类,而不是构造函数。这些对象(函数) 在js引擎初始化时就已经定义完毕,可以直接在程序中或者函数上下文使用。 原生对象包括内置对象,也包括运行时创建的对象,比如用户类等。 而宿主对象则是js代码所在运行环境提供的对象,运行在浏览器上的js,其宿主环境是浏
欲休
2018/03/15
1.5K0
TypeScript学习笔记(三)—— 编译选项、声明文件
compilerOptions ⽀持很多选项,常⻅的有 baseUrl 、 target 、 moduleResolution 和 lib 等。 compilerOptions 每个选项的详细说明如下:
张果
2022/10/04
3K0
TypeScript学习笔记(三)—— 编译选项、声明文件
TypeScript 学习笔记(一)
TypeScript 是 JavaScript 的一个超集,主要提供了 类型系统 和对 ES6 的支持,由 Microsoft 开发。 目前应用:vue3.0,angular2.0,vscode, react ....
前端老鸟
2020/05/18
3K0
TypeScript学习笔记(二)—— TypeScript基础
JavaScript 的类型分为两种:原始数据类型(Primitive data types)和对象类型(Object types)。
张果
2022/10/04
5.5K0
TypeScript学习笔记(二)—— TypeScript基础
TypeScript学习笔记(四)—— TypeScript提高
Type又叫类型别名(type alias),作用是给一个类型起一个新名字,不仅支持interface定义的对象结构,还支持基本类型、联合类型、交叉类型、元组等任何你需要手写的类型。
张果
2022/10/04
2.7K0
TypeScript学习笔记(四)—— TypeScript提高
TypeScript 入门
通过 node -v 命令查看本机是否安装,如果没有安装,参考node.js安装指南 根据电脑系统环境进行安装
王秀龙
2021/08/23
1.8K0
TypeScript 入门
10 个关于 TypeScript 的小技巧
当你开始使用 TypeScript 时,你会发现在浏览器环境中使用它,你需要非常了解它。假设我想在页面搜索框里找到一个元素:
Nealyang
2020/12/15
1.5K0
CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
根据给定的文章内容,撰写摘要总结。
张果
2018/01/04
2.6K0
CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
推荐阅读
相关推荐
深度讲解TS:这样学TS,迟早进大厂【13】:内置对象
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验