1. strict 옵션 적용
(1) strict 옵션이란?
tsconfig.json에서 설정할 수 있는 옵션으로 default가 false로 설정되어있다. true로 바꿔주면 strict 옵션이 적용된다. strict 옵션을 활성화하면 타입스크립트가 조금 더 엄격하게 타입을 평가하게 되면서 안전하게 코딩을 할 수 있게 한다.
나는 이미 적용된 환경에서 작업을 진행했다.
2. 타입 가드 및 타입 추론 사용
(1) 타입 단언 없애기
headers에 token을 넣어줘야 했는데 Authorization의 타입은 'string | number | boolean' 이고, token의 타입은 'string | null'이라 null값이 Authorization에 들어갈 수가 없다는 경고문이 떴다. 그래서 토큰의 타입을 string으로 단언해줬었다.
타입 단언을 없애기 위해 typeof를 사용해서 타입 가드를 했다. 하지만 애초에 여기서 토큰을 받아서 헤더에 설정해주는게 맞나 싶기도 하고, 또 추후 react-query를 적용하여 한 차례 리팩토링을 할 예정이라 좀 더 고민이 필요해보인다.
두 번째는 useRef의 any다. 작성할 당시 useRef의 타입을 어떤 식으로 써야할지 몰라서(ㅋㅋ) 서칭을 한다고 했던 게 잊고 지나가버렸다. HTMLFormElement로 타입을 설정해주고, 함수 안에서 옵셔널 체이닝을 사용하여 formRef에 에러 없이 안전하게 접근한다.
(2) any 없애기
try catch 부분의 error의 타입이 any였는데 이부분에서 고생을 좀 했다.
처음엔 'instanceof Error'로 타입 가드를 해주려고 했는데 Error의 response 키를 가져오지를 못했다.
왜인가 해서 Error를 컨트롤 클릭해서 상세 정의를 봤는데 타입스크립트에서 정의하는 Error 타입 안에 response라는 값이 없기 때문이었다.
나는 response.data.details의 에러 메세지를 alert창으로 띄우고 싶었다. server에서 validator 함수에서 친절하게 에러 형태에 따라 message를 보내주고 있기 때문이었다. 이 메세지들이 response.data.details 안에 담겨있다.
그래서 콘솔로 에러 로그를 찍어봤다. 에러 로그에 AxiosError가 보인다. 이거다 싶어서 헐레벌떡 AxiosError 타입 정의를 살펴보니 내가 원하는 response값이 있었다.
instanceof AxiosError를 사용해서 타입 가드를 해주자 원하는 방향으로 작동한다.
