[리팩토링] TypeScript 전환

환경 설정

관련 라이브러리 설치

      yarn add typescript @types/node @types/react @types/react-dom @types/jest
      yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

tsconfig.json 설정

• tsconfig.path.json파일 확장
• include속성(ts적용 범위)에 craco.config.js를 추가해준다
• 원하는 ts rule를 작성한다

tsconfig.path.json 설정

• alias경로 설정
• tsconfig.json에 path를 작성하면 yarn start시 초기화되기 때문에
  따로 path파일을 만든 후 craco에 등록해준다

craco.config.js 설정

• alias경로를 tsconfig.path.json로 적용하도록 설정

  yarn add -D craco-alias

eslintrc.js설정

• parser
  • @typescript-eslint/parser로 설정
• plugins
  • @typescript-eslint 추가
• extends
  • plugin:@typescript-eslint/recommended 추가
• rules
  • react/jsx-filename-extension에 .ts, .tsx추가

@types react-router-dom 설치

• 기존의 react-router-dom사용 시 오류

  yarn add @types/react-router-dom

트러블 슈팅

문제점
기존의 .js와 .jsx파일에 tsLint가 적용되어 많은 오류가 발생했다
점진적으로 ts를 적용하기 위해선 기존의 전환 전의 js,jsx파일엔 tslint가 적용되면 안된다

해결책
eslintrc.js파일에서 rules프로퍼티에 js, jsx문법으로 인해 오류가 나는 rule들을 꺼놓고
overrides프로퍼티를 사용하여 ts, tsx파일에만 rule을 켜주어 해결했다!

rules: {
    ...
    '@typescript-eslint/explicit-module-boundary-types': ['off'],
    '@typescript-eslint/no-empty-function': ['off'],
    '@typescript-eslint/no-unused-vars': ['off'],
},

 overrides: [
    {
      files: ['*.ts', '*.tsx'],
      rules: {
        '@typescript-eslint/explicit-module-boundary-types': ['error'],
        '@typescript-eslint/no-empty-function': ['error'],
        '@typescript-eslint/no-unused-vars': ['error'],
      },
    },
  ],