Class構文にTypeScriptを導入したときの備忘録になります。
document.querySelector
Sample.ts
class Sample {
eventElement: HTMLInputElement;
constructor(eventElement: string) {
this.eventElement = <HTMLInputElement>document.querySelector(eventElement);
}
}
export default Sample;
document.querySelectorでelementを指定するときHTMLInputElementを記述しないと
TS2322: Type 'Element | null' is not assignable to type 'object'.
とエラーが表示される。
document.querySelectorAllの場合
Sample.ts
class Sample {
targetElements: NodeListOf<HTMLElement>;
constructor(targetElements: string) {
this.targetElements = document.querySelectorAll(targetElements);
}
}
export default Sample;
document.querySelectorと同じ記述(HTMLInputElement)をすると
Conversion of type 'NodeListOf<Element>' to type 'HTMLInputElement' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
このようなエラーになります。
document.scrollingElementの場合
Sample.ts
const scrollTopPosition: number = document.scrollingElement ? document.scrollingElement.scrollTop : 0;
document.scrollingElementがnullを返すので三項演算子で分岐
resizeイベントの場合
window.resizeのイベントが終わったら処理を走らすソースにになります。
Sample.ts
Class Sample {
observeResize: NodeJS.Timer | null;
constructor() {
this.observeResize = null;
}
resizeWindow() {
window.addEventListener('resize', () => {
if (this.observeResize) {
clearTimeout(this.observeResize);
this.observeResize = null;
}
this.observeResize = setTimeout(() => {
// 処理を書く
}, 200);
}, false);
}
};
export default Sample;