TypeScript 복습하기 #1 초기세팅

TypeScript HandBook이나 구글 검색으로 공부하면서 코딩 과제에 적용하면서 조금은 쓸 줄 알게 되었지만, 아직은 겉핥기밖에 못하기에 심도 있게 파고들기 위해 TypeScript를 복습하려 한다.

인프런 TypeScript + React 강의를 들으며 따라해볼 생각인데 그 전에 내 입맛대로 초기세팅을 진행한다

CRA로 typescript template를 설치한다. template 오타다

필요없는 파일들을 삭제하고 오른쪽처럼 세팅을 진행했다.

index.js

reset css 또한 styled-reset과 자주 쓰던걸로 미리 세팅

react-router-dom 세팅완료

tsconfig.json 설정은 CRA 기본설정에 baseUrl만 src로 지정해놨다.

마지막으로 git에 연결 https://github.com/beginal/typescriptlearn

앞으로 쓸지 확실하게 모르는 redux나 themeProvider, jest 설정은 쓰게 된다면 그때 하자.

추가로 ESLint와 Prettier 설정을 추가한다

npm i -D prettier eslint-plugin-prettier eslint-config-prettier
npm i -D typescript eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

eslint-config-prettier는 eslint와 prettier 사이 겹치는 룰을 삭제해주는 역할
eslint-plugin-prettier는 eslint에 prettier의 포맷팅을 추가해준다고 한다.

아래쪽에 typescript-eslint는 typescript에서 eslint를 사용한다면 설치해줘야 하는듯 하다.

추가로 prettier 설정과 eslint 설정을 진행한다.

.prettierrc
{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "semi": true,
  "useTabs": false,
  "javascript.format.enable": false,
  "typescript.format.enable": false
}

.eslintrc

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "env": {
    "node": true
  },
    "extends": ["plugin:prettier/recommended",]
}

prettier/recommended는 eslint-plugin-prettier와 eslint-config-prettier를 적용시킨다.
prettier/typescript-eslint는 prettier와 충돌하는 @typescript-eslint 규칙을 비활성화 시킨다.