Configure TypeScript Dev Environment (w/ Code, npm)

Photo by Emile Perron on Unsplash

필자는 React와 Next를 이용한 프로젝트를 진행하면서 타입스크립트를 자주 사용하곤 했는데, 이 경우에는 CRA(Create-React-App), CNA(Create-Next-App) 커맨드를 통해 템플릿으로 타입스크립트를 추가하여 개발 환경을 구축하는 것이 어렵지 않다.

하지만, 앞서 이야기한 CRA 혹은 CNA 패키지를 사용하지 않거나 하는 등의 경우에는 직접 타입스크립트 개발 환경을 구축해야 한다. 바닐라 타입스크립트를 이용한 SPA를 구축해 보며 알고 있었던, 혹은 알게 된 타입스크립트 개발 환경 구축에 대한 내용을 정리하고 공유하려 한다.

타입스크립트 설치

먼저 자바스크립트로 컴파일하는 것을 도와줄 타입스크립트 컴파일러가 필요하다.

Visual Studio에서 타입스크립트 개발 환경을 구축하는 방법에는 Nuget을 이용해 타입스크립트 패키지를 설치하는 방법과, Visual Studio 확장 프로그램을 통해 설치하는 방법이 있다.

그리고 Node.js 같은 런타임에서 npm 패키지를 통해 구축하는 방법이 있는데, npm, yarn, pnpm과 같은 의존성 매니저를 사용해 다운로드할 수 있다.

필자는 Visual Studio Code와 npm을 사용하고 있으므로 이 글에서는 이 방법을 기준으로 설명한다.

Node.js

먼저, Node.js가 설치되어 있지 않다면 위의 링크로 접속해 Node.js를 설치해 준다. Node.js는 브라우저 속에서만 구동이 가능하던 자바스크립트를 크롬의 V8 엔진을 이용해 브라우저 밖에서도 실행할 수 있게 해주는 자바스크립트 런타임이다. Node.js를 설치하면서 npm도 같이 설치된다.

node -v
npm -v

설치가 완료되었다면 터미널에서 위의 명령어를 통해 올바르게 설치되었는지 확인할 수 있다.

터미널에서 전역으로 설치하기(L), 프로젝트에서 의존성 패키지로 설치하기(R)

npm install -g typescript

그리고 터미널에서 타입스크립트 패키지를 설치해 준다. -g 옵션을 이용하면 프로젝트에 상관없이 전역에서 이용할 수 있도록 설치할 수 있고, -d 옵션을 이용하면 해당 프로젝트의 devDependency로 설치할 수 있다.

tsc -v

Node.js 설치 여부를 확인할 때처럼 타입스크립트도 터미널에 tsc -v 명령어를 입력하여 설치 여부를 확인할 수 있다.

만약 전역으로 설치한 것이 아닌, 프로젝트의 의존성 패키지로 설치했을 경우에는 위와 같이 명령어를 입력할 경우 command not found: tsc 에러가 발생하는데, 이 경우에는 npm tsc -v 명령어를 통해 설치 여부를 확인해 보자.

타입스크립트 컴파일

Code에서 프로젝트 디렉터리를 열고, 터미널을 열어준다. 상단의 터미널 탭에서 새 터미널 열기, 혹은 ‘Control + `(백 틱)’ 단축어를 통해 열 수 있다.

컴파일하기에 앞서, 어떻게 컴파일할지에 대한 옵션을 정해줄 수 있다. 터미널에 touch tsconfig.json 명령어를 입력하거나, 좌측의 파일 탐색기에서 ‘tsconfig.json’으로 파일을 생성해서 현재 프로젝트의 타입스크립트 컴파일 옵션을 정의해 줄 수 있다.

아래에서 tsconfig.json의 자세한 레퍼런스를 확인할 수 있다.

TSConfig Reference - Docs on every TSConfig option

컴파일 전 타입스크립트 코드(L), 컴파일된 자바스크립트 코드(R)

드디어 컴파일 단계까지 왔다.

이제 간단한 타입스크립트 코드를 작성하고, 터미널에 tsc 명령어를 입력해 컴파일해 보자. 타입스크립트를 전역으로 설치하지 않았다면 npx tsc 명령어를 통해 컴파일할 수 있다.

번외: watch mode와 Hot Reload

tsconfig.json의 “compilerOptions” 옵션 중, watch 모드가 있다. 이 옵션은 불리언 값으로 설정하거나, tsc --watch 명령어를 통해 모드를 켜고 컴파일 하게 되면 지정된 경로의 타입스크립트 파일의 변화를 감시하고 변경점을 적용해 자바스크립트로 컴파일한다.

tsconfig.json 옵션 설정 (L), package.json에서 watch 모드 스크립트 설정하기 (R)

이 기능을 이용해 package.json 파일의 스크립트로 만들어 마치 React의 CRA 패키지에 프리셋으로 설정되어 있는 development 모드의 Hot Reload 기능처럼 사용할 수 있다.

package.json의 “scripts”에 "dev": "tsc --watch" 로 설정해 주고, 터미널에 npm run dev 명령어를 입력해 보자.

좌측의 타입스크립트 코드가 저장과 동시에 우측의 자바스크립트 코드로 실시간으로 변경되었다.

타입스크립트 파일을 저장할 때마다 코드가 변경점을 반영해 자바스크립트 파일로 컴파일되는 것을 볼 수 있다. ‘Control + C’ 를 누르면 종료되며, Live Server Extension과도 함께 사용할 수 있다.