주노 정

유저의 눈을 가진 프론트엔드 개발자입니다.
근거있는 코드를 작성하기 위해 노력합니다.

3 분 소요

타입스크립트 설치

우선 npm init 명령어를 통해 Node.js 패키지를 초기화하고, Node.js 내장 기능(내장 함수, 클래스 등)의 타입 정보를 담고있는 @types/node 패키지를 설치한다.

> npm init
> npm i @types/node

이후 타입스크립트 컴파일러를 설치한다. 타입스크립트 컴파일러(tsc)는 npm의 TypeScript 패키지에 동봉되어있다. 아래의 코드에서는 -g 옵션을 통해 전역으로 타입스크립트 컴파일러를 사용할 수 있도록 설치하였다. (Mac 유저의 경우 sudo를 꼭 붙여야 한다.)

> sudo npm i -g typescript

타입스크립트 컴파일 및 실행

타입스크립트는 컴파일하면 자바스크립트 코드를 반환한다고 했다. 타입스크립트 코드를 작성한 뒤에 tsc [경로]를 터미널에 입력하면 컴파일한 자바스크립트 파일이 생성되는 것을 확인할 수 있다.

> tsc src/index.ts
> node src/index.js
Hello TypeScript !

만약 tsc 명령어를 실행했을 때 error TS2792: Cannot find module 'undici-types'와 같은 오류메시지가 뜬다면 node_modules 폴더를 삭제하고 새로 @types/node를 20.8.0 버전으로 설치하시면 됩니다.

npm i @types/node@20.8.0

변환과정 없이 바로 실행하기

tsx 명령어를 통해 ts 코드를 js 코드로 변환하고 실행하는 일련의 과정을 생략하고 바로 실행할 수 있다. tsx는 TypeScript Execute의 약자로 타입스크립트를 설치할 때와 마찬가지로 npm에서 설치할 수 있다.

(참고로, ts-node와 tsx는 동일한 기능을 하지만, Node 20 버전 이후부터는 ts-node가 더 이상 동작하지 않으므로 tsx를 사용한다. 23.10월부터 Node.js의 LTS가 20대로 업데이트 되었기 때문에 tsx 사용을 권장한다 !)

> sudo npm i -g tsx
> tsx src/index.ts
Hello TypeScript !

아래에 추가로 소개하겠지만, ts-node를 사용하면서, 컴파일할 자바스크립트 코드를 ES 모듈 시스템으로 설정하고 싶다면, 아래와 같이 tsconfig.json에 “ts-node” 옵션에 “esm” 옵션을 따로 설정해야 한다. package.json의 “type” 옵션 또한 다음과 같이 수정해야 한다.

// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist",
    "moduleDetection": "force"
  },
  "ts-node": {
    "esm": true
  },
  "include": ["src"]
}

// package.json
{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/node": "20.8"
  }
}

타입스크립트 컴파일러 옵션 설정

타입스크립트의 컴파일 과정에서 얼마나 엄격하게 타입 오류를 검사할 건지 혹은 컴파일 결과 생성되는 자바스크립트 코드의 버전은 어떻게 할 것인지 등의 컴파일의 아주 세부적인 사항들을 컴파일러 옵션이라고 한다. 타입스크립트는 tsconfig.json파일을 통해 프로그래머가 자신의 입맛에 맞게 이러한 세부적인 사항을 조정할 수 있게 했다. 결과적으로 프로젝트의 성격에 따라 최적화된 맞춤 설정을 만들어 사용할 수 있다.

컴파일러 옵션을 설정하는 가장 쉽고 빠른 방법은 자동 생성 도구를 이용하는 것이다. 터미널에 다음 명령어를 입력하면 자동으로 기본 설정이 완료된 tsconfig.json 파일이 생성된다.

> tsc --init

