[TypeScript] 타입스크립트 리액트 시작하기

타입스크립트 리액트 시작하기

• npx create-react-app .
• npm i @types/node @types/react @types/react-dom @types/jest (타입스크립트 적용을 위해 타입 선언 패키지 추가)
• tsconfig.json 작성
  • target: TS 파일을 어떤 버전의 JS로 바꿔줄지 정하는 부분
  • module: JS 파일간 import 문법 구현 시 어떤 문법을 쓸지 정하는 부분
    • CommonJS는 require, ESM은 import 문법을 사용함
    • 광범위한 호환성을 원할 때에는 ES5 & CommonJS로 설정

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS", // react가 어디서든 잘 작동되게 ES5 & CommonJS
    "strict": true,
    "allowJs": true, // js 파일도 컴파일할 수 있도록
  },
  "include": ["src"]
}

• 이 때 오류가 발생한다.
  • App.js, index.js에는 jsx 문법을 쓰고 있는데, TS는 기본적으로 js 확장자의 jsx 문법을 해석할 수 없다.
  • 따라서 해당 파일의 확장자를 js가 아니라 jsx로 변경해주어야 한다. 

• js -> jsx -> tsx로 바꾸면 import문부터 에러가 발생한다.
  • 기본 내보내기(esm에서 default로 내보내는 값)가 없다는 내용인데, default로 내보내는 값이 없어도 그냥 불러올 수 있도록 컴파일러 옵션을 수정해줘야 한다.
  • esModuleInterop: true로 설정

• 다음으로 jsx 코드 부분에서도 에러가 발생한다.
  • TS 컴파일러는 기본적으로 jsx 문법을 해석할 수 없기 때문에 jsx: "react-jsx" 옵션을 추가해준다.

• 마지막으로 document.getElementById~ 부분에서의 에러를 해결해보자.
  
  • Document.getElementById의 반환값은 HTMLElement | null 값인데, 이때 null 값은 매개 변수에 할당될 수 없다.
  • 따라서 null이 아닌 값만 들어오도록 해줘야 한다.
  • document.getElementById('root')! 처럼 non null 단언을 해주거나 as HTMLElement로 타입 선언을 해주면 된다.

 

---

 

**출처: 한 입 크기로 잘라먹는 타입스크립트 (인프런, 이정환 강사님)