typescript 中 property does not exist on type window 错误-ag捕鱼王app官网

当我们访问 window 接口上不存在的属性时，会出现“property does not exist on type 'window & typeof globalthis' ”错误。 要解决该错误，需要在 .d.ts 文件中扩展 window 接口，并在窗口对象上添加我们打算访问的属性。

以下是错误发生的示例：

// ⛔️ property 'example' does not exist on
// type 'window & typeof globalthis'.ts(2339)
window.example = 'hello';
console.log(window.example);

在我们的 src 目录中，创建一个包含以下 index.d.ts 文件的类型目录：

export {};
declare global {
  interface window {
    example: string;
  }
}

代码示例展示了如何使用名为 example 的字符串类型的属性扩展 window 接口。 这在我们的用例中会有所不同，因此请务必调整属性名称和类型。

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

export {};
declare global {
  interface window {
    example: any; // 👈️ turn off type checking
  }
}

现在我可以在 window 对象上设置和访问 example 属性而不会出现错误。

// ✅ works now
window.example = 'hello';
console.log(window.example);

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

{
  "compileroptions": {
    // ... rest
    "typeroots": ["./node_modules/@types", "./src/types"]
  }
}

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

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

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

export {};
declare global {
  interface window {
    example: string;
  }
}

提供的文件只是添加了一个字符串类型的示例属性，这很可能不是我们需要的。

typescript 在查找常规 .ts 文件的相同位置查找 .d.ts 文件，这由 yourtsconfig.json 文件中的包含和排除设置决定。

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