Typescript引用第三方库

类型声明文件

第三方库的类型声明文件是一种用于描述 JavaScript 库中各种类型信息的文件，它们通常以 .d.ts（TypeScript 的类型声明文件扩展名）结尾。这些文件的目的是为了让 TypeScript 能够理解和利用 JavaScript 库的类型信息，从而在开发过程中提供类型检查和智能提示的功能。

具体来说，第三方库的类型声明文件包含了以下内容：

1. 类型定义：类型声明文件会定义库中各种对象、函数、类、接口以及其他类型的结构和成员，这些定义会告诉 TypeScript 如何理解和使用库中的各种功能。
2. 类型注解：类型声明文件会为函数参数、返回值以及其他变量提供类型注解，这些注解告诉 TypeScript 在使用库的时候应该期望什么类型的数据。
3. 接口定义：第三方库的类型声明文件通常会包含一些接口的定义，这些接口描述了库暴露的各种对象的结构和属性，以便 TypeScript 能够进行类型检查和智能提示。
4. 枚举类型：如果库中包含枚举类型，类型声明文件会提供这些枚举类型的定义，以便 TypeScript 能够正确地识别和使用它们。
5. 全局变量声明：如果库暴露了一些全局变量或者全局函数，类型声明文件会提供相应的声明，以便 TypeScript 能够正确地推断这些全局变量和函数的类型。
6. 命名空间和模块声明：如果库使用了命名空间或者模块来组织代码，类型声明文件会提供相应的命名空间和模块声明，以便 TypeScript 能够正确地处理这些组织结构。

以下是个例子关于定义一个第三方库的基本语法：

// 使用declare module来声明一个名为my-library的模块
declare module 'my-library' {
// calculateArea函数接受一个radius参数（类型为number），并返回一个计算出的面积（类型也为number）。
  export function calculateArea(radius: number): number;
// Circle接口定义了圆形对象的结构，包含一个必需的radius属性和一个可选的color属性。
  export interface Circle {
    radius: number;
    color?: string;
  }
// createCircle函数接受一个Circle接口类型的参数，并返回一个新的Circle对象。
  export function createCircle(circle: Circle): Circle;
}

引用第三方库

当你使用 TypeScript 开发项目时，你需要引用第三方库的类型声明以便 TypeScript 能够正确地理解和检查这些库的类型。在 TypeScript 中，路径引入第三方库：

1. 通过安装类型声明文件并引用：

   • 大多数流行的 JavaScript 库都有对应的类型声明文件可以供使用。你可以通过 npm 包管理器安装这些类型声明文件。如果没有现成的类型声明文件，你可以手动创建一个.d.ts文件来声明库的类型，然后在tsconfig.json中指定这个声明文件。

2. 通过三斜杠引用：

   • 你可以通过特殊的三斜杠引用（Triple-slash directive）来引用外部类型声明文件。

   // 使用三斜杠引用类型声明文件
   /// <reference path="path/to/my-library.d.ts" />
   
   

3. 通过模块导入引用：

   • 如果你的项目使用了模块化的方式组织代码，并且第三方库也支持模块化导出，你可以通过 import 或 require 的方式来引用第三方库，TypeScript 会自动查找对应的类型声明文件。

   import myLibrary from 'my-library';
   

编写类型声明文件

1. 创建.d.ts文件

首先，你需要在你的项目中创建一个新的.d.ts文件。这个文件将专门用于存放类型声明，而不包含任何实现代码。通常，你可以将这个文件放在项目的typings目录下，或者在项目的根目录下。如果你打算与他人共享这些声明，你也可以考虑将其发布为一个npm包。

2. 使用declare关键字

declare关键字是声明类型的基础。它告诉TypeScript编译器，接下来的代码是类型声明，而不是可执行代码。declare可以用于声明变量、函数、类、接口等。

• 声明全局变量：

  declare var x: number;
  

• 声明全局函数：

  declare function greet(name: string): void;
  

• 声明全局类：

  declare class Animal {
      constructor(name: string);
      speak(): void;
  }
  

3. 声明模块和导出

当你需要为一个模块（库）声明类型时，declare module语法非常有用。它允许你指定模块的名称，并为其添加类型声明，包括导出的类型。

• 声明模块的导出：

  declare module 'my-module' {
      var value: string;
      function doSomething(): void;
  }
  
  

• 声明模块的默认导出：

  declare module 'my-module' {
      function defaultExport(): void;
      export = defaultExport;
  }
  
  

• 声明命名导出：

  declare module 'my-module' {
      export function namedExport();
  }
  
  

4. 声明接口和类型别名

接口（interface）和类型别名（type）是描述对象结构和函数签名的强大工具。它们在类型声明文件中广泛使用，以确保传递给函数的参数和返回值符合预期的类型。

• 声明接口：

  interface User {
      name: string;
      age: number;
  }
  
  

