ARTICLE DETAIL

资讯详情

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

.d.ts 声明文件编写教程:TypeScript-New-Handbook 搞定第三方库类型

.d.ts 声明文件编写教程:TypeScript-New-Handbook 搞定第三方库类型 .d.ts 声明文件编写教程TypeScript-New-Handbook 搞定第三方库类型【免费下载链接】TypeScript-New-HandbookIncubation repository for the new TypeScript handbook 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-New-Handbook你在用 TypeScript 时是否遇到过这样的困惑明明安装好了第三方库编辑器却一直报错找不到模块的声明文件这个问题的答案往往就藏在.d.ts 声明文件里。本教程结合开源项目 TypeScript-New-HandbookTypeScript 官方新手册的孵化仓库从零讲解 .d.ts 声明文件的作用、获取方式与编写方法帮你彻底搞定第三方库类型问题。就算你是刚入门的新手也能轻松看懂。.d.ts 声明文件到底是什么TypeScript 项目里主要有两种文件理解它们的区别是学习声明文件的第一步.ts 文件实现文件既包含类型信息也包含可执行代码编译后会输出对应的 .js 文件是你平时写业务代码的地方。.d.ts 文件声明文件只包含类型信息不包含任何实现代码也不会产生 .js 输出它们只服务于类型检查这一个目的。换句话说声明文件的作用是声明某些类型或值的存在而不需要真正提供这些值的实现。这正是 TypeScript 能识别内置 API 的秘密所在。来看一个最简单的例子为什么 TypeScript 知道Math.max存在却会报错说Math.mix不存在明明Math的实现代码根本不在你的项目里。const k Math.max(5, 6); // ✅ 正确 const j Math.mix(7, 8); // ❌ 报错不存在 mix 方法答案就是TypeScript 自带了一套描述内置对象的声明文件。这个例子也是 Type Declarations 章节 的开篇内容很适合作为入门第一课。内置类型定义为什么不用自己写好消息是你不需要为 JavaScript 标准内置 API 手写声明文件。TypeScript 已经为所有标准化的内置 API 提供了声明文件包括string、function等内置类型的方法和属性以及Math、Object等顶层对象在浏览器环境下运行时window、document等 DOM API 的类型也同样内置。这些内置声明文件遵循lib.[something].d.ts的命名规律。当你看到这种命名的文件时就能知道它描述的是平台内置能力而不是用户代码。内置 API 的可用范围还会受两个关键配置影响target设置决定你的代码最终运行在哪个 JavaScript 版本上。例如startsWith方法从 ES6 才开始提供如果把target设为ES5使用它就会报错从而避免你用到部署平台不支持的 API。lib设置允许你对内置声明文件进行更精细的取舍控制。第三方库类型从哪里来3 种获取方式对于非内置的第三方库 API声明文件主要有三种来源按省事程度从高到低排列方式一库自带类型Bundled Types如果你用的库是以 npm 包形式发布的它很可能已经在发布包里包含了类型声明文件。最直接的验证方法就是直接 import 这个包看 TypeScript 能不能自动解析出类型。方式二DefinitelyTyped 与 types 包最常用DefinitelyTyped 是一个集中存放了数千个库的声明文件的仓库绝大多数常见库都能在这里找到对应的类型定义。这些定义会自动发布到 npm 的types作用域下且包名与原始库名保持一致。方式三自己编写声明文件当某个库既没有自带类型、DefinitelyTyped 里也没有时就需要你亲自动手写一份声明文件了。这也正是本教程的核心部分。最省事的 types 安装方法如果你安装了react这个 npm 包只需要一条命令就能安装对应的类型npm install --save-dev types/react安装完成后TypeScript 会自动在node_modules/types目录下查找类型定义不需要任何额外配置立即可用。这也是大多数项目获取第三方库类型的标准姿势。自己动手编写 .d.ts 声明文件的入门步骤当必须自己编写时也有从简到繁的阶梯式做法。第一步快速消除报错临时方案如果你只是想先让某个无类型模块不再报错可以在项目的.d.ts文件里写一句空声明把该模块临时声明为any类型declare module some-untyped-module;这样一来TypeScript 就会把some-untyped-module当作any处理警告立即消失非常适合快速验证思路。第二步声明函数、类与命名空间正式方案想要获得真正的类型提示就需要用declare关键字声明具体的形状。声明文件可以包含函数、类、变量、命名空间等各类声明例如// 声明一个全局函数 declare function formatDate(date: Date, format: string): string; // 声明一个类 declare class ApiClient { constructor(baseUrl: string); getT(path: string): PromiseT; } // 声明一个命名空间 declare namespace utils { function toUpperCase(input: string): string; }声明文件的完整编写规范可以参考 TypeScript-New-Handbook 手册中 Type Declarations.md 一章的指引它逐步讲解了从概念到实践的全部要点。用 TypeScript-New-Handbook 系统学习声明文件如果你想更系统地掌握 .d.ts 声明文件以及背后的一整套 TypeScript 类型体系那么 TypeScript-New-Handbook 是绝佳的学习资料。作为 TypeScript 官方新手册的孵化仓库它用平实易懂的语言组织内容非常适合新手循序渐进地阅读。与声明文件相关的核心资源包括chapters/Type Declarations.md声明文件专题章节讲解内置定义、外部定义与 types 机制chapters/Modules.md理解模块系统是读懂声明文件的基础chapters/Object Types.md对象类型写法声明文件中的高频语法reference/Assignability.md类型可赋值性原理帮你理解类型检查的底层规则reference/Compiler Options.mdtarget、lib等编译选项的详细说明如果想在本地随时翻阅也可以克隆仓库后结合编辑器阅读git clone https://gitcode.com/gh_mirrors/ty/TypeScript-New-Handbook小结三步告别第三方库类型报错回顾一下搞定第三方库类型问题其实只需三步优先用现成的检查库是否自带类型没有就npm install --save-dev types/库名必要时自己写用declare module快速消错用declare function、declare class编写正式声明系统化学习通过 TypeScript-New-Handbook 的 Type Declarations 章节 深入理解声明文件的完整知识体系掌握了 .d.ts 声明文件你就掌握了让 TypeScript 类型检查真正覆盖整个项目的关键技能从此再也不怕找不到模块声明的红色报错了。【免费下载链接】TypeScript-New-HandbookIncubation repository for the new TypeScript handbook 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-New-Handbook创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表