如何使用Typescript在Window对象上声明新属性

【如何使用Typescript在Window对象上声明新属性】在Javascript中, 在任何对象中声明新属性非常简单, 甚至有两种方法可以实现:

// Declare programaticallywindow.MyProperty = function(){alert("Hello World"); }; // Declare with Bracketswindow["MyProperty"] = function(){alert("Hello World"); };

Window变量是一个对象, 因此要使用Javascript在Window对象中声明一个新属性, 我们只需使用先前的代码片段, 一切就可以像超级按钮一样工作。但是, 在无法正常工作的Typescript中, 至少在编译过程中以及在IDE语法检查中(如果它支持TypeScript), 你应该看到以下警告:
[TS]类型” 窗口” 上不存在属性” MyProperty”
错误确实很简单。为了理解它, 我们将使用以下TypeScript类DeviceInfo类:
class DeviceInfo {setInfo(){console.log("This is just a demo ..."); }}let info = new DeviceInfo(); // The following line should throw the error:// Property 'name' does not exist on type 'DeviceInfo'info.name = "BatPhone";

为了解决该错误, 我们只需要将name属性添加到DeviceInfo类即可:
class DeviceInfo {name: string; setInfo(){console.log("This is just a demo ..."); }}let info = new DeviceInfo(); // No more warning !info.name = "BatPhone";

在你自己创建的自定义对象中非常容易解决, 但是Window不是你的类……这已经是浏览器中的内置对象!然后, 如何在打字稿中正确地向Window对象添加新属性?
在窗口中声明新属性根据你的编码方式和所使用的TypeScript版本, 有两种向窗口添加新属性的方法:
1.带接口
要添加新属性并防止任何编译错误, 你可以使用界面来使用新属性描述Window。在TypeScript中, 接口充当命名类型的角色, 并且是定义代码内契约以及项目外代码契约的有效方法。
由于接口的目的仅是描述类型或对象(它们不会被转换为Javascript), 因此你可以创建一个接口来描述window并添加为新属性, 属性名称和错误不再出现:
interface Window {MyProperty: any; }window.MyProperty = 12345; // as the type of MyProperty is any, you can change the value// for the value you want, or specify a different type according// to your needs :)

以下示例显示如何使用具有不同类型的接口在Window对象中声明不同的属性:
interface Window {CustomNumber: number; CustomFunction: Function; CustomString: string; CustomAnything: any; }window.CustomNumber = 123; window.CustomFunction = () => {console.log("Hello World"); }; window.CustomString = "TypeScript"; window.CustomAnything = {hello: 12, world: 21};

2.保持代码动态
如果你不想处理这些类型, 则可以简单地使用以下语法来创建新属性:
(< any> window).MyPropertyName = "Something";

以下示例显示如何在窗口中声明不同的类型:
(< any> window).CustomFunction = () => {alert("Hello World"); }; (< any> window).CustomNumber = 123; (< any> window).CustomString = "Code";

编码愉快!

    推荐阅读