如何在 TypeScript 中声明全局类型

作者

在 TypeScript 中声明全局类型

How to declare global types in TypeScript

在 TypeScript 中声明全局类型：

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

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

src/类型/global.d.ts
export {};

declare global {
  /**
   * Now declare things that go in the global namespace,
   * or augment existing declarations in the global namespace.
   */
  interface Employee {
    id: number;
    name: string;
    salary: number;
  }

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

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

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

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

console.log(emp);

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

console.log(person);
确保根据您的用例调整类型的名称及其键值对。

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

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

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

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

TypeScript.d.ts在查找常规文件的相同位置查找
.ts文件，这由文件中的include和exclude设置
决定tsconfig.json。

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

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

src/类型/global.d.ts
export {};

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

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

索引.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接口合并，因此当您使用数组时，您将能够从两个接口访问方法和属性。

–

发表评论