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

在Javascript中, 在任何对象中声明新属性非常简单, 甚至有两种方法可以实现：

// Declare programatically
window.MyProperty = function(){
    alert("Hello World");
};

// Declare with Brackets
window["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";

编码愉快！