[typescript] custom hook 과 typescript

개요

회원가입 기능을 만드는 도중 닉네임과 아이디, 회원가입의 값을 다루는 기능이의 코드가 중복된다는 점을 알고 custom hook을 사용하여 구현하였다. 확장자를 ts로 설정하다보니 타입스크립트를 적용하게 되었는데 CustomHook 작성 중 오류가 발생하였다.

 

에러(1)

- 이벤트리스터에 타입을 지정해 줘야해서 ChangeEvent 라는 타입을 지정해 주었고 에러가 발생하였다.

- 에러를 해석해 보면 'value' 속성이 'EventTarget & Element' 유형에 없습니다. 로 해석할 수 있다.

 

해결(1)

- 위 사진처럼 parameter 의 타입과 리스너의 타입을 지정해주었더니 해결되었다.

 

에러(2)

- 그 이후에 에러가 하나 더 발생하였는데 custom hook을 import해서 사용하는 Components에서 에러가 발생하였는데, 검색해보니 custom hook의 리턴 값에도 타입을 지정해주면 해결된다는 것이였다.

 

해결(2)

- 위 사진처럼 custom hook의 리턴값에도 타입을 지정해주었더니 import 해서 사용하던 Components의 에러도 해결되었다.