从.tsx文件中访问Window对象

Question

通常在我的.ts文件中，我可以通过调用类似以下内容来访问窗口对象：

(<any>window).myObject

我在我的 .tsx 文件中遇到了编译错误。有没有办法从一个 .tsx 文件中访问它？谢谢。

- Daniel R

Answer 1

您可以使用as语法进行类型断言。这是类型断言的替代语法，因为<type>obj与JSX语法冲突：

您可以使用as语法进行类型断言。这是类型断言的另一种语法，因为<type>obj与JSX语法有冲突：

(window as any).myObject

---

以上方法可以运行，但如果您需要强类型，考虑扩展Window界面以添加属性，以便进行编译时类型检查：

declare global {
    interface Window {
        myObject: YourObjectType;
    }
}

- Saravana

Answer 2

ts团队正在弃用语法<type>，因为它与新的jsx语法之间存在太多的歧义。相反，ts团队引入了as操作符来进行类型断言。

所以这个语法:

(window as any).things

更加更新。

这个改变是因为，很难告诉编译器这样的语法是与类型相关还是与jsx元素相关。同样，这种记号变得更难阅读（请参见下面的示例）：

<Component>
  {<String>something}
</Component>

这里可以找到更多详细信息：https://basarat.gitbooks.io/typescript/docs/types/type-assertion.html#as-foo-vs-foo 和 https://github.com/Microsoft/TypeScript/issues/296

- asosnovsky

Answer 3

对@Saravana答案的进一步解释：

最好的方法是在您的types文件夹中定义此内容，并添加一个带有.d.ts扩展名的定义文件，即：window.d.ts，并放置您对窗口对象进行扩展的定义，因为TypeScript全局扩展通常提供合并接口。

declare global {
    interface Window {
        myObject: YourObjectType;
    }
}

// but make sure to export that as default so Typescript will consider it automatically on the project
export default global;

- Biskrem Muhammad