[TypeScript] click() 함수 실행시 타입 에러 해결하기

배경

	<div id="user-id">
		<input className="mf-edit-nick" />
		<span className="mf-nick">domHardy</span>
		<img src="/public/check.png"/>
	</div>

대략적으로 이러한 html 코드가 있는데 여기서 img를 클릭하면 input에 click 이벤트가 자동으로 실행돼서 input에 있던 텍스트들이 전부 하이라이트 되도록 하고 싶었다.

다시 말해서, 닉네임 수정 버튼을 눌렀을 때 현재 닉네임이 input 창에 표시되는데 그 텍스트가 전부 드래그돼서 하이라이트 된 상태이고 그 상태에서 글자 하나만 눌러도 원래 input 창에 있는 텍스트가 전부 사라지고 새롭게 입력하는 문자가 들어가도록 하고 싶었다.

문제

일단 의도한대로 하기 위해서는 input 창에 자동으로 click 이벤트를 발생시켜야 했다. 클릭을 하지 않더라도 click 이벤트가 실행되도록 강제해야 했다.

document.getElementsByClassName("mf-edit-nick")[0].click();

그래서 이렇게 했더니 typeScript 에서 에러가 발생했다. 에러 메세지는
Property 'click' does not exist on type 'Element'
위와 같다.

자바스크립트의 click() 함수 MDN 공식문서를 확인해보면 HTMLElement.click() 이라고 제목이 돼있다. 이 부분에서 문제가 생겼던 것이다.

해결방법

타입을 잘 정해주면 문제가 해결되는 것이었다.

const editInput : HTMLElement = document.getElementsByClassName("mf-edit-nick")[0] as HTMLElement;

editInput.click();

위 코드와 같이 HTMLElement 타입을 제대로 명시해주면 click() 함수를 확인하고 에러를 발생시키지 않는다.

출처:

(https://stackoverflow.com/questions/4067469/selecting-all-text-in-html-text-input-when-clicked?rq=1)
(https://stackoverflow.com/questions/46204003/trigger-click-in-typescript-property-click-does-not-exist-on-type-element)