• 声明类型别名：

  type Callback = (err: Error, data: string) => void;
  
  

5. 处理全局变量和函数

如果你正在声明的库在全局作用域中定义了一些变量或函数，你需要使用declare关键字来声明它们，以便TypeScript知道它们的存在和类型。

• 声明全局变量：

  declare var $: {
      ajax: (settings: any) => JQueryXHR;
  };
  
  

• 声明全局函数：

  declare function require(moduleName: string): any;
  
  

实例讲解

示例一：引用第三方库和编写类型声明文件

假设我们要引用一个名为 axios 的第三方库，并为其编写类型声明文件。

1. 安装 axios：

   npm install axios
   

2. 创建类型声明文件（例如 axios.d.ts）：

   // axios.d.ts
   // 导入需要的类型声明
   import { AxiosRequestConfig, AxiosResponse } from 'axios';
   
   // 声明接口，描述 axios 实例的配置参数
   declare interface AxiosInstance {
       (config: AxiosRequestConfig): Promise<AxiosResponse>;
       // 这里可以继续添加其他方法的声明
   }
   
   // 导出 axios 实例的类型声明
   declare const axios: AxiosInstance;
   
   // 导出 AxiosRequestConfig 和 AxiosResponse 接口
   export { AxiosRequestConfig, AxiosResponse };
   
   

首先导入了 AxiosRequestConfig 和 AxiosResponse 两个接口。定义了一个新的接口 AxiosInstance，表示 axios 的实例对象，它接受一个符合 AxiosRequestConfig 类型的配置对象，并返回一个包含 AxiosResponse 类型数据的 Promise 对象。使用 declare const axios: AxiosInstance; 声明了一个全局可用的常量 axios，它的类型是之前定义的 AxiosInstance 接口，这样 TypeScript 编译器就能识别 axios 函数调用及其返回值。最后通过 export 关键字导出了 AxiosRequestConfig 和 AxiosResponse 接口。

1. 使用 axios：

// 使用 axios 实例
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

// 发送请求
axios.get('<https://api.example.com/data>')
    .then((response: AxiosResponse) => {
        console.log(response.data);
    })
    .catch((error: any) => {
        console.error(error);
    });

示例二：处理全局变量和函数的类型声明文件

假设我们有一个全局变量和函数，我们想为其编写类型声明文件。

1. 创建类型声明文件（例如 globals.d.ts）：

   // globals.d.ts
   
   // 声明全局变量
   declare const MY_GLOBAL: string;
   
   // 声明全局函数
   declare function myGlobalFunction(param: number): string;
   
   

2. 使用全局变量和函数：

   // 使用全局变量和函数
   console.log(MY_GLOBAL); // 可以使用全局变量
   
   const result: string = myGlobalFunction(123); // 可以调用全局函数
   console.log(result);
   

在这两个示例中，我们演示了如何引用第三方库并为其编写类型声明文件，以及如何处理全局变量和函数的类型声明文件。通过这种方式，我们可以在 TypeScript 中正确地使用第三方库，并为自己的项目中的全局变量和函数提供类型检查和智能提示。

实践作业

1. 安装 moment.js 库：在项目中安装 moment.js 库，确保可以正常使用。
2. 创建类型声明文件：创建一个名为 moment.d.ts 的类型声明文件，用于描述 moment.js 库的类型信息。
3. 声明接口和类型别名：在类型声明文件中声明一个接口和一个类型别名，分别用于描述日期对象和日期格式的类型信息。
4. 导出全局变量：使用 declare 关键字声明全局变量 moment，确保 TypeScript 可以正确地识别和使用 moment.js 库。
5. 使用三斜杠引入：在测试文件中使用三斜杠指令引入 moment.d.ts 类型声明文件，并使用 moment.js 库。

参考答案：

1. 安装 moment.js 库：

   bashCopy code
   npm install moment
   
   

2. 创建类型声明文件 moment.d.ts：

   typescriptCopy code
   // moment.d.ts
   
   // 声明日期对象的接口
   declare interface Moment {
       format(formatString: string): string;
       // 在这里可以继续添加其他方法的声明
   }
   
   // 声明日期格式的类型别名
   type MomentFormat = string;
   
   // 声明全局变量 moment
   declare const moment: {
       (): Moment;
       (date: Date | string | number | null | undefined): Moment;
       // 在这里可以继续添加其他方法的声明
   };
   
   // 导出接口和类型别名
   export { Moment, MomentFormat };
   
   

3. 使用三斜杠引入：

/// <reference path="moment.d.ts" />

// 导入 moment.js 库和类型声明
import moment, { Moment, MomentFormat } from 'moment';

// 创建日期对象
const date: Moment = moment();

// 格式化日期
const formattedDate: MomentFormat = date.format('YYYY-MM-DD');

console.log(formattedDate); // 输出格式化后的日期