如何在 TypeScript 中扩展 Window 类型

作者

在 TypeScript 中扩展 Window 类型

How to extend the Window type in TypeScript

要在 TypeScript 中扩展窗口类型，请创建一个.d.ts文件，您可以在其中扩展Window界面，添加您打算在window对象上访问的属性的名称和类型。TypeScript.d.ts在查找常规文件的相同位置查找.ts文件。

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

源代码/类型/index.d.ts
export {};

declare global {
  interface Window {
    myProperty: string;
  }
}

上面的示例显示了如何使用类型为.nameWindow的属性扩展接口。myPropertystring

请注意，这在您的用例中会有所不同，因此请务必调整属性名称和类型。

您需要添加要在window对象上访问的所有属性的名称和类型。

例如，如果您不知道特定属性的类型并希望关闭类型检查，请将其设置为any.

源代码/类型/index.d.ts
export {};

declare global {
  interface Window {
    myProperty: any;
  }
}

现在，我可以设置和访问window对象的指定属性，而不会出现任何错误。

索引.ts
// ✅ OK
window.myProperty = 'hello world';

console.log(window.myProperty);

如果您尝试访问未添加到扩展Window
接口且在原始接口上不存在的属性，则会Window出现错误：

索引.ts
// ⛔️ Property 'example' does not exist on
// type 'Window & typeof globalThis'.ts(2339)
window.example = 'hello';

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

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

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

请注意，您必须根据您的用例更改所提供文件的内容。 index.d.ts

您应该添加您打算在window对象上访问的所有属性的名称（和类型）。

源代码/类型/index.d.ts
export {};

declare global {
  interface Window {
    myProperty: any;
  }
}

提供的文件只是添加一个myProperty类型为 的属性any，这很可能不是您需要的。

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

TypeScript 会将您声明的Window接口与原始
Window接口合并，因此当您使用该window对象时，您将能够从两个接口访问属性。

–

发表评论