面试官：说说TypeScript扩展类型定义

古城微笑少年丶 2024-04-22 19:20 75阅读 0赞

### 小册 ###

> 这是我整理的学习资料，非常系统和完善，欢迎一起学习

*  **[现代JavaScript高级小册][JavaScript]**
 *  **[深入浅出Dart][JavaScript]**
 *  **[现代TypeScript高级小册][JavaScript]**
 *  **[linwu的算法笔记?][linwu]**

## 扩展类型定义 ##

在 TypeScript 中，我们可以通过声明文件（`.d.ts` 文件）来为现有的 JavaScript 库提供类型定义，或者为现有的类型添加额外的属性和方法。这个过程通常被称为“类型声明扩展”。在这篇文章中，我们将详细探讨如何通过声明文件扩展类型定义。

### 什么是声明文件？ ###

在 TypeScript 中，声明文件是一种以 `.d.ts` 为扩展名的特殊文件，它不包含具体的实现，只包含类型声明。这些文件通常用来为已有的 JavaScript 库提供类型定义，使得我们可以在 TypeScript 代码中更安全、更方便地使用这些库。

声明文件的主要内容是类型声明，包括变量、函数、类、接口等的类型定义。这些类型声明提供了一种描述 JavaScript 代码的结构和行为的方式，使得 TypeScript 编译器能够理解和检查 JavaScript 代码。

// types.d.ts
    declare var foo: string;
    declare function bar(baz: number): boolean;

在上面的声明文件中，我们声明了一个全局变量 `foo` 和一个全局函数 `bar`，并分别给它们提供了类型声明。

### declare ###

当我们在 TypeScript 中编写声明文件时，我们使用 `declare` 关键字来声明全局变量、函数、类、接口等类型。

`declare` 关键字用于告诉 TypeScript 编译器某个标识符的类型，而不需要实际的实现代码。它用于在声明文件中描述 JavaScript 代码的类型。

下面是一些常见的用法：

#### 1. 声明全局变量： ####

declare const myGlobal: string;

这个声明告诉 TypeScript 编译器，存在一个名为 `myGlobal` 的全局变量，它的类型是 `string`。

#### 2. 声明全局函数： ####

declare function myFunction(arg: number): string;

这个声明告诉 TypeScript 编译器，存在一个名为 `myFunction` 的全局函数，它接受一个 `number` 类型的参数，并返回一个 `string` 类型的值。

#### 3. 声明全局类： ####

declare class MyClass {
        
      constructor(name: string);
      getName(): string;
    }

这个声明告诉 TypeScript 编译器，存在一个名为 `MyClass` 的全局类，它有一个接受 `string` 类型参数的构造函数，并且有一个返回 `string` 类型的 `getName` 方法。

#### 4. 声明命名空间 ####

declare namespace MyNamespace {
        
      export const myVariable: number;
      export function myFunction(): void;
    }

这个声明告诉 TypeScript 编译器，存在一个名为 `MyNamespace` 的全局模块/命名空间，它包含一个名为 `myVariable` 的变量和一个名为 `myFunction` 的函数。

通过使用 `declare` 关键字，我们可以在声明文件中描述出我们所需要的类型信息，以便 TypeScript 编译器进行类型检查和类型推断。

需要注意的是，`declare` 关键字只用于类型声明，不包含具体的实现代码。在使用声明文件时，我们需要确保提供了实际的实现代码，以便程序在运行时可以访问到所声明的类型。

### 5. 声明模块 ###

当我们在声明文件中使用 `declare module` 时，我们可以定义一个模块，并在其中声明模块内部的类型。这样，其他文件在导入该模块时，就可以按照模块的名称来引用其中的类型。

declare module 'my-module' {
        
      export const myVariable: string;
      export function myFunction(): void;
    }

在这个示例中，我们在 `my-module` 模块中声明了一个名为 `myVariable` 的变量和一个名为 `myFunction` 的函数，并通过 `export` 关键字将它们导出，使其在导入该模块时可见。

#### 通过声明文件扩展类型定义 ####

