TypeScript 개발 환경 설정 (ESLint, Prettier)

1. TypeScript 소개

2. TypeScript 개발 환경 설정

3. ESLint

4. Prettier

---

1. TypeScript 소개

[그림 1] Typescript

TypeScript는 JavaScript의 슈퍼셋인 오픈 소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다.  TypeScript는 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어이다. 자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작한다.

 

JavaScript는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있다. 이에 반해 TypeScript는 정적 타입의 컴파일 언어이며 TypeScript 컴파일러 또는 바벨(Babel)을 통해 JavaScript 코드로 변환된다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있다.

 

 

Q. TypeScript를 사용하는 이유는 무엇일까?

• 높은 수준의 코드 탐색과 디버깅

TypeScript는 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거한다. 또한 코드 자동완성이나 실행 전 피드백을 제공하여 작업과 동시에 디버깅이 가능해 생산성을 향상시킬 수 있다.

• JavaScript와 호환

TypeScript는 JavaScript와 100% 호환된다. 따라서 JavaScript를 사용할 수 있는 곳이라면 TypeScript도 쓸 수 있다. TypeScript는 웹과 앱을 구현하는 JavaScript와 동일한 용도로 사용 가능하다.

• 강력한 생태계

TypeScript는 오래된 언어가 아님에도 불구하고 대부분의 라이브러리들이 TypeScript를 지원한다.

 

 

2. TypeScript 개발 환경 설정

$ npm init -y
$ npm i -D typescript ts-node @types/node

먼저, 위의 명령어를 통해 TypeScript를 사용하기 위해 필요한 모듈을 설치한다.

 

const str:string = 'hello typescript'
console.log(str)

설치가 완료되었다면, index.ts라는 파일을 생성한 후 아래의 코드를 적는다.

 

터미널에서 node index.ts를 치면 제대로 실행되지 않는다. 이는 node가 typescript를 실행할 수 있는 기능이 없기 때문이다.

따라서, 아래 명령어로 JavaScript 파일로 변환하여 실행해야 한다.

$ npx tsc index.ts

위 명령어를 실행하면, index.ts 파일이 있는 디렉토리에 index.js 파일이 생성된다.

 

index.js가 생성되는 디렉토리의 경로를 따로 지정해주고 싶다면 webpack에서는 webpack.config.js 파일을 이용했던 것처럼 TypeScript에서는 tsconfig.json이라는 파일을 이용하면 된다.

 

tsconfig.json 파일을 생성한 후 아래와 같이 작성한다.

{
    "compilerOptions": {
        "outDir": "./dist/"
    }
}

위 코드는 index.js 파일을 dist 디렉토리 안에 생성하겠다는 의미이다.

 

이후 터미널에 아래의 명령어를 입력하면 파일이 제대로 실행된다.

$ npx tsc --build

 

그 외에 다른 설정들도 tsconfig.json 파일에서 설정할 수 있다.

{
    "compilerOptions": {
        "outDir": "./dist",
        "esModuleInterop": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "strict": true,
        "baseUrl": ".",
        "typeRoots": ["./node_modules/@types", "./@types"],
        "paths": {
            "@core/*": ["src/core/*"],
            "*": ["@types/*"]
        }
    },
    "ts-node": {
        "files": true,
        "require": ["tsconfig-paths/register"]
    }
}

 

 

3. ESLint

[그림 2] ESLint

ESLint는 JavaScript에서 발견된 문제 패턴을 해결하기 위한 정적 코드 분석 도구이다. 

 

ESLint를 사용하려면 아래의 명령어로 eslint 모듈을 설치해야 한다.

$ npm i -D eslint

 

프로젝트 내부에 .eslintrc라는 파일을 생성한 후 아래와 같이 적어준다.

{
    "extends": [
        "plugin:prettier/recommended"
    ],
    "plugins": [
        "prettier"
    ],
    "rules": {
        "prettier/prettier": [
            "error",
            {
                "endOfLine": "auto"
            }
        ]
    }
}

 

 

4. Prettier

[그림 3] Prettier

Prettier는 코드를 읽어 들여서 사용자가 지정한 '옵션'에 따라 코드를 다시 포맷팅(정렬)하는 "코드 포맷터"이다. 코드 스타일에 초점을 맞추고 있기 때문에, 코드 품질을 위해 사용하는 ESLint와는 성격이 다르다.

 

아래의 명령어로 Prettier에 관련된 모듈을 설치한다.

$ npm i -D prettier eslint-plugin-prettier eslint-config-prettier

 

프로젝트 내부에 .prettierrc라는 파일을 생성한 후 아래와 같이 적어준다.

{
    "printWidth": 120,
    "tabWidth": 4,
    "singleQuote": true,
    "trailingComma": "all",
    "semi": false
}

 

이제 VSCode의 설정에 들어간다.

[그림 4] VSCode 설정

검색창에 default format이라고 입력한 후 Editor: Default Formatter 부분을 Prettier로 지정한다.