Typescript Basics & Basic Types

목차

• Using "Watch Mode"
• Compiling the Entire Project / Multiple Files
• Including & Excluding Files
• Setting a Compilation Target

✧ Watch Mode 이용하기

• 변경사항이 있을 때마다 tsc 커맨드를 실행하는 것은 어쩐지 번거롭다. 변경사항을 자동으로 업데이트하고 컴파일 해주는 watch mode를 사용하면 훨씬 편리하다.

tsc app.ts --watch
tsc app.ts -w

• 관찰(watch) 모드를 설정하면 컴파일 오류를 실시간으로 받아볼 수 있기 때문에 매번 컴파일 오류를 확인해줄 필요도 없다. 이처럼 관찰 모드는 생산성 향상을 위한 우수한 기능을 가지고 있다. 다만, 관찰 모드를 사용할 때는 해당 파일을 구체적으로 지정해야 한다는 단점이 있고, 이는 큰 규모의 프로젝트에는 적합하지 않을 것이다.

✧ 전체 프로젝트 컴파일과 다수의 파일

• 관찰(watch) 모드는 생산성을 높여주지만, 하나의 파일에만 국한 되어야 한다는 단점이 있었다. 타입스크립트 파일이 두개 이상이라면 사용할 수 없기 때문이다.

tsc --init

• tsc --init 명령어를 사용하면 파일을 지정하지 않아도 관찰 모드로 전체 프로젝트 폴더를 확인하고 업데이트 사항이 적용될 수 있게 하며, 해당 프로젝트 폴더의 모든 타입스크립트 파일을 다시 컴파일할 수 있게 된다. 즉, 이 프로젝트 폴더가 타입스크립트로 관리해야 할 프로젝트라고 타입스크립트에게 알려주는 명령어라고 보면 된다. 해당 명령어가 실행되는 폴더의 모든 항목을 타입스크립트에 알려주는 역할을 하게 되며, 해당 프로젝트를 타입스크립트 프로젝트라고 타입스크립트에 처음에 알려주기 위해 단 한 번만 실행하면 된다. (따라서, 올바른 폴더 위치에 명령어를 사용하는 것이 중요하다.) 설치가 끝나면, 이제 해당 프로젝트는 타입스크립트가 관리하게 되며, tsconfig.json 파일 역시 생성된다.

tsconfig.json 파일은 타입스크립트가 관리해야 하는 해당 파일이 포함된 프로젝트와 모든 폴더와 하위 폴더를 참고하기 위한 파일이다. 파일을 보면 많은 옵션을 설정할 수 있는 항목들이 있다. 한 번 확인해보자.

tsc;

• 그런 후, 이제 tsc 명령어를 특정 파일을 지정하지 않고 한 번만 실행하면, 타입스크립트는 모든 타입스크립트 파일, 즉 해당 프로젝트의 모든 타입스크립트 파일을 컴파일 하게 된다. 그리고 tsc 명령어 실행이 끝나면 모든 타입스크립트 파일이 컴파일된 javascript 파일이 생성된다.

tsc --watch
tsc -w

• 마지막으로 모든 파일을 관찰 모드로 결합할 수 있도록 watch 모드를 실행한다. 이 역시 앞에서 tsc init으로 모든 파일들을 타입스크립트로 관리해주기로 했으므로, 특정 파일을 지정하지 않아도 모든 파일에 관찰 모드를 사용할 수 있다. 이제 변경 사항을 적용하면 변경된 파일이 다시 자동으로 컴파일 되며, 자바스크립트 파일로 변경사항이 반영되는 걸 알 수 있다.

✧ 파일 포함 및 제외하기

• 여러 파일로 작업할 때 바닐라 자바스크립트의 모듈을 사용하여 파일을 가져올 수가 있다. 지금의 프로젝트를 살펴보면, index.html을 통해 두 파일을 한 꺼번에 가져오고 있다.

<script src="app.js" defer></script>
<script src="analytics.js" defer></script>