在某些情况下，我们可能需要为已有的类型添加额外的属性或方法。比如，我们可能在使用一个库时发现它缺少一些我们需要的类型定义，或者我们可能想要为一些内置类型（如 `string` 或 `Array`）添加一些自定义的方法。

这时，我们可以通过在声明文件中使用“声明合并”（Declaration Merging）来扩展类型定义。声明合并是 TypeScript 的一项特性，它允许我们在多个位置声明同名的类型，然后 TypeScript 会将这些声明合并为一个类型。

例如，假设我们想要为所有的数组添加一个 `last` 属性，该属性返回数组的最后一个元素。我们可以在声明文件中为 `Array` 类型添加一个新的声明：

// types.d.ts
    interface Array<T> {
        
      last: T;
    }

在上面的代码中，我们通过声明一个同名的 `Array` 接口来为 `Array` 类型添加一个新的 `last` 属性。这样，我们在 TypeScript 代码中使用数组时，就可以访问这个新的 `last` 属性：

let nums: number[] = [1, 2, 3];
    console.log(nums.last);  // 3

### 注意事项 ###

虽然通过声明文件扩展类型定义可以让我们更灵活地使用类型，但也需要注意一些事项。

声明文件只提供类型信息，不包含实现。也就是说，如果我们为一个类型添加了新的属性或方法，我们还需要在实际的代码中提供这些属性或方法的实现。

尽管 TypeScript 允许我们为内置类型添加自定义的属性和方法，但这并不意味着这是一个好的做法。在很多情况下，过度修改内置类型可能会导致代码难以理解和维护。因此，我们应该谨慎使用这种特性，尽可能地遵循库或语言的原始设计。

当我们在一个项目中使用多个声明文件时，需要注意文件的加载顺序和作用域问题。因为声明文件中的类型声明会影响整个项目，所以我们需要确保所有的声明文件都被正确地加载，并且不会互相冲突。

### 为第三方库创建声明文件 ###

当我们在使用第三方库时，通常会遇到缺乏类型声明的情况。我们可以通过创建一个声明文件来为该库添加类型声明，以便在 TypeScript 代码中使用该库的时候获得类型检查和自动完成的支持。

假设我们使用的是一个名为 `axios` 的库，它是一个流行的用于发起 HTTP 请求的库。假设 `axios` 库没有提供类型声明文件，我们可以创建一个声明文件 `axios.d.ts` 来为它添加类型声明：

declare module 'axios' {
        
      export interface AxiosRequestConfig {
        
        url: string;
        method?: string;
        data?: any;
        headers?: any;
      }
    
      export interface AxiosResponse<T = any> {
        
        data: T;
        status: number;
        statusText: string;
        headers: any;
        config: AxiosRequestConfig;
      }
    
      export function request<T = any>(config: AxiosRequestConfig): Promise<AxiosResponse<T>>;
      export function get<T = any>(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse<T>>;
      export function post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse<T>>;
      // ... 其他请求方法的类型声明 ...
    }

在这个声明文件中，我们使用 `declare module` 来声明一个名为 `axios` 的模块，并在其中定义了与 `axios` 相关的类型声明。

我们定义了 `AxiosRequestConfig` 接口，它描述了发起请求时的配置选项；定义了 `AxiosResponse` 接口，它描述了请求返回的响应数据的结构。

然后，我们通过 `export` 关键字将 `request`、`get` 和 `post` 等函数导出为模块的公共 API，以便在其他文件中使用这些函数。

现在，在我们的 TypeScript 代码中，我们可以通过导入 `axios` 模块来使用这些类型声明，以及使用 `axios` 库的方法：

import axios, {
         AxiosResponse, AxiosRequestConfig } from 'axios';
    
    const config: AxiosRequestConfig = {
        
      url: 'https://api.example.com',
      method: 'GET',
    };
    
    axios.get(config)
      .then((response: AxiosResponse) => {
        
        console.log(response.data);
      })
      .catch((error) => {
        
        console.error(error);
      });

通过这种方式，我们可以为第三方库创建声明文件，并在 TypeScript 代码中使用它们来获得类型检查和自动完成的支持，提高代码的可靠性和开发效率。

[JavaScript]: https://www.coding-time.cn
[linwu]: https://www.coding-time.cn/lc