타입스크립트 (13) 타입스크립트와 리액트

김태완·2024년 11월 22일

리액트 앱 설치 후 타입스크립트 사용을 위한 dependencies 설치하기
리액트 앱이 어디서든 잘 동작할 수 있도록 tsconfig.json 파일 생성하기
js 파일을 타입스크립트 파일로 바꿔주는 과정이 필요하다. 자바스크립트로 만들어진 프로젝트를 타입스크립트로 바꿀때는 한번에 확장자를 바꾸게되면 너무 많은 오류가 발생하기에 하나씩 바꿔주는게 좋다.
CommonJS 및 ES Module간의 호환성을 더 쉽게 관리하기 위한 옵션 설정이 필요하다.
"esModuleInterop": true 와 같은 옵션을 활용하면 CommonJS 모듈을 ES6 디폴트 익스포트처럼 사용할 수 있게한다.
- 외부 라이브러리, 패키지를 설치하고 불러올때, default로 내보낸 값이 없는 패키지, 모듈가 있을 수 있다. 이런 경우 그냥 import 해서 값을 불러올때 사용한다.
타입스크립트 컴파일러는 기본적으로 jsx 문법을 해석할 수 없기에 jsx 옵션을 켜줘야한다. "jsx": "react-jsx"
createRoot 메서드는 null 값을 취급하지 않지만 타입스크립트에서는 null 값에 대한 우려를 하고 있다. 그래서 다음과 같이 타입 단언을 해준다.

state를 하나 만들어서 초기값에 빈 문자열을 넣어줬다.
그렇게 setText에 마우스를 올려보면 타입이 ~<string>이라고 나온다. 그래서 setText(123)을 해서 다른 타입을 넣어주면 오류가 발생한다.
초기값에 아무것도 넣어주지 않으면 undefined가 타입으로 추론된다.
초기값이 없다면 위와 같이 타입을 정의해줘도 되지만, 이렇게 하면 string | undefined 처럼 유니언 타입으로 나온다. 그래서 어지간하면 초기값을 설정해주는 것이 좋다.
input 태그에 onChange 이벤트 핸들러 사용한다면 아래와 같이 타입을 설정해주는 것이 좋다. any 타입이나 e.value를 객체형태로 지정해주는 것은 좋은 방법이 아니다.

동일한 타입이 반복될때는 별도의 ts 파일을 만들어서 불러와서 사용하는 것이 좋다.
- 타입 별칭들도 export 를 통해서 내보낼 수 있다.
이렇게 useReducer에 타입을 지정하게되면, action 타입을 소문자로 잘못입력한다던가 할때 사전에 오류를 잡을 수 있어서 굉장히 편리하다.

외부 라이브러리를 사용할때 타입패키지를 적용하는지 확인하고 사용하면 좋다.
이렇게 TS가 표시되어있는 라이브러리가 있는가하면
이렇게 DT 로 표시되어있는 라이브러리가 있다. 이 친구는 마우스를 올려보면 @types/lodash로 제공한다고 적혀있다. 이런 부분을 확인하면 좋다.
@types가 붙어있는 패키지들을 Definitely Types라고 부른다.