리액트,리덕스,Typescript 프로젝트 시작하기

create react app으로 시작하기

(with typescript)

npx create-react-app [프로젝트명] --template typescript

tsconfig.json 초기설정

• tsconfig.json 파일이 자동 생성되어있을 것이다.
• 리액트 jsx를 사용하기 위해, compilorOptions jsx 속성에 "react"를 추가한다.

"compilorOptions":  "jsx": "react"

tsconfig

• 디렉토리에 tsconfig.json 파일이 있다면 해당 디렉토리가 Typescript 프로젝트의 루트이다.
• tsconfig.json 파일을 참고해서 타입을 검사하게되어있다.

옵션(참고)

target : 어떤 JS(=ES) 버전으로 컴파일 할지 설정
module : 어떤 모듈 포맷을 사용할지 결정
strict : 타입 체크 옵션을 모두 사용할지 설정.
allowJs : 자바스크립트 파일 컴파일 허용 여부
outDir : ts->js 컴파일 할 때 어디에 저장할지 여부 "./dist"면 dist폴더를 만들고 dist에
컴파일 된 js 파일이 저장된다.

Eslint(with airbnb style)

npm i -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier

1. .eslintrc

{
  "extends": [
    "prettier",
    "airbnb",
    "airbnb/hooks",
    "prettier/react",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"]
}

2. .prettierrc

{
  "singleQuote": true,
  "parser": "typescript",
  "semi": true,
  "useTabs": true,
  "printWidth": 120
}

3. package.json

{
  //...
  "scripts": {
    "prettier": "prettier --write --config ./.prettierrc \"**/*.{ts,tsx}\"",
    "lint": "eslint './src/**/*.{ts,tsx}'",
    "lint:fix": "eslint --fix './src/**/*.{ts,tsx}'"
  }
  //...
}

알아둬야할 점,

타입 스크립트를 사용할땐 .ts 리액트 jsx를 사용할 땐 .tsx가 확장자이다.
ts-node 라이브러리를 설치하면 컴파일 하지않고 ts파일 실행 가능
ex )npm run ts-node ./src/practice.js

https://flamingotiger.github.io/javascript/eslint-setup/
https://gist.github.com/SeonHyungJo/f93fd203f7dc5bb3657437a1cad29c48
https://velog.io/@jhj46456/tsconfig.json-%EC%A3%BC%EC%9A%94-%EC%98%B5%EC%85%98-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0
https://react.vlpt.us/using-typescript/01-practice.html