CRA에서 typescript 적용하기

Typesciprt를 react에 적용하는 2가지 방법
1. CRA에 적용하기(CRA공식문서)
2. 수동으로 webpack부터 전부 설정하기(공식문서참고,김정환블로그)
우선은 CRA에 적용하는 방법부터 살펴보기로 하자!

1. CRA 프로젝트 생성

npx create-react-app 프로젝트이름 --template typescript
npm i --save react react-dom
npm i --save-dev @types/react @types/react-dom

• CRA는 착하게도 간단하게 저 명령어만 사용하면 typescript까지 지원을 해준다.

2. Eslint prettier 설정

• eslint가 typescript를 lint 할 수 있도록 허용해주는 parser인 @typescript-eslint/parser
• typescript에 구체화된 ESLINT rule들을 잔뜩 포함하는 플러그인 @typescript-eslint/eslint-plugin
• react에서 타입스크립트를 사용하려면 eslint-plugin-react 의존성 필요
  위의 3가지를 설치해보자
  npm i --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react

2-1 위의 명령어를 실행한 뒤 .eslint.rc를 설정해주자

module.exports = {
  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
  extends: [
    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
    "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
  ],
  parserOptions: {
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: "module", // Allows for the use of imports
    ecmaFeatures: {
      jsx: true // Allows for the parsing of JSX
    }
  },
  rules: {
  },
  settings: {
    react: {
      version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
    }
  }
};

• rules 부분에 Lint할 조건들을 적어주면 되기도 하지만 prettier config를 통해서 바로 formatting으로 해보자

2-2 prettier 설정

• prettier와 prettier와 충돌을 일으키는 ESLint 규칙들을 비활성화 시키는 config인 eslint-config-prettier
• ESLint 규칙에 따라 작동하게 해주는 플러그인인 eslint-plugin-prettier

위의 2가지 설치
npm i --save-dev eslint-config-prettier eslint-plugin-prettier

pretter.rc 설정
본인이 원하는 스타일로 설정하고 싶으면 블로그참조, 공식문서

module.exports = {
  semi: true,
  trailingComma: "all",
  singleQuote: true,
  printWidth: 120,
  tabWidth: 4
};

2-3 eslint.rc 다시 수정

module.exports =  {
    parser:  '@typescript-eslint/parser', 
    extends:  [
        'plugin:@typescript-eslint/recommended', 
        'prettier/@typescript-eslint', 
        'plugin:prettier/recommended',  
    ],
    parserOptions:  {
    ecmaVersion:  2018, 
    sourceType:  'module', 
    ecmaFeatures:  {
      jsx:  true,  
    },
    },
    rules:  {
    // 추후 .prettierrc.js 파일에서 설정해줄 예정
    },
    settings:  {
      react:  {
        version:  'detect', 
      },
    },
  };

• 수정된 부분만 바꿔주고 곂치지 않은 내용들은 그대로 유지

3. Vscode settings.json 설정

{
  "eslint.autoFixOnSave": true, // has been deprecated, use editor.codeActionsOnSave 								    // instead 라고 써있었지만 주석 처리를 하면 저장 시 										// formatting이 안되어서 주석을 풀었다.
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": true }
  ],
  {
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.formatOnSave": false
  },
  "[typescriptreact]": {
    "editor.formatOnSave": false
  }
}

• 이미 존재하는 설정들은 대체하고 없는 것들은 추가

---

• https://velog.io/@_jouz_ryul/CRA%EB%A1%9C-typescript-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0