TypeScript
본 내용은 한 입 크기로 잘라먹는 타입스크립트 강의를 바탕으로 작성되었습니다. 사진 자료의 출처 또한 위 강의입니다.
TypeScript 프로젝트 시작하기
가장 먼저 프로젝트 디렉토리를 생성한다. 터미널에서 mkdir 커맨드 또는 GUI에서 단순히 폴더를 만들어 주면 된다.
VSCode에서 프로젝트 폴더를 열어주자.
Node.js 패키지 초기화
터미널에서 다음 커맨드를 통해 Node.js 패키지를 초기화 해준다.
npm init (-y)y 옵션을 설정해 주면 default 값으로 설정된 package.json을 만들어 줄 수 있다.
@types/node 설치하기
다음으로, Node.js 내장 기능들의 타입 정보를 담고 있는 @types/node 패키지를 설치해 준다.
npm i @types/node타입스크립트 코드는 코드 실행 전 타입 검사 과정을 거치게 된다. 이 때 타입이 선언되지 않은 코드를 만나게 되면 오류가 발생하는데 Node.js의 기본 기능 또한 예외가 아니다. 따라서 Node.js 기본 기능들의 타입을 별도로 선언하기 위해 이 패키지를 설치해야 하는 것이다.
@types/node 패키지가 설치되면 node_modules 폴더에 @types 폴더가 생성된다.
폴더 내부에는 내장 함수 등 Node.js가 기본 제공하는 기능들에 대한 타입이 선언되어 있는 폴더와 파일들이 존재한다.
타입스크립트 컴파일러(TSC) 설치하기
다음으로 npm의 TypeScript 패키지에 동봉되어 있는 타입스크립트 컴파일러를 설치해 줘야 한다. TSC는 타입스크립트 코드를 자바스크립트 코드로 컴파일 해주는 컴파일러이다.
sudo npm i -g typescript-g 옵션을 사용하면 패키지가 전역으로 설치되어 pc에 설치된 프로그램처럼 터미널에 패키지 이름을 호출해 사용할 수 있게 된다.
설치 여부를 확인하기 위해 터미널에 다음과 같은 커맨드를 입력해보자.
tsc -v
Version 5.1.3 (설치된 버전에 따라 다를 수 있음)ts-node 설치하기
마지막으로 ts-node를 설치해주면 된다. ts-node는 타입스크립트 파일을 tsc로 자바스크립트 파일로 컴파일하고 node로 실행하는 과정을 명령어 한번으로 줄여주는 도구이다. 타입스크립트 파일은 미리 컴파일 되지 않고 JIT로 변환되어 실행된다.
다음 명령어를 터미널에 입력하자
sudo npm i -g ts-node타입스크립트 실행하기
설치가 완료되었다면 타입스크립트 파일을 생성하고 실행을 해볼 수 있다.
루트 아래에 src 폴더를 생성한 뒤 index 파일을 생성하면 된다. 타입스크립트 파일의 확장자는 .ts 이다.
tsc로 컴파일 후 실행
tsc로 타입스크립트 코드를 컴파일 하기 위해서는 터미널에 다음 커맨드를 입력하면 된다.
tsc src/index.ts컴파일이 완료되면 src 디렉토리에 index.js 가 생성된다. 이 자바스크립트 파일은 node를 이용해 실행시킬 수 있다.
node src/index.jsts-node로 실행
앞서 tsc를 이용할 때와 비교해 tsc 명령어를 ts-node로만 교체해 주면 된다.
ts-node src/index.ts이제 바로 타입스크립트 파일이 실행된다.
이렇게 타입스크립트 프로젝트를 생성하고 다양한 도구와 패키지 설정을 해 주었다. 다음으로는 타입스크립트 초기설정인 컴파일러 옵션을 설정해 보자.
타입스크립트 컴파일러 옵션 설정하기
컴파일러 옵션
컴파일러 옵션은 타입스크립트의 컴파일 과정에서 세부적인 컴파일 사항(e.g. 컴파일 결과로 나오는 JS 코드의 버전, 타입 오류 검사의 엄격성)들을 말한다.
우리는 컴파일러 옵션을 직접 설정해 줌으로써 프로젝트의 성격에 따라 최적화된 맞춤 설정을 만들어 사용할 수 있다.
컴파일러 옵션 자동 생성
tsc --init위 커맨드로 기본 옵션이 설정된 컴파일러 옵션 파일을 자동 생성할 수 있다. 커맨들를 실행하면 루트 디렉토리 아래에 tsconfig.json 파일이 생성되고 그 내부에는 다양한 컴파일러 옵션들이 설정되어 있을 것이다.
주요 컴파일러 옵션
자동 생성을 사용하지 않고 일일이 직접 설정해 주는 방법도 있다. 루트 디렉토리에 tsconfig.json 파일을 생성해 주고 내부 중괄호({}) 안에 옵션들을 작성해 주면 된다.
주요 컴파일러 옵션에는 다음과 같은 것들이 있다.
include 옵션
include 옵션은 tsc에게 컴파일 할 타입스크립트 파일의 범위와 위치를 알려준다. 가령
{
"include": ["src"]
}와 같이 작성하면 tsc 커맨드 입력시 자동으로 src 폴더 아래의 모든 타입스크립트 파일이 동시에 컴파일 된다.
compilerOptions
compilerOptions 는 실제 컴파일 시 적용되는 옵션들을 작성해 주는 객체이다. 이 내부에는 module , outDir 등등의 옵션들을 작성해 줄 수 있다.
target
target 옵션은 컴파일 결과로 생성되는 JS 코드의 버전을 설정해 준다. ES5, ESNext 등의 값을 설정해 줄 수 있다.
{
"compilerOptions": {
"target": "ESNext",
},
}위와 같이 작성하면 컴파일 결과가 최신 JS 버전으로 나온다. 이 옵션으로 생성되는 JS 코드의 버전을 마음대로 조정할 수 있다.
module
module 옵션은 변환되는 JS 코드의 모듈 시스템을 설정해 준다. CommonJS, ESNext 등의 값을 설정하면 된다.
{
"compilerOptions": {
"module": "ESNext",
},
}이제 변환된 JS 코드는 ES 모듈시스템을 사용하게 된다.
++ 추가로 우리는 module 옵션을 통해 ES Module 시스템을 사용하도록 변경해 주었다. 이 때 프로젝트의 package.json 파일에서 최상위에 type 항목을 module 로 설정해 주어야 프로젝트 전체에 ES Module을 적용할 수 있음을 기억하자.
outDir
outDir 옵션은 컴파일 되어 JS 코드가 생성될 때 그 생성 위치를 결정해 준다.
{
"compilerOptions": {
"outDir": "dist",
},
}tsc를 활용하여 컴파일 하면 컴파일 결과가 dist 폴더에 생성된다.
strict
strict 옵션은 타입스크립트 컴파일러의 타입 검사 엄격함 수준을 정해 준다. strict 옵션을 true 로 설정해 주면 코드가 아주 엄격하게 검사된다.
예를 들어, 옵션을 꺼 두었을 때 함수의 매개변수 타입을 지정해 주지 않아도 오류가 생기지 않지만, 켜 두었을 때는 오류가 생긴다.
{
"compilerOptions": {
"strict": true,
},
}ModuleDetection
타입스크립트의 모든 파일은 기본적으로 전역 파일(모듈)로 취급된다. 예를 들어
// a.ts
const a = 1;
// b.ts
const b = 1;와 같이 서로 다른 파일에 동일한 이름의 변수를 선언하면 이 원리에 따라 오류가 발생한다. 이 오류를 해결하기 위해 각 파일에 모듈 시스템 키워드인 export 또는 import 를 최소 하나 이상 사용해 해당 파일을 로컬(독립) 모듈로 취급되도록 해야 한다.
moduleDetection 옵션은 이를 자동화 해주는 역할을 한다. 옵션 값을 force 로 설정할 경우 자동으로 모든 타입스크립트 파일이 로컬 모듈로 취급된다.
{
"compilerOptions": {
"moduleDetection": "force",
},
}ts-node
앞서 살펴본 moduleDetection 옵션을 활성화 한 뒤 타입스크립트 파일에서 모듈 시스템을 사용하게 되면 ts-node로 실행 시에 오류가 발생하게 된다. ts-node가 기본적으로 CommonJS를 사용하기 때문이다. 따라서, ts-node 옵션 안에 esm 옵션을 true 로 설정해 주면 ts-node가 앞으로 ES Module 시스템으로 동작하게 된다.
{
"ts-node": {
"esm": true,
},
}여기까지 타입스크립트 프로젝트를 초기 세팅하는 과정을 쭉 살펴 보았다. 컴파일러 옵션에는 이보다 훨씬 많은 옵션들이 존재하고, 여기서 그 다양한 옵션들을 확인해 볼 수 있다.
