迹忆客 专注技术分享

要在 TypeScript 中声明全局类型：

1. 创建一个 global.d.ts 文件并在全局命名空间中声明类型。
2. 添加需要全局访问的类型或接口。
3. 使用 export {} 使文件成为模块。

在项目的 src 目录中，创建一个包含以下 global.d.ts 文件的 types 目录。

export {};

declare global {
  /**
   * 现在声明进入全局命名空间的类型，或者增加全局命名空间中的现有声明。
   */
  interface Employee {
    id: number;
    name: string;
    salary: number;
  }

  type Person = {
    name: string;
    age: number;
  };
}

上面的例子展示了如何创建一个修改全局命名空间的模块。 我们创建了一个全局可访问的 Employee 和 Person 类型。

现在我可以访问我项目中的类型，而无需导入它们。

const emp: Employee = {
  id: 1,
  name: 'James',
  salary: 100,
};

console.log(emp);

const person: Person = {
  name: 'Tom',
  age: 30,
};

console.log(person);

确保根据我们的用例调整类型的名称及其键值对。

如果我们在 IDE 中遇到错误，请尝试将类型目录的路径添加到 tsconfig.json 文件中。

{
  "compilerOptions": {
    // ... rest
    "typeRoots": ["./node_modules/@types", "./src/types"]
  }
}

我们在 global.d.ts 文件中使用 export {} 行将其标记为外部模块。 模块是包含至少 1 个导入或导出语句的文件。 我们必须这样做才能扩大全局范围。

如果我们的 .d.ts 文件不导出任何内容，我们只需要导出行。 否则，我们可以将其删除。

TypeScript 在查找常规 .ts 文件的相同位置查找 .d.ts 文件，这取决于 tsconfig.json 文件中的包含和排除设置。

我们还可以使用这种方法来扩充全局命名空间中的现有声明。

这是一个将 removeLast 方法添加到全局 Array 接口的示例。 这是 global.d.ts 文件。

global.d.ts

export {};

declare global {
  interface Array<T> {
    removeLast(): T[];
  }
}

下面是我们如何在原型上添加方法并使用它。

index.ts

if (!Array.prototype.removeLast) {
  Array.prototype.removeLast = function () {
    this.pop();

    return this;
  };
}

const arr = ['a', 'b', 'c'];

arr.removeLast();

console.log(arr); // 👉️ ['a', 'b']

注意 ，我们必须在所有其他文件之前运行的文件中将方法添加到 Array.prototype，例如 一个 index.ts 文件。

如果我们在将其添加到原型之前尝试使用该方法，我们会收到错误消息。

TypeScript 会将我们声明的 Array 接口与原始 Array 接口合并，因此当我们使用数组时，我们将能够从两个接口访问方法和属性。