나만의 react boilerplate 만들기 - (3) TypeScript로 전환

기존 JS -> TS로 환경설정을 변경했다.

패키지 주소: https://www.npmjs.com/package/fe-jhw-create-react-app

명령어: npx fe-jhw-create-react-app [project name]

TS 설치

typescript 4.4.2버전을 설치했다.

최신버전인 4.9.4는 내 개발환경과 제대로 호환이 되지 않아 쓸 수 없었다. 그래서 현재 CRA가 사용하고 있는 4.4.2버전을 선택했다.

webpack config 설정

fork-ts-checker-webpack-plugin 을 추가했다.

번들시에 타입검사를 별도의 프로세스에서 실행하여 빌드 성능을 향상시키는 플러그인이다.

기본적으로 tsconfig의 설정을 참조한다.

tsconfig 설정

{
  "compilerOptions": {
    // Emit Configuration
    "noEmit": true,

    // Type Checking Configuration
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "exactOptionalPropertyTypes": false,
    "noFallthroughCasesInSwitch": true,
    "noImplicitThis": true,
    "noPropertyAccessFromIndexSignature": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noImplicitAny": true,
    "noImplicitOverride": true,
    "noImplicitReturns": true,
    // Strict Rules
    "alwaysStrict": true,
    "strictBindCallApply": true,
    "strictFunctionTypes": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,
    "useUnknownInCatchVariables": true,

    // Modules Configuration
    "baseUrl": "./",
    "module": "esnext",
    "moduleResolution": "node",

    // Language and Environment Configuration
    "target": "esnext",
    "jsx": "react-jsx",

    // JavaScript Support Confuguration
    "allowJs": true,
    "checkJs": true,

    // Interop Constraints Configuration
    "esModuleInterop": true,
    "isolatedModules": true
  },
  "include": ["src"]
}

• noEmit: true : babel이 JS 파일을 생성하기 때문에 true로 해서 파일을 생성하지 않도록 한다. 컴파일러는 타입체크만 한다.
• target: esnext 컴파일된 JS코드의 버전이다. esnext는 현 버전의 TS가 지원하는 최신 JS버전이다.
• jsx: react-jsx : .tsx -> .js (JSX 코드는 _jsx()함수의 호출로 변환된다.)
• isolatedModules: true: 모든 소스코드파일을 모듈로만들기를 강제한다. (코드 안에 import or export 가 있으면 모듈) , babel을 사용하고 모듈기반으로 개발하기 때문에 true로 한다.

babel config 설정

@babel/preset-typescript 을 추가했다.

babel이 TS코드를 트랜스파일할 수 있게 해준다. (타입 체크는 안하고 TS부분을 없애버린다. 타입 체크는 fork-ts-checker-webpack-plugin을 통해 병렬적으로 TSC가 한다.)

에디터 설정

PNP를 활용하는 yarn berry를 패키지매니저로 사용하고 있기 때문에 vscode에 몇가지 설정을 해줬다.

yarn dlx @yarnpkg/sdks // editor SDKs와 설정 생성
yarn sdks base // 기본 SDK 생성 후 설정 적용

JEST 설정

필요한 의존성들을 설치해준다.

yarn add @types/jest @types/testing-library__jest-dom ts-jest -D

jest.config.js 을 수정해준다.

module.exports = {
  preset: "ts-jest",
  rootDir: "../..",
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["<rootDir>/config/jest/setupTests.js"],
  transform: {
    "^.+\\.(js|jsx|ts|tsx)$": "ts-jest",
  },
}

참고: https://jforj.tistory.com/252

린트 설정

필요한 의존성들을 설치해준다.

yarn add @typescript-eslint/parser -D

얘가 있어야 TS코드를 린트할 수 있다.

eslintrc.js를 설정해준다.

module.exports = {
  root: true,

  env: {
    es6: true,
    node: true,
    browser: true,
  },

  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: { jsx: true },
    jsx: true,
    useJSXTextNode: true,
  },

  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'eslint-config-prettier',
    'plugin:react/recommended',
  ],
  plugins: ['@typescript-eslint', 'import', 'prettier', 'react', 'react-hooks'],
  settings: { react: { version: 'detect' } },

  rules: {
    /// 생략...
  }
}

parser를 @typescript-eslint/parser로 지정해주고, 프리티어와 충돌하지 않도록 eslint-config-prettier도 주고, ts lint를 위해 plugin:@typescript-eslint/recommended를 추가했다. 그 외에 여러 룰들을 다른 사람들의 자료를 참고해서 설정해줬다.