1st School Project : SoftWare_Engineering Small Community Site_0530 Uncaught TypeError: Illegal constructor

Status Quo

Code

import { getHtmlElemByClassNm} from './utils/index.js'

// 검색 기능
const postProcessor = class {
    searchTargets: any;
    searchTitleElem : HTMLInputElement = new HTMLInputElement();
    constructor(){
        this.searchTargets = document.querySelectorAll('[data-search]') as NodeListOf<HTMLElement>
        this.searchTitleElem = getHtmlElemByClassNm('post-search-input',document) as HTMLInputElement
    }
    searchTitle(){
        let query = this.searchTitleElem.value
        this.searchTargets.forEach((post:HTMLElement)=>{
            let postTitle = getHtmlElemByClassNm('title',post)?.textContent
            query.split('').map(word=>{
                if(postTitle!.toLowerCase().indexOf(word.toLowerCase())!=-1){ //항목 포함 
                    if(post.classList.contains('hidden'))post.classList.remove('hidden')
                }else{
                    if(!post.classList.contains('hidden'))post.classList.add('hidden')
                }
            })
        })
    }
    connectEvtHandler(){
        this.searchTitleElem.addEventListener('keydown',this.searchTitle)
    }
}
const postProcessorInst = new postProcessor()
postProcessorInst.searchTitle()

Solution

From

searchTitleElem : HTMLInputElement = new HTMLInputElement();

To

searchTitleElem : HTMLInputElement|null = null;

Link

https://stackoverflow.com/questions/26220243/instantiating-new-htmlelement-in-typescript

WHY ?

searchTitleElem : HTMLInputElement = new HTMLInputElement();

All the HTMLELements (ex, HTMLDiv ... ) has constructor in itself

HTMLInputElement()

has constructor initself

BUT

You can't construct DOM elements using normal constructors because you're supposed to go through document.createElement. This is basically for technical reasons relating to how browsers implement these objects.

For example

searchTitleElem = document.createElement('div') as HTMLDivElement

BUT

What I want here is to assign specific 'type' ,
so code written for solution might be the ideal case