如何在 TypeScript 中声明全局类型

TypeScript 1年前 1.5K

要在 TypeScript 中声明全局类型：

创建一个 global.d.ts 文件并在全局命名空间中声明类型。
添加需要全局访问的类型或接口。
使用 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);

如何在 TypeScript 中声明全局类型

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

如果我们在 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 文件。

export {};

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

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

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

    return this;
  };
}

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

arr.removeLast();

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