[typescript] event.target에서 value 프로퍼티를 못 찾는 에러 해결방법

문제 상황 : 타입스크립트 초기 세팅 후 event.target에서 value프로퍼티를 찾지못하는 에러 발생

 

 

const 무언가하는핸들러 = (event: React.ChangeEvent<HTMLInputElement>) => {
	setValue(event.target.value); 
    // value 부분이 빨간줄이 쳐지고 value프로퍼티를 찾지 못 한다는 에러발생!

	...
}

---

처음 시도한 방법 : HTMLInputElement로 다운 캐스팅하여 시도해 본다.

 

const 무언가하는핸들러 = (event: React.ChangeEvent<HTMLInputElement>) => {
	setValue((event.target as HTMLInputElement).value); 
    // 여전히 value 부분이 빨간줄이 쳐지고 value프로퍼티를 찾지 못 한다는 에러발생!
	// 하지만 힌트에 컴파일러 옵션의 lib옵션에 dom을 추가해보라는 힌트 발견!
	...
}

---

타입스크립트 컴파일 옵션 lib옵션 이란 "컴파일 과정에 사용될 라이브러리 파일 설정" 이다.
이 부분에 "dom"을 추가하면 dom api를 사용할 수 있다.

 

//tsconfig.json
{
...
"compilerOptions": {
	...
    "lib": ["dom", "dom.iterable", "esnext"],
    ...
    },
...
}

 

event.target.value 에러가 사라 졌다.

-끝-