JS 프로젝트 TS로 리팩토링 하기

0. 개요

- 타입스크립트 초기설정
- NavBar.tsx로 리팩토링

 

 

 

1. 작업 상세 내용

0) tsconfig.json 기본 설정

{
  "compilerOptions": {
    "allowJs": true,
    "target": "ES5",
    "outDir": "./dist",
    "moduleResolution": "Node",
    "lib": ["ES2015", "DOM", "DOM.Iterable"]
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules", "dist"]
}

 

1) jsconfig.json 파일 삭제, tsconfig.json에 내용 추가

{
  "compilerOptions": {
    "jsx": "react",
    "baseUrl": "./src",
    "allowJs": true,
    "target": "ES5",
    "outDir": "./dist",
    "moduleResolution": "Node",
    "lib": ["ES2015", "DOM", "DOM.Iterable"],
    "esModuleInterop": true
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules", "dist"]
}

 

2) 추가한 설정

 

a. "jsx": "react"
`'--jsx' 플래그를 제공하지 않으면 JSX를 사용할 수 없습니다.(ts.17004)`라는 오류를 해결하기 위해 TypeScript Version을 변경하면 됐으나 Use Workspace Version이 존재하지 않는 문제가 발생했습니다.

해결책으로는 `tsconfig.json`의 파일의 `"compilerOptions"` 안에 `"jsx": "react"` 를 추가해서 해결했습니다. 

`npx create-react-app my-app --template typescript`로 CRA에 typescript 템플릿을 적용하면 `"jsx": "react-jsx"`가 기본으로 설정되어 있는데 JS 프로젝트를 리팩토링 하는 것이 아닌 CRA로 처음부터 TS로 시작했다면 해당 내용을 `"jsx": "react"` 로 변경하면 해결됩니다.

 

 

b. "esModuleInterop": true
esModuleInterop 오류를 해결하기 위해 import 문에 `* as`를 붙여주면 해결되는 문제였으나 (예시: import * as React from "react";) 모든 import문을 수정하기 번거로워 tsconfig 파일에 해당 설정을 추가했습니다.

 

 

c. "baseUrl": "./src"

프로젝트의 기본 디렉토리를 src로 설정하였습니다.

 

 

참고 사이트

1. TS 핸드북
https://joshua1988.github.io/ts/etc/convert-js-to-ts.html#%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EC%A0%88%EC%B0%A8

2. `"jsx": "react"` 오류 해결
https://steadily-worked.tistory.com/632