TypeScript里的类型声明文件

---

前言

类型声明文件是TS中很重要的知识，它是链接TS和JS的桥梁，我们要熟练掌握类型声明文件

---

一、什么是类型声明文件

类型声明文件（Declaration Files）是以 .d.ts 为后缀的 TypeScript 文件。它的唯一目的就是提供类型信息。它不包含任何具体的实现代码（如函数体、变量值等），只包含类型声明。简单来说，他只能提供类型，而不能执行代码，不然会报错。

为什么需要类型声明文件

TyepScript的核心是类型系统，但JS中有许多并没有用TS编写的库，如果我们在TS中直接引入这些库，程序就会报错，所以需要类型声明文件。

1. 获得类型安全：在使用第三方库时，能有代码补全、参数类型检查、接口提示等。

2. 获得更好的开发体验：IDE 的智能提示（IntelliSense）依赖于类型信息。

3. 平滑接入 TypeScript：不需要将整个 JS 生态系统重写为 TS，只需要为它们编写类型声明即可。（较为常用）

二、声明文件的语法

1.declare关键字

声明文件使用 declare 关键字来告诉编译器“这个对象在其他地方（通常是某个 JS 文件）已经存在，它的类型是这样的”。
我们一般用它来声明js文件和ts文件中均能使用的，例如let，function等，而明确只能在TS里面使用的，如type，interface等，就不用专门用declare声明

声明变量

// 声明一个全局变量
declare const MY_GLOBAL: string;// 声明一个全局变量 jQuery，它是一个函数
declare var jQuery: (selector: string) => any;

声明函数

// 声明一个全局函数 greet
declare function greet(name: string): void;

声明类

// 声明一个全局类 Animal
declare class Animal {name: string;constructor(name: string);sayHi(): string;
}

声明枚举

// 声明一个全局枚举类型
declare enum Direction {Up,Down,Left,Right
}

声明命名空间（namespace）

---

命名空间的相关知识

命名空间（早期也称为“内部模块”）是 TypeScript 提供的一种代码组织机制，用于将相关的代码（变量、函数、类、接口等）封装在一个命名的区域内。空间命名的主要作用是避免全局命名污染，防止变量，函数名在全局范围内发生冲突，以及逻辑分组，将功能相关的代码组织在一起，，提高可读性和维护性。
命名空间使用namespace关键字来定义，用export关键字吧内部成员暴露给外部使用。
定义一个命名空间

namespace Utilities {// 使用 export 暴露内部的函数和变量export function logMessage(message: string): void {console.log(message);}export const MAX_SIZE = 100;// 没有 export 的成员是私有的，只能在命名空间内部使用function internalHelper(): void {console.log('Internal help');}
}

使用一个命名空间

// 使用"完全限定名"访问导出的成员
Utilities.logMessage("Hello from namespace!");
console.log(Utilities.MAX_SIZE);// 错误：Property 'internalHelper' is private and only accessible within class 'Utilities'.
// Utilities.internalHelper();

多文件命名空间与引用标签
一个命名空间可以跨越多个文件。这是它非常强大的一个特性。你需要使用三斜线指令（/// ） 来告诉编译器文件之间的依赖关系。
假设我们有一个大型的 Drawing 命名空间，被拆分到了两个文件中：
文件1：shapes.ts

// 在多个文件中使用同一个命名空间，它们会合并在一起
namespace Drawing {export interface IShape {draw(): void;}
}

文件二：circle.ts

// 使用三斜线引用指令来声明依赖
/// <reference path="shapes.ts" />namespace Drawing {export class Circle implements IShape { // 可以访问 shapes.ts 中定义的 IShapepublic draw(): void {console.log("Circle is drawn");}}
}

主文件

// 必须引用所有相关的部分
/// <reference path="shapes.ts" />
/// <reference path="circle.ts" />// 现在可以使用完整的 Drawing 命名空间了
let circle: Drawing.IShape = new Drawing.Circle();
circle.draw(); // 输出 "Circle is drawn"

---

所以我们可以声明一个命名空间

// 声明 jQuery 有一个 ajax 方法
declare namespace jQuery {function ajax(url: string, settings?: any): void;// 命名空间内可以嵌套命名空间或类型namespace fn {function extend(object: any): void;}
}

声明模板

这是最常用的一种，用于为第三方库（CommonJS, AMD, UMD, ESM）提供类型定义。

// 声明一个模块 ‘my-module’
declare module 'my-module' {export function doSomething(): void;export const someValue: number;
}

2.声明文件存放的位置

• 与源码同目录
  如果一个库的名字是 index.js，你可以创建一个同名的 index.d.ts 文件放在一起。TS 编译器会自动发现它。这通常用于为你自己编写的 JS 文件提供类型。

• @types 命名空间 (最常用)
  DefinitelyTyped 是一个巨大的 GitHub 仓库，社区为成千上万的 JavaScript 库维护了高质量的类型定义。

  当你通过 npm 安装一个库时，如果它本身不是用 TS 写的，你通常可以安装对应的 @types 包来获取类型声明。

# 安装一个 JS 库
npm install lodash# 安装它的类型声明文件
npm install --save-dev @types/lodash

• 在 tsconfig.json 中直接包含文件
  使用 files 或 include 选项来直接包含你的自定义声明文件。

---

总结

我们要熟练掌握关于类型声明文件的知识。

刘宇涵我爱你你爱爱我吗如果眼泪比爱多的话那我们就到这里吧你曾经爱过吗连月光都不回答