【如何使用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";
编码愉快!
推荐阅读
- 每个开发人员都应了解的10条Twig技巧和基本功能
- 反混淆JavaScript代码并从脚本中检索源代码
- 如何在iframe中拒绝你的网站对第三方网站的访问
- 使用javascript html5在画布上绘制点(圆)
- 如何使用Webpack从生产版本中删除console.log(或自定义调试功能)
- MPAndroidChart如何让y轴以非零值开始()
- Android Studio中单选按钮的onClick()的替代选项
- 无法使用数据绑定Android与ViewModel中的XML通信
- Android - MVVM中ViewModel状态的最佳实践()