ts 给 document.body 扩展属性和方法

Question

ts版本4.1.6

document.body.abc = 666
document.body.fn = () => {
  console.log('fn')
}
// 如上，ts中，我想给document.body添加全局变量和方法，需要怎么处理?
interface Document{
  body:{
    abc: any, // err
  }
}

Answer 1

interface HTMLBodyElement {
    myVar: string;
}


(document.body as HTMLBodyElement).myVar = "hello";

Answer 2

interface HTMLElement {
  //xxx
}

Answer 3

相较类型断言, 更好的方式是使用 Module Augmentation

declare global {
  interface HTMLElement {
    abc: number;
    fn(): void;
  }
}

document.body.abc = 666;
document.body.fn = function () {
  console.log('fn');
};

export { }

TS Playground