• 앞으로 소개할 방식을 사용하여 이제 두 개의 파일을 프로젝트로서 관리할 수 있고 여러 파일도 컴파일 할 수 있게 된다. tsconfig.json 파일을 살펴보자.

tsconfig.json

• tsconfig.json 파일은 프로젝트의 파일들을 어떻게 컴파일 해야 하는지 타입스크립트에게 알려주는 역할을 한다. 해당 파일의 compilerOptions 설정 다음에 우리가 설정할 수 있는 옵션에 대해서 알아보자.

exclude

• 이 옵션들은 컴파일러나 컴파일 단계 동작에 영향을 미치지 않고 대신 컴파일러가 이 프로젝트에서 작동하는 방식을 의미한다.

  "exclude": [
    "" // would be the default
  ]

• exclude 옵션을 설정해보자. 여기에 exclude을 추가하면 이는 문자열이 된다. 그리고 그 값으로 전체 프로젝트를 상대로 tsc 명령어를 실행할 때 컴파일 되서는 안되는 파일을 분석해서 컴파일을 막아준다. 예를 들어,

  "exclude": [
    "analytics.ts" // would be the default
  ]

• analytics.ts 파일을 컴파일에서 제외(exclude)하고 싶다면 추가한다. 저장하고 tsc 명령어를 실행하면, analytics.ts만 제외하고 모든 타입스크립트 파일이 컴파일 된다.

  "exclude": [
    "*.dev.ts" // would be the default
  ]

• 만약 와일드카드 문자인 별표(*)를 앞에 추가하면 타입스크립트는 dev.ts가 포함된 이름인 모든 파일을 무시하게 된다.

  "exclude": [
    "**/*.dev.ts" // would be the default
  ]

