【TS】TypeScript 中的.d.ts文件是什么？如何在项目中使用？

gnn

问题：
TypeScript 中的.d.ts文件是什么？如何在项目中使用？


一、.d.ts文件的基础概念
什么是.d.ts文件？
.d.ts是TypeScript中用于声明类型定义的文件扩展名。它允许开发者为JavaScript库或没有直接包含类型信息的代码提供类型注释，使得TypeScript编译器能够理解这些代码的结构和类型，从而在开发阶段提供静态类型检查、智能提示等功能，而不会对原始代码进行任何修改或编译操作。

为什么需要.d.ts文件？
提升开发效率：通过类型提示，开发者可以在编码时获得即时反馈，减少因类型错误导致的运行时问题。
增强代码可读性和维护性：类型定义文件为代码提供了清晰的接口描述，便于团队成员理解代码结构和意图。
支持第三方库：许多流行的JavaScript库并未直接提供TypeScript支持，通过社区维护的.d.ts文件，可以让这些库无缝集成到TypeScript项目中。

二、.d.ts文件的结构与编写基本结构

一个简单的.d.ts文件可能包含以下内容：

1. // 声明一个全局变量
   
2. declare var myLib: {
   
3.   version: string;
   
4.   doSomething(data: any): void;
   
5. };
   
6. 
   
7. // 声明一个模块
   
8. declare module 'my-module' {
   
9.   export function greet(name: string): string;
   
10. }
    

复制代码

这里，declare关键字用来定义类型信息而不实际实现它。var用于声明全局变量，而module则用于定义模块及其导出的成员。

模块声明

对于npm包，通常会采用外部模块的声明方式：

1. // my-module.d.ts
   
2. declare module 'my-module' {
   
3.   export interface User {
   
4.     id: number;
   
5.     name: string;
   
6.   }
   
7. 
   
8.   export function fetchUser(id: number): Promise<User>;
   
9. }
   

复制代码

这段代码声明了一个名为my-module的模块，其中包含一个User接口和一个异步函数fetchUser。

全局声明

有时，你可能需要向全局作用域添加类型定义，比如声明jQuery：

1. // jquery.d.ts
   
2. declare namespace jQuery {
   
3.   function fn(name: string, selector: string): JQuery;
   
4.   interface JQuery {
   
5.     ajax(url: string, settings?: any): JQuery.jqXHR;
   
6.     // ...其他jQuery方法
   
7.   }
   
8. }
   
9. declare var $: JQueryStatic;
   
10. interface JQueryStatic extends JQuery {}
    

复制代码

这段代码定义了jQuery的命名空间、静态成员和JQuery接口，使得TypeScript能够识别并提供jQuery相关的方法和属性的智能提示。

三、使用.d.ts文件

引入类型定义

对于第三方库，我们通常不需要手动创建.d.ts文件，因为TypeScript社区已经维护了一个庞大的类型定义仓库——DefinitelyTyped。使用npm安装对应的类型包即可：

1. npm install --save-dev @types/jquery
   

复制代码

安装后，TypeScript编译器会自动找到并使用这些类型定义。

自定义类型定义

对于自定义的JavaScript库或项目内部的模块，可以手动创建.d.ts文件，并确保其路径被tsconfig.json文件正确引用。例如，对于项目内的某个模块，可以在其目录下创建同名的.d.ts文件：

1. // tsconfig.json
   
2. {
   
3.   "compilerOptions": {
   
4.     // ...
   
5.     "typeRoots": ["node_modules/@types", "src/types"] // 添加自定义类型定义目录
   
6.   },
   
7.   // ...
   
8. }
   

复制代码

然后，在相应的目录下创建.d.ts文件，如src/types/myModule.d.ts。

混合使用JavaScript和TypeScript

当项目中同时包含JavaScript和TypeScript文件时，.d.ts文件可以帮助TypeScript理解JavaScript文件中的类型信息。对于未使用ES6模块的JavaScript文件，可以通过/// <reference path="..." />指令来引入类型定义：

1. // myScript.js
   
2. /// <reference path="./myScript.d.ts" />
   
3. function sayHello(name) {
   
4.   console.log(`Hello, ${name}!`);
   
5. }
   
6. 
   
7. sayHello('World');
   

复制代码

对应的.d.ts文件定义了该JavaScript文件的类型信息：

1. // myScript.d.ts
   
2. declare function sayHello(name: string): void;
   

复制代码

https://blog.csdn.net/qq_40257769/article/details/138389152