ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

TypeScript 内置 JS 对象完全指南:从 15 个核心全局对象到 Boxed Types

TypeScript 内置 JS 对象完全指南:从 15 个核心全局对象到 Boxed Types 文档教程【免费下载链接】typescript-bookThe Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source.项目地址https://gitcode.com/gh_mirrors/typ/typescript-book点击查看免费下载本指南基于开源仓库《The Concise TypeScript Book》website/src/content/docs/id-id/book/common-built-in-js-objects.md的第 51 章内容展开。TypeScript 作为 JavaScript 的超集完整继承并类型化了 JavaScript 的全部内置对象体系读完本文你将掌握 15 个最常用内置对象的类型化用法、原始类型与包装对象Boxed Types的本质区别以及在strict模式下安全使用这些对象的实战要点。一、为什么 TypeScript 开发者必须理解内置 JS 对象TypeScript 是 JavaScript 的超集这一设计决定意味着JavaScript 中所有可用的内置对象在 TypeScript 中同样存在并且可以被类型系统直接引用与约束。本书第 51 章开篇即明确原文档原文TypeScript 是 JavaScript 的超集它包含所有常用的内置 JavaScript 对象。这句话有双重含义也是本章节全部技术价值的起点运行时层面内置对象由 JavaScript 引擎提供TypeScript 不重新实现它们编译后代码直接调用原生全局对象类型层面TypeScript 为这些全局对象提供了完整的类型声明lib声明文件因此你可以写出const d: Date new Date()、const r: RegExp /abc/i这样的类型化代码获得编译期检查与 IDE 自动补全。该章节在本书目录中的位置也说明了它的定位紧随第 50 章 内置类型原始类型Built-in Type Primitives 之后、第 52 章 重载Overloads 之前属于类型系统基础到进阶语法之间的衔接章节——先认识基础类型再认识承载这些类型方法与能力的全局对象。二、15 个最常用的内置 JavaScript 对象原文档核心清单原文档给出了一个完整清单这些对象覆盖了日常开发中 90% 以上的场景。以下逐项列出该清单为原文档核心内容完整保留并补充每个对象的类型化用法#内置对象核心用途TypeScript 中的典型类型化用法1Function函数对象一切可调用对象的基础const fn: Function () {}更推荐具体签名2Object所有对象实例的基类const o: object {}3Boolean布尔值的包装对象const b: boolean true用原始类型4Error错误对象异常体系基类throw new Error(message)5Number数值的包装对象const n: number 42用原始类型6BigInt任意精度整数const x: bigint 9007199254740991n7Math数学计算工具集静态方法Math.max(1, 2, 3)8Date日期与时间const d: Date new Date()9String字符串的包装对象const s: string hello用原始类型10RegExp正则表达式const r: RegExp /abc/i11Array有序集合const a: string[] [a, b]12Map键值对集合const m: Mapstring, number new Map()13Set无重复值集合const s: Setstring new Set()14Promise异步操作封装const p: Promisestring fetch(url).then(r r.text())15Intl国际化日期、数字、排序等本地化格式化Intl.DateTimeFormat(id-ID)原文档同时指出这些对象的完整权威列表可查阅 MDNMozilla Developer Network的 JavaScript 全局对象参考文档本书仅精选其中最常用的一批帮助读者在有限篇幅内建立内置对象 全局工具箱的认知框架。作为对照第 50 章 built-in-type-primitives.md 关注的是number、string、boolean等类型层面的原始类型而本章关注的是承载方法与能力的对象层面。三、分组精讲这些对象在 TypeScript 中怎么用3.1 包装对象三兄弟Number、String、BooleanNumber、String、Boolean三个对象既承担全局函数角色如Number(42)做类型转换又是对应原始类型的包装对象。在 TypeScript 中必须遵守一条铁律类型标注永远使用小写的原始类型number/string/boolean而不是首字母大写的包装类型。本书 others.md 的 Boxed types 小节 用一个实验证明了二者差异当你在字符串原始值上调用charAt或normalize时JavaScript 会临时把它包装成String对象、调用方法、然后立即丢弃该对象const originalNormalize String.prototype.normalize; String.prototype.normalize function () { console.log(this, typeof this); // 观察 this 与 typeof return originalNormalize.call(this); }; console.log(\u0041.normalize());TypeScript 为原始类型与其包装对象提供了彼此独立的类型string String、number Number、boolean Boolean、symbol Symbol、bigint BigInt。用错会产生类型错误// 推荐小写原始类型 const s: string hello; const n: number 42; const b: boolean true; // 不推荐包装类型boxed types通常并无必要 const s2: String hello; // 类型是 String 而非 string3.2 集合类Array、Map、Set三者都是泛型容器TypeScript 的泛型语法让它们的元素类型完全可追踪// Array两种等价写法见第 11 章 primitive-types const x: string[] [a, b]; const y: Arraystring [a, b]; const j: Arraystring | number [a, 1, b, 2]; // 联合类型数组 // Map显式指定键值类型 const userScores: Mapstring, number new Map(); userScores.set(alice, 95); // Set自动去重 const tags: Setstring new Set([ts, js]); tags.add(ts); // 已存在无效操作本书 第 11 章 primitive-types.md 还强调TypeScript 额外支持readonly数组与元组这在传递不可变集合时非常实用const x: readonly string[] [a, b]; // readonly 修饰符 const y: ReadonlyArraystring [a, b]; const j: ReadonlyArraystring | number [a, 1, b, 2]; // j.push(x); // 编译错误readonly 数组不允许修改3.3 异步与错误处理Promise、ErrorPromise是异步编程的核心其泛型参数PromiseT直接声明了兑现值的类型配合async/await可写出完全类型化的异步流程async function fetchUser(id: number): Promisestring { const res await fetch(/api/users/${id}); if (!res.ok) { throw new Error(HTTP ${res.status}); // Error 对象 } return res.text(); }Error是异常体系的基类TypeScript 允许通过class ... extends Error定义自定义错误并配合本书 others.md 的错误与异常处理小节 与never类型见 第 34 章 the-never-type.md实现穷尽性检查。3.4 正则、日期与国际化RegExp、Date、Intl// RegExp直接类型标注 const emailPattern: RegExp /^[\w.-][\w-]\.\w$/; emailPattern.test(devexample.com); // true // Date明确标注实例类型 const now: Date new Date(); // Intl国际化格式化无需额外类型标注内建类型已覆盖 const formatter new Intl.DateTimeFormat(id-ID, { dateStyle: full }); formatter.format(now); // 例如 Sabtu, 24 September 20263.5 工具型对象Object、Function、Math// Object避免使用优先使用具体对象字面量类型或 interface const config: object { strict: true }; // Math静态方法直接调用 const max: number Math.max(1, 5, 3); // Function避免宽泛标注优先给出精确的函数签名 type Handler (event: Event) void;Object与Function在 TypeScript 中属于过于宽泛的类型object类型无法访问具体属性Function类型不做任何参数检查。实战中更推荐用具名接口、函数签名或泛型约束替代。四、深入原理原始类型 vs 包装对象Boxed Types这是理解内置对象最关键的底层知识。如 others.md 的 Boxed types 小节 所述Boxed types 指用来把原始类型表示为对象的包装对象。当你在string原始值上访问charAt或normalize这类方法时JavaScript 会把它包装成String对象、调用方法、然后立即丢弃该对象。TypeScript 对每一对原始类型/包装类型都建立了独立的类型边界string String number Number boolean Boolean symbol Symbol bigint BigInt实际影响体现在两处类型标注必须选对const x: String a与const x: string a类型不同在strict模式下混用可能触发类型不兼容错误BigInt 与 Number 不可混用如 primitive-types.md 明确警告的——bigint值不能与number混合运算也不能直接使用内置Math方法必须先转换为同一类型且bigint仅在tsconfig.json的target配置为 ES2020 或更高时可用原文档原文提示。结论与本书一致Boxed types 通常并不需要请避免使用包装类型优先使用原始类型——即写string而非String、写number而非Number。五、内置对象与类型推断的协同内置对象的价值在类型推断场景中同样突出。本书 第 35 章 type-from-value.md 指出TypeScript 会从值自动推断类型const x x; // const 声明下推断为字符串字面量 x把这一机制应用到内置对象上const pattern /abc/i; // 推断为 RegExp const scores new Map(); // 推断为 Mapany, any建议显式标注泛型 const p Promise.resolve(42); // 推断为 Promisenumber尤其是Map、Promise这类泛型对象当推断结果退化为any如空Map()时应显式标注泛型参数以维持类型安全——这也呼应了 第 11 章 中关于any的告诫any会绕过类型检查、破坏契约并失去自动补全应尽量通过noImplicitAny配置项目采用astro/tsconfigs/strict基线见 website/tsconfig.json在编译期暴露这类隐式any。六、速查表内置对象选择指南场景推荐对象不推荐写法理由数值计算numberMathNumber包装避免 boxed type大整数bigintES2020number超出 2^53-1 安全整数字符串处理string原始类型String包装避免 boxed type有序列表ArrayT/readonly T[]—泛型约束元素类型键值缓存MapK, V普通对象可选保留插入序、键类型灵活去重集合SetT数组手写去重语义清晰、性能更好异步结果PromiseT回调嵌套类型化兑现值正则校验RegExp字符串indexOf表达力与可读性日期处理Date手写时间戳运算内置解析与格式化本地化展示Intl手写模板拼接按语言区域自动格式化异常传播Error 自定义子类throw str保留堆栈与类型信息七、小结从清单到类型安全的日常实践回到原文档的最终结论TypeScript 内置了全部常用 JS 对象开发者的任务不是重新学习一套 API而是为这些对象补上类型视角。掌握本章的核心行动项记住 15 个核心对象及其分工Function/Object/Boolean/Error/Number/BigInt/Math/Date/String/RegExp/Array/Map/Set/Promise/Intl标注类型时坚持小写原始类型避开String/Number/Boolean/Symbol/BigInt包装对象对泛型容器Array、Map、Set、Promise显式给出元素类型让编译器替你守住边界让类型推断type-from-value.md、严格模式tsconfig 基于astro/tsconfigs/strict与穷尽性检查the-never-type.md共同构成你的类型安全防线。下一篇第 52 章 重载Overloads 将在此基础之上深入函数签名层面的类型体操。赞分享文档教程【免费下载链接】typescript-bookThe Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source.项目地址https://gitcode.com/gh_mirrors/typ/typescript-book点击查看免费下载相关推荐TypeScript 中的常见内置 JavaScript 对象15 个全局对象与类型系统的协同使用指南TypeScript 中的常见内置 JavaScript 对象15 个全局对象与类型系统的协同使用指南 本文基于《The Concise TypeScript文档教程TypeScript 内置 JS 对象实战指南《The Concise TypeScript Book》常用内置对象详解TypeScript 内置 JS 对象实战指南《The Concise TypeScript Book》常用内置对象详解 TypeScript 是 JavaS文档教程TypeScript 内建 JavaScript 对象详解从 Function 到 Intl 的全局对象类型化实战指南TypeScript 内建 JavaScript 对象详解从 Function 到 Intl 的全局对象类型化实战指南 导读 TypeScript 是 Ja文档教程上一篇gpt-code-ui自定义模型接入本地LLM部署与API适配完整指南下一篇Prefect数据序列化跨进程任务通信机制创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表