[TS] 실습 2. 점진적인 타입 적용 절차 및 설정

자바스크립트 프로젝트에 타입스크립트 적용하는 절차

1. 타입스크립트 프로젝트 환경 구성

• 프로젝트 생성 후 NPM 초기화 명령어로 package.json 파일을 생성
• 프로젝트 폴더에서 npm i typescript -D 로 타입스크립트 라이브러리를 설치한다.
• 타입스크립트 설정 파일 tsconfig.json 을 생성하고 기본 값을 추가한다.
• 서비스 코드가 포함된 JS 파일을 TS 파일로 변환한다.
• tsc 로 TS 파일을 JS 파일로 변환한다.

2. 엄격하지 않은 타입 환경(loose type)에서 프로젝트 돌려보기

• 프로젝트에 테스트 코드가 있다면 테스트 코드가 통과하는지 먼저 확인
• js 파일을 모두 ts 파일로 변경
• 타입스크립트 컴파일 에러가 나는 것 위주로 에러가 나지 않게 수정
  • 기능 사소하게라도 변경 x
• 테스트 코드 확인

3. 명시적인 any 선언하기

• 프로젝트 테스트 코드 확인
• tsconfig.json 에 noImplicitAny: true 를 추가한다.
• 가능한 타입을 적용할 수 있는 모든 곳에 타입을 적용한다.
  • 라이브러리를 쓰는 경우 관련 라이브러리를 찾아 설치한다.
  • 타입을 정하기 어려운 곳이 있다면 명시적으로라도 any 를 선언한다.
• 테스트 코드가 통과하는지 확인한다.

4. strict 모드 설정하기

• tsconfig.json 에 설정 추가

{
  "strict": true,
  "strictNullChecks": true,
  "strictFunctionTypes": true,
  "strictBindCallApply": true,
  "strictPropertyInitialization": true,
  "noImplicitThis": true,
  "alwaysStrict": true,
}

• any로 되어 있는 타입을 최대한 더 적절한 타입으로 변환
• as와 같은 키워드를 최대한 사용하지 않도록 고민해서 변경

---

점진적인 타입 적용을 위한 프로젝트 환경 구성

프로젝트 라이브러리 설치

1. 프로젝트 폴더 생성
2. npm init -y 로 package.json 파일 생성
3. 아래 명령어로 타입스크립트 및 문법 검사, 코드 정리 도구 라이브러리 추가

npm i -D typescript @babel/core @babel/preset-env @babel/preset-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier eslint-plugin-prettier

ESLint 설정 후 ESLint 플러그인 에러 해결

• 프로젝트 폴더 바로 아래에 ESLint 설정 파일 추가

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['prettier', '@typescript-eslint'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: true,
        useTabs: false,
        tabWidth: 2,
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
      },
    ],
  },
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
};

• VSCode에서 ESLint 플러그인 설정이 안됐다면

1. ESLint 플러그인 설치
2. ctrl + shift + p 키 누른 후 open setting(json) 입력 후 선택
3. setting.json 파일에 ESLint 플러그인 관련 설정 추가

{
  // ... <-- 기존 내용을 꼭 유지한 상태에서 아래 내용을 추가하고 이 주석은 제거할 것
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "eslint.workingDirectories": [
      {"mode": "auto"}
  ],
  "eslint.validate": [
      "javascript",
      "typescript"
  ],
}

   4. ctrl + , 에서 format on save 체크 해제 확인