[리팩토링] TypeScript 전환

yoon Y·2022년 2월 28일

[3rd_Project] MonthSub

목록 보기

10/11

환경 설정

tsconfig.json 설정

해당 프로젝트를 컴파일하기 위해 필요한 루트 파일들과 각종 컴파일러 옵션들을 설정하는 파일이다.
위치한 디렉토리는 TypeScript 프로젝트의 루트 디렉토리가 된다.
= Ts파일을 Js로 어떻게 컴파일할 것인가를 설정해주는 파일.

ts버전 CRA설치로 생기는 tsconfig.json의 옵션을 그대로 가져왔다.

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

{
  "extends": "./tsconfig.path.json",
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"], // 컴파일 할 때 포함 될 라이브러리 목록
    "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "module": "esnext",
    "strict": true  // typescript의 type 검사 옵션 중 strict* 관련된 모든 것을 true로 만들게 된다.
  },
  "include": ["src", "craco.config.js"],
  "exclude": ["node_modules"]
}

tsconfig.path.json 설정

alias사용 이유?
상대경로로 밑에서 경로를 접근하는것보다 위에서 내려가는게 빠를 수 있다. 그리고 import 경로를 깔끔하게 만들 수 있다.

tsconfig.json에 paths 옵션을 바로 추가하면 CRA의 웹 팩 관련 문제로 옵션이 자동으로 삭제되는 현상때문에 별도의 파일로 설정해줬다.

절대 경로를 사용하기 위한 alias경로 설정
baseUrl을 설정하고 절대경로를 쓸 폴더의 경로를 지정해준다.
tsconfig.json에 path를 작성하면 yarn start시 초기화되기 때문에
따로 path파일을 만든 후 craco에 등록해준다

{
  // JSON의 유효성을 검사하기 위한 라이브러리
  "$schema": "http://json-schema.org/draft-07/schema#", 
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@atom": ["./components/atom"],
      "@molecules": ["./components/molecules"],
      "@organisms": ["./components/organisms"],
      "@templates": ["./components/templates"],
      "@hooks": ["./hooks"],
      "@pages": ["./pages"],
      "@utils": ["./utils"],
      "@utils/*": ["./utils/*"],
      "@apis": ["./apis"],
      "@styles": ["./styles"],
      "@styles/*": ["./styles/*"],
      "@contexts": ["./contexts"],
      "@contexts/*": ["./contexts/*"],
      "@images": ["./images"],
      "@images/*": ["./images/*"],
      "@constants": ["./constants"],
      "@types": ["./types"],
      "@/*": ["./*"]
    }
  }
}

craco.config.js 설정

alias경로를 tsconfig.path.json로 적용하도록 설정
```
yarn add -D craco-alias
```

const CracoAlias = require('craco-alias');

module.exports = {
  babel: {
    presets: ['@emotion/babel-preset-css-prop'], //이모션의 css props문법을 이해하기 위한 프리셋
  },
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig', // 어떤 언어 설정을 사용할 건지 
        baseUrl: './src', // 루트 폴더
        tsConfigPath: './tsconfig.path.json', // 경로를 설정한 파일이름
      },
    },
  ],
};

eslintrc.js설정

typescript-eslint
ESLint의 TypeScript 지원을 위한 패키지

parser
- @typescript-eslint/parser로 설정
- Typescript의 구문 분석
plugins
- @typescript-eslint 추가
- 원하는 규칙 집합을 확장해주는 역할
extends
- plugin:@typescript-eslint/recommended 추가
- 추가한 플러그인에서 사용할 규칙을 설정
rules
- react/jsx-filename-extension에 .ts, .tsx추가
- elint rule이 적용될 파일 확장자 설정

트러블 슈팅

문제점
기존의 .js와 .jsx파일에 tsLint 규칙까지 적용되어 많은 오류가 발생했다
점진적으로 ts를 적용하기 위해선 기존의 전환 전의 js,jsx파일엔 tsLint가 적용되면 안된다. (esLint만 적용되어야 함)

해결책
eslintrc.js파일에서 rules프로퍼티에 js, jsx문법으로 인해 오류가 나는 tsLint 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'],
      },
    },
  ],

yoon Y

#프론트엔드

이전 포스트

[리팩토링] StoryBook

다음 포스트