• 만약 **/*를 앞에 추가하면 모든 폴더에서 이와 같은 패턴(dev.ts)의 모든 파일을 무시하게 된다.

  "exclude": [
    "node_modules" // would be the default
  ]

• 실제로 자주 추가하는 옵션인 node_modules 폴더를 추가해서 컴파일에서 제외(exclude)시킨다.

📍 node_modules 폴더에는 package.json에 설치한 모든 종속성와 이 종속성들의 모든 종속성이 포함되어 있다. 즉, 변경하지 말아야 하는 타사 라이브러리를 가져오는 위치이다. 또한 종속성의 타사 라이브러리들 중 일부가 타입스크립트 코드를 제공하는 경우 당연히 컴파일 되는 것을 막아야 할 것이다. 컴파일을 하게 되면 연산 과정이 느려져서 최악의 경우에 프로젝트가 망가질 수도 있기 때문이다.

• 하지만, exclude 옵션을 아예 지정하지 않게 되면,

//   "exclude": [
//     "node_modules" // would be the default
//   ]

• node_modules는 기본 설정상 자동으로 제외된다. 따라서 굳이 node_modules를 컴파일에서 제외시키기 위해 exclude 옵션을 추가할 필요는 없다. 즉, exclude 라는 컴파일 제외 옵션이 있긴 하지만, 제외하고자 하는 항목이 node_modules인 경우 exclude 설정을 추가할 필요는 전혀 없다는 의미이다.

include

  "include": [
    "app.ts"
  ]

• include는 exclude와 반대 개념의 작업을 수행한다. include는 컴파일 과정에 포함시킬 파일을 타입스크립트에 의도적으로 알려서 include 옵션에 포함되지 않은 그 어떤 파일이나 폴더도 컴파일되지 않도록 한다. 하지만 include 설정을 하면 컴파일하고자 하는 '모든' 항목을 포함시켜야 한다. include 설정을 했을 때 포함되지 않는 파일은 컴파일 되지 않기 때문에 주의해서 사용해야만 한다.

files

  "files": [
    "app.ts"
  ]

• files 설정은 include와 다소 비슷하지만 include는 제외하고자 하는 항목으로 전체 폴더를 지정할 수 있지만, files 설정은 컴파일 하고자 하는 '개발 파일'만을 지정할 수 있다. 해당 옵션은 규모가 작은 프로젝트에 사용하면 좋을 것이다.

정리

• 실제로는 많은 옵션 기능을 사용하지 않으므로, 기본 컴파일 기능이나 프로젝트 관리 옵션만 사용하게 될 것이다. 물론 컴파일러 자체와 컴파일 단계에서의 작동 방식에 대해 지정할 수 있는 방법은 다양하다.

✧ 컴파일 대상 설정하기

• 이제 컴파일러로 파일을 관리하는 방법을 알아보자. tsconfig.json 파일의 첫 번째 옵션인 compilerOptions를 살펴보면, 흥미로운 지점이 많다. compilerOptions은 타입스크립트 코드가 컴파일되는 방식을 관리하는 옵션이다. compilerOptions 에서는 어떤 파일을 컴파일할지, 그리고 컴파일되는 파일이 타입스크립트로 어떻게 처리되어야 하는지를 설정할 수 있다. 살펴보면, 기본적으로 설정된 옵션(주석 처리된)들이 많은 걸 알 수 있다. 각각의 옵션에는 주석처리와 함께 간단한 설명이 있는데, 대부분의 옵션들은 실무 프로젝트에서 그다지 중요하지 않을 가능성이 높으므로 모든 옵션을 설정하거나 고려할 필요는 없다.

compilerOptions의 target 옵션

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
    "module": "commonjs"
  }
}

• target 옵션은 compilerOptions 에 기본적으로 설정되어 있다. 이 옵션으로는 어떤 자바스크립트 '버전'을 대상으로 코드를 컴파일할 것인지 타입스크립트에게 알려줄 수 있다. 타입스크립트는 자바스크립트 코드에 존재하지 않는 타입 주석과 같은 새로운 기능만 컴파일하는 것이 아니기 때문이다. 따라서 이 옵션은 특정 브라우저에서 실행되는 자바스크립트로 코드를 컴파일한다. target을 설정하면, 어떤 브라우저가 디컴파일된 코드를 지원하는지 정의할 것이다. 해당 프로젝트의 target의 기본 값은 es5 인데, 이는 모든 유형의 코드가 컴파일되었다는 의미다. tsc 명령어를 실행하여 모든 파일을 컴파일해보자.

app.ts

let age: number;
age = 30;

const userName = "Maximilian";
console.log(userName);

app.js

"use strict";
var age;
age = 30;
var userName = "Maximilian";
console.log(userName);

• app.ts는 let과 const를 사용하고 있는데, app.js는 var를 이용하고 있는 걸 알 수 있다. 이는 target 옵션의 기본 값은 es5이고, es5에는 let과 const가 포함되어 있지 않기 때문에 일어난 일이다. 여기서 알 수 있는 좋은 점은 타입스크립트를 사용하여 이전 브라우저에서도 작동하는 코드를 생성할 수 있다는 점이다.

정리

• 물론 target 옵션을 사용하는 것은 전적으로 선택에 달려있다. 그리고 타입스크립트로 굳이 이런 작업을 수행하지 않아도 된다. 자바스크립트 변환을 지원하는 다른 빌드 도구들도 충분히 많기 때문이다. 혹은 어플리케이션이 최신 브라우저에서만 실행되어야 하기 때문에 최신 브라우저에서만 작동하는 코드로 구성해야 하는 경우도 있을 때라면 굳이 target 옵션을 이렇게 사용할 필요는 없을 것이다.

• 당연히, target 옵션에서 기본 값으로 선택하는 자바스크립트 버전이 최신일 수록 생성되는 코드는 더 간결해지며, 이는 타입스크립트가 점차 더 적은 양의 코드를 컴파일하며 존재하지 않는 기능에 대해 작업을 해야하는 경우가 줄어들기 때문일 것이다. 따라서 컴파일된 코드는 target 옵션 값이 최신 버전일 수록 더 간결하고 짧아진다.

  
  

✦ 출처

---

🚨 해당 포스팅은 Udemy의 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS 강의를 베이스로 한 기록입니다.
✍🏻 강의 git repo 바로가기