Typescript 세팅

Typescript를 배우기 시작하면서 세팅을 정리해보기.
(typescript를 사용하기 위한 기초 세팅이므로 react와의 연결은 따로 정리할 예정)
여러 velog들을 참고해서 한번에 볼 수 있도록 정리했음.

tsconfig.json 생성

tsc --init 명령어를 사용해서 tsconfig.json을 만들어주어야 한다.

내용은 다음과 같이 만들어준다.

{
 "compilerOptions"    : {
     "module" : "commonjs",
     "target" : "ES2015",
     "sourceMap" : true,
     "outDir" : "dist",
 },
 "include" : ["src/**/*"],
 "exclude" : ["node_modules"]
}

package.json 생성

npm init 명령어를 사용해서 package.json을 만들어주어야 한다.
내용은 다음과 같이 구성해준다.
세부적인 dependency는 본인이 원하는 것을 설치해주면 된다.

scripts 부분에 대한 설명을 하자면,
index.ts라는 typescript 파일을 만들고나서 tsc 라는 명령어를 입력하게 되면, typescript를 javascript로 변환해준다.

매번 일일이 할 수 없기 때문에
tsc-watch 라는 패키지를 설치하고나서, scripts 부분을
tsc-watch --onSuccess \" node dist/index.js\" " 라고 고쳐주게 되면 yarn start라는 명령어만으로 typescript 파일을 실행시킬 수 있다.
(위에서 만들어두었던 tsconfig.json 파일에서 "outDir" : "dist" 라고 설정을 해주어야 dist 폴더에 index.js파일이 생성되기 때문)

{
  "name": "typechain",
  "version": "1.0.0",
  "description": "Learning Typescript by making a Blockchain with it",
  "main": "index.js",
  "repository": "개인 repository 주소",
  "author": "본인의 아이디",
  "license": "MIT",
  "scripts": {
    "start": "tsc-watch --onSuccess \" node dist/index.js\" "
  },
  "devDependencies": {
    "@types/node": "^17.0.7",
    "@typescript-eslint/eslint-plugin": "^5.8.1",
    "@typescript-eslint/parser": "^5.8.1",
    "eslint": "^8.6.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.25.4",
    "ts-node": "^10.4.0",
    "tsc-watch": "^4.6.0",
    "typescript": "^4.5.4"
  },
  "dependencies": {
    "crypto-js": "^4.1.1"
  }
}

이렇게까지 하면 기본적인 typescript 실행을 할 수 있다.

• 추가로 vscode에서 typescript를 편하게 사용하려면 ESlint와 Prettier 설정을 해주어야 한다. (자동 정렬 및 에러 경고)

ESlint 설정

1. npm i -D eslint 명령어를 통해 ESlint 설치
2. npx eslint -init 명령어를 통해 .eslintrc.json 파일 생성 및 설정

ESlint 설정을 하고 나면 index.ts 파일 첫 줄에 빨간 줄이 뜨는 경우가 있다. (error : cannnot find ~~ tsconfig.json)
이런 경우 추가 설정을 해주어야 한다.
(코드 내 ...은 이외의 다른 파일들을 의미한다.)

1. eslintrc.json 파일 수정

{
	...
	"project" : ["./tsconfig.eslint.json", "./tsconfig.json"].
    	...
}

2. tsconfig.json 파일 수정

{
	...
    "include" : [
    	...,
    	".eslintrc.json",
        ...,
    ]
    ...
}

3. tsconfig.eslint.json 파일 수정

{
	"include" : [".eslintrc.json"]
}

위와 같이 수정을 한 뒤, 프로젝트를 재부팅하게 되면 에러가 사라져 있다.

Prettier 설정

1. npm i -D prettier 명령어를 통해 prettier 설치

2. npm i -D eslint-config-prettier eslint-plugin-prettier 명령어를 통해 ESlint와 Prettier 호환

   eslint-config-prettier는 Prettier와 충돌되는 ESLint 규칙들을 무시하는 설정이고, eslint-plugin-prettier는 Prettier를 사용해 포맷팅을 하도록 ESLint 규칙을 추가하는 플러그인입니다.
   (출처 url)

3. .prettierrc.json 파일을 생성해서 기본 설정을 해준다.

{
  "printWidth": 80,			// 한 줄의 라인 수
  "tabWidth": 2,			// tab의 너비
  "useTabs": false,			// tab 사용 여부
  "semi": true,				// ; 사용 여부
  "singleQuote": true,			// 'string' 사용 여부
  "quoteProps": "consistent",		// 객체 property의 따옴표 여부
  "trailingComma": "es5",		// 끝에 , 사용 여부
  "bracketSpacing": true,		// Object literal에 띄어쓰기 사용 여부 (ex: { foo: bar })
  "arrowParens": "always",		// 함수에서 인자에 괄호 사용 여부 (ex: (x) => y)
  "endOfLine": "lf"			// 라인 엔딩 지정
}

추가로 ESLint도 호환이 되도록 설정해주어야 한다.

{
  ...
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  ...
}

위와 같이 ESLint와 Prettier를 설정해두면, 자동 정렬, 문법적 오류 체크 등 편리하게 typescript 코드를 작성할 수 있도록 도와준다.

참고 사이트
1. VSCode에서 ESLint와 Prettier (+ TypeScript) 사용하기
2. TypeScript + VSCode 환경설정 ( 2019.12.27 ) in window10
3. prettier.io