리액트,리덕스,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
.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"]
}
.prettierrc
{
"singleQuote": true,
"parser": "typescript",
"semi": true,
"useTabs": true,
"printWidth": 120
}
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
Author And Source
이 문제에 관하여(리액트,리덕스,Typescript 프로젝트 시작하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yesparrot/리액트Typescript-프로젝트-시작하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)