생성된 tsconfig.json 파일을 보면 많은 옵션이 있지만 대부분의 옵션이 주석처리 되어 있어 실제 적용되고 있는 옵션은 몇 개 없는 것을 확인할 수 있다.

기초 옵션

include 옵션

include 옵션은 tsc에게 컴파일할 타입스크립트 파일의 범위와 위치를 알려주는 옵션이다. 이 옵션을 이용하면 파일이 아주 많은 상황에 일일이 파일을 입력할 필요 없이 tsc만 입력해 컴파일할 수 있다.

// tsconfig.json
{
  "include": ["src"]
}

이렇게 설정하면 tsc 명령어만 입력해도 src 폴더 아래의 모든 타입스크립트 파일이 동시에 컴파일 된다.

target 옵션

target 옵션은 컴파일 결과 생성되는 자바스크립트 코드의 버전을 설정하는 옵션이다.

다음과 같이 target 옵션을 설정한다.

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES5" // "ESNext"
  },
  "include": ["src"]
}

target 옵션이 ES5로 지정이 되어있기 때문에, 컴파일할 타입스크립트 파일에 ES6의 화살표 함수와 같이 ES5에서 지원하지 않는 문법이 존재할 경우, 컴파일된 자바스크립트 파일에는 함수 표현식으로 변환되는 것을 확인할 수 있다.

target 옵션을 최신 자바스크립트 버전으로 설정하고 싶을 경우 ESNext로 변경하면 된다.

이렇듯 target 옵션을 이용하면 생성되는 자바스크립트 코드의 버전을 마음대로 조정할 수 있다.

module 옵션

module 옵션은 변환되는 자바스크립트의 모듈 시스템을 설정한다.

다음과 같이 module 옵션을 추가할 수 있다.

// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "CommonJS" // "ESNext"
  },
  "include": ["src"]
}

타입스크립트는 기본적으로 자바스크립트의 ES 모듈 시스템과 유사하게 내보낼 때는 export를 사용하고 불러올 때는 import를 사용하는데, "module" 옵션에 "CommonJS"를 입력할 경우 컴파일되는 자바스크립트 파일은 CommonJS 파일로 변환된다. 만약 컴파일된 자바스크립트 파일이 ES 모듈 시스템을 사용하게 할 경우 "module" 옵션에 "ESNext"를 입력하면 된다.

outDir 옵션

outDir 옵션은 컴파일 결과 생성할 자바스크립트 코드의 위치를 지정할 수 있는 옵션이다.

다음과 같이 설정할 수 있다.

// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist"
  },
  "include": ["src"]
}

tsc를 이용해 컴파일하면 컴파일 결과가 루트의 dist 폴더에 생성된다.

strict 옵션

strict 옵션은 tsc의 타입 검사 엄격함의 정도를 정한다.

// tsconfig.json
{
  "compilerOptions": {
    ...
    "strict": true
  },
  "include": ["src"]
}

strict 하위에는 더욱 다양한 strict 옵션들이 존재하며, "strict"를 true로 설정할 경우 모든 strict 옵션이 true로 변경되는 것과 동일하게 동작한다.

ModuleDetection 옵션

타입스크립트의 모든 파일은 기본적으로 전역 파일(모듈)로 취급된다. 따라서 a.ts와 b.ts같이 두 개의 각각 다른 타입스크립트 파일을 만들고 각 파일 내에 동일한 이름의 변수를 선언하면 오류가 발생하게 된다.

이럴 때에는 moduleDetection 옵션을 force로 설정할 경우 모든 타입스크립트 파일을 로컬 모듈(독립 모듈)로 취급하도록 할 수 있다.

// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist",
    "moduleDetection": "force"
  },
  "include": ["src"]
}

출처

위 포스트는 이정환 님의 인프런: 한 입 크기로 잘라먹는 타입스크립트(TypeScript)를 수강한 뒤 복습 차원에서 저의 생각을 정리 및 추가하여 업로드했음을 알립니다.

댓글남기기

참고