В Javascript объявление нового свойства в любом объекте очень просто, и есть даже 2 способа сделать это:
// Declare programatically
window.MyProperty = function(){
alert("Hello World");
};
// Declare with Brackets
window["MyProperty"] = function(){
alert("Hello World");
};Переменная Window — это объект, поэтому, чтобы объявить новое свойство в объекте Window с Javascript, мы просто использовали бы предыдущий фрагмент, и все будет работать как шарм. Однако в Typescript, который не будет работать … по крайней мере, во время компиляции и в вашей проверке синтаксиса IDE (если он поддерживает TypeScript), вы должны увидеть следующее предупреждение:
[TS] Свойство ‘MyProperty’ не существует для типа ‘Window’
Ошибка действительно очень проста. Чтобы понять это, мы собираемся использовать следующий класс 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. С интерфейсом
Чтобы добавить новое свойство и предотвратить любую ошибку компиляции, вы можете использовать интерфейс для описания окна с вашим новым свойством. В TypeScript интерфейсы выполняют роль именования типов и являются мощным способом определения контрактов в вашем коде. как контракты с кодом за пределами вашего проекта.
Поскольку целью интерфейса является только описание типа или объекта (они не будут перенесены в Javascript), вы можете создать интерфейс для описания окна и добавить в качестве нового свойства имя вашего свойства и ошибку, которая должна больше не появляется:
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. Держите ваш код динамичным
Если вы не хотите заботиться о типах, вы можете просто использовать следующий синтаксис для создания нового свойства:
(window).MyPropertyName = "Something";В следующем примере показано, как объявить различные типы в окне:
(window).CustomFunction = () => {
alert("Hello World");
};
(window).CustomNumber = 123;
(window).CustomString = "Code";
