本文介绍了在前端应用中遇到‘Window’接口属性‘X’不存在的TypeScript错误，提供了三种解决方案：在.ts或.tsx文件中使用declareglobal，创建.d.ts文件中的interfaceWindow，以及使用declareconstwindow限制在单个模块。作者推荐使用.d.ts文件以保持代码简洁和易于管理。 摘要由CSDN通过智能技术生成

Window 接口在名为 lib.dom.d.ts 的文件中全局定义，可以使用各种技术来更改它：

• 若要在 .ts 或 .tsx 文件中全局更改它，可以使用 declare global 和 interface Window ：
  

  

  
  

• 如果要在 .d.ts 文件中全局更改它，可以指定 interface Window 。
  

  

  
  

• 要只对一个文件进行更改，可以在 .ts 或 .tsx 文件中使用 declare const window ：
  

  

接口 Window 在 TypeScript 的全局作用域中，作为 lib.dom.d.ts 中的 DOM 类型的一部分，它描述了浏览器中可用的方法。

当第三方脚本(或者我们自己的代码)向窗口添加一些内容时，问题就出现了：

window.X = Date.now();

这是一个问题，因为 TypeScript 不知道 X 属性，所以当你试图访问它时，它会抛出一个错误：

// @errors: 2339window.X;

因此，我们需要以某种方式改变 Window 的全局定义，以便包含 TypeScript 不知道的新属性。

解决方案1： declare global 在 .ts 或 .tsx 文件中

第一个解决方案是使用 declare global 来改变 Window 的全局定义：

这样做有两个原因：首先， declare global 告诉 TypeScript 它里面的任何内容都应该添加到全局作用域中。

第二，我们利用了声明合并，这是 TypeScript 中的一个规则，在相同的作用域中，同名的接口会被合并，所以通过在相同的作用域中重新声明 Window ，我们可以为它附加新的属性。

如果我们使用 type ，这将不起作用，因为类型不支持声明合并。

// @errors: 2300export {};
// ---cut---
declare global {  type Window = {    X: number;  };}

这个解决方案只在 .ts 或 .tsx 文件中起作用，因为 declare global 只在模块中起作用。因此，就您将定义放在项目中的什么位置而言，这个解决方案有点笨拙。在自己的模块中？与其他东西共存？

解决方案 2：一个 .d.ts 文件

一种更整洁的解决方案是在 .d.ts 文件中使用 interface Window ：

之所以这样做是因为你放在 .d.ts 中的任何内容都会自动进入全局作用域，所以不需要 declare global 。

它还允许您将全局定义放在单独的文件中，这比试图找出应该把它放到哪个 .ts 文件中感觉更干净一些。

解决方案3：单模块覆盖

如果你担心在全局作用域中添加类型，你可以使用 declare const window 来重写单个模块中的 window 的类型：

export {};
// ---cut---
declare const window: {  X: number;} & Window;
window.X;//     ^?

declare const window 的作用类似于 const window ，但是在类型级别上，所以它只作用于当前作用域 — 在本例中，是模块，我们声明的类型是当前的 Window 加上新的属性 X 。

如果你需要访问多个文件中的 window.X ，这个解决方案会有点烦人，因为你需要在每个文件中添加 declare const window 行。

我应该使用哪种解决方案？

我个人倾向于使用解决方案 2 — 一个 .d.ts 文件，它只有最少的代码行，并且最容易放置在项目中。

我不介意在全局作用域中添加类型。通过实际更改 Window 的类型，您可以更准确地描述代码执行的环境。在我看来，这是额外的好处。

但是如果你真的担心，可以使用 declare const 解决方案。

欢迎关注公众号：文本魔术，了解更多

tsc -v （当时安装命令执行后，是已经安装了，但是查看版本号提示tsc不是命令，原因是我自己node配置的path错了，这个配置没有影响我npm指令的使用，所以安装成功了，但是tsc显示不是命令，很快可能是node配置环境变量不 正确 ） 建立ts文件 编译ts文件（test.ts是文件名，带后缀）： tsc test.ts 报错：powershell禁止执行脚本文件，修改电脑的这个属性，在powershell页面执行命令： set-ExecutionPolicy Remot typescript 是拥有 类型 的javaScript超集, 它可以编译成普通\干净\完整的js代码 ES3 js所拥有的内容ts都支持, 并且js有es678... ts也都支持这些语法 ts拥有独特的一些数据 类型 枚举 元组 void any vueCli babel=>.ts .vue文件 转换成 普通的html和js和css TS声明变量 在ts 中 声明变量 需要使用 类型 注解的形式 语法 var/let/const 变量名: 哈哈哈，又是我 Virusss来新开专栏了，这次我们就来玩玩 typescript 吧！(ps: 每天五分钟冲击python基础教程还在持续更新 中 …别催我更新喔！不然我就有小脾气了。 什么是 typescript TypeScript 是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态 类型 定义 构建而成。 TypeScript 通过 TypeScript 编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。 TypeScript 添加了很多尚未正式发布的ECMA 其 中 ，`TypeName` 是 类型 别名的名称，`TypeDefinition` 是 类型 的 定义 。下面是一个例子， 定义 了一个 类型 别名 `Person`： ``` typescript type Person = { name: string; age: number; gender: 'male' | 'female'; 在上面的例子 中 ，`Person` 是一个 类型 别名，它 定义 了一个对象 类型 ，包含 `name`、`age` 和 `gender` 三个属性。其 中 `gender` 属性的 类型 是一个字符串字面量 类型 ，只能取 `'male'` 或 `'female'` 中 的一个值。 使用 类型 别名时，我们可以像使用其它 类型 一样使用它，例如 定义 变量和函数参数的 类型 ： ``` typescript const person: Person = { name: '张三', age: 18, gender: 'male' function printPerson(person: Person) { console.log(`姓名：${person.name}，年龄：${person.age}，性别：${person.gender}`); 修复LogicFlow拖拽创建节点时，报 Cannot read properties of undefined (reading ‘model‘) 错误的问题 m0_60595550: 超级谢谢终于解决了！ 现代前端架构介绍（第二部分）：如何将功能架构分为三层 普通网友: 大佬的文章写的太精辟了 让我深刻了解了这篇文章的精髓 谢谢大佬分享，希望继续创作优质博文。【我也写了一些相关领域的文章，希望能够得到博主的指导，共同进步！】 现代前端架构介绍（第三部分）：深入了解状态管理层及其对前端App的影响 普通网友: 写的很详细，感谢博主的分享。【我也写了一些相关领域的文章，希望能够得到博主的指导，共同进步！】 现代前端架构介绍（第一部分）：App是如何由不同的构建块构成的 普通网友: 文章结构严谨有条,层次分明,读起来一点也不费劲，让人受益匪浅。【我也写了一些相关领域的文章，希望能够得到博主的指导，共同进步！】 【最新原创毕设】基于SpringCloud的一站式热点推荐平台+23649（免费领源码）可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C++、python、数据可视化、大数据、文案