오류1.

App.js 파일을 App.tsx 로 변경하였고, 변경하자마자 난 오류이다. 오류가 난 파일들이 js, jsx 파일이길래 App.tsx 에서 js 파일을 불러와서 발생하는 오류인 것 같아 MainPage 컴포넌트만 tsx 로 바꿔보았다. 예상대로 오류가 없어졌고 위의 예상이 맞았다.

Untitled

해결방법

how to import js file in tsx file

"compilerOptions": {
    "allowJs": true
}

tsconfig 파일에 추가하면 tsx 파일에 js 파일을 import 해올 수 있다. 이 부분은 일시적으로 허용해놓고 순차적으로 바꿔나간 뒤 파일들이 어느정도 변경되면 수정하려고 한다. 꽤 많은 컴포넌트들을 변경해야하기 때문에 어쩔 수 없는 선택이다.

Untitled

App.tsx 로 변경 후에는 따로 해줄 작업이 없었다. JSX.Element 타입을 지정해줄까 고민했지만 똑똑한 타스가 타입을 잘 추론해주기 때문에 불필요하다고 생각하여 굳이 찾아보지 않았다. 현업에서는 어떻게 쓸까?

이펙티브 타입스크립트 책에 따르면 숙련된 개발자는 불필요한 타입 명시를 하지 않는다고 되어있따. 옳은 선택인듯!