typescript 的`.d.ts`文件

参考文档: https://juejin.cn/post/7188852961366409272

`.d.ts` 文件介绍

typescrpit的优点

更好的可维护性和可读性
引入了静态类型声明，不需要太多的注释和文档，大部分的函数看类型定义就知道如何使用了
在编译阶段就能发现大部分因为变量类型导致的错误

d.ts是什么

d.ts (d即declare)，ts的声明文件

为什么要使用d.ts

有时，我们不免会引入外部的 JS库，这时TS就对引入的JS文件里变量的具体类型不明确了，为了告诉TS变量的类型，因此就有了.d.ts (d即declare)，ts的声明文件。“d.ts”文件用于为 TypeScript 提供有关用 JavaScript 编写的 API 的类型信息。简单讲，就是你可以在 ts 中调用的 js 的声明文件。TS的核心在于静态类型，我们在编写 TS 的时候会定义很多的类型，但是主流的库都是 JS编写的，并不支持类型系统。这个时候你不能用TS重写主流的库，这个时候我们只需要编写仅包含类型注释的 d.ts 文件，然后从您的 TS 代码中，可以在仍然使用纯 JS 库的同时，获得静态类型检查的 TS 优势。

简单示例

准备工作

为了更好的体现d.ts的作用，我们可以试着写一个js库typescript-desc，然后在另一个工程typescript-test中引入typescript-desc这个库，npm link在本地进行测试

如何在d.ts文件中进行声明

简单声明

我们在desc库中export一个getName函数

// typescript-desc index.js
const getName = (name) => {
    console.log(name)
}

export {
    getName
}

在desc中新建index.d.ts并声明这个函数

// typescript-desc index.d.ts
/** 一个获取名字的函数 */
export declare function getName(name: string): void;

在test项目中引入这个库并使用getName函数

// typescript-test index.ts
import { getName, MyPlugin } from  'typescript-desc';

getName('zzp');

可以看到我们在test中调用这个库的函数是能看到对应的提示，这就是.d.ts的作用，可以在 ts 中调用的 js 的声明文件，也体现出了ts的一个优点，引入了静态类型声明，不需要太多的注释和文档，大部分的函数看类型定义就知道如何使用了

自然我们可以在index.d.ts中声明变量，类型，接口等各种东西

// typescript-desc index.d.ts
/** 一个获取名字的函数 */
export const _NAME = 'zzp';
export let age: number;
export declare function getName(name: string): void;

export interface Person{
    name: string;
    age: number;
}

export type nameEnum = 'xiaoming' | 'xiaohong';

namespace

namespace就是一个类似对象的用法

// typescript-desc index.d.ts
export declare namespace MyPlugin {
    var n:number;
    var s:string;
    var f:(s:string)=>number;
}

使用:

// typescript-test index.ts
import { MyPlugin } from  'typescript-desc';
MyPlugin.f('1');

declare module

npm下载的"包"自带了声明文件, 如果我们需要对其类型声明进行扩展就可以使用"declare module“语法

我们在test项目中新建一个global.d.ts文件来对typescript-desc中的声明进行扩展

// typescript-test global.d.ts
import "typescript-desc";  // 注意这里一定要先引入，不然就不是扩展会变成覆盖

declare module "typescript-desc" {
  // 给typescript-desc扩展的方法声明
  export function customGetAgeFunction(age: number): void
}

使用

// typescript-test index.ts
import { getName, MyPlugin, customGetAgeFunction } from 'typescript-desc';

getName('zzp');
MyPlugin.f('1');
customGetAgeFunction(18); // 当然这里会报错，因为typescript-desc中没有对customGetAgeFunction函数进行实现

@types/xxx

一般比较大牌的第三方js插件在npm上都有对应的声明文件, 比如jquery的声明文件就可以在npm上下载:

npm i @types/jquery

typescript 的.d.ts文件

.d.ts 文件介绍