在typescript中为窗口对象添加新属性教程

窗口是JavaScript内置的全局对象，它提供了像location 和history 这样的属性以及像open 这样的方法。在javascript和typescript中，在window对象中添加一个属性是很困难的。

这篇文章讲述了如何在javascript或typescript中为window全局对象添加属性或函数。

如何在javascript中给窗口对象设置新的属性？

是的，我们可以在窗口全局对象中添加属性和方法，如下图所示

window.employee = {}; // global Object container; don't use var
employee.name = 1;
employee.salary = 1;
employee.totalSalary = function() { 12* employee.salary }
employee.display = function() { 
    console.log(employee.name); 
}

由于javascript没有进行类型检查，这就可以了，但是，在typescript中就不行了，会出现以下错误。

属性'employee'不存在于'window'类型的值上"

所以，在typescript中添加属性是一个棘手的问题，可以用多种方法来完成

自定义接口在typescript中扩展窗口对象

通过扩展Window对象创建一个接口。添加你想添加的属性

让我们创建EmployeeWindow.ts

export interface EmloyeeWindow extends Window {
    name: string;
    salary: Integer;
    totalSalary: Function;
    display: Function;

}

Window是一个全局对象命名空间，不需要导入，但是自定义接口需要在你想使用的类中导入

CustomWindowExample.ts:

import {EmloyeeWindow} from './EmployeeWindow.ts';

第三步是声明一个Window对象类型的类

declare let window: EmloyeeWindow;

你可以通过向窗口对象添加属性来进行测试:

window.name = 'Franc';
window.salary = 5000;


window.totalSalary = () => {
    return window.salary*12;
};


window.display = {
   console.log(window.name +' salary is '+ window.totalSalary)
};

在typescript中的任何类型

请创建一个带有类型断言关键字as 的变量，这意味着编译器理解并将其视为窗口类型。as 是一个用于推断类型的关键字，即新类型:

let EmployeeWindow = window as any;


EmployeeWindow.name = 'Franc';
EmployeeWindow.salary = 5000;


EmployeeWindow.totalSalary = () => {
    return window.salary*12;
};


EmployeeWindow.display = {
   console.log(window.name +' salary is '+ window.totalSalary)
};

结束语

在javascript中给窗口对象添加属性确实简单易行，但是Typescript需要额外的编码和步骤来设置窗口对象的属性。