타입스크립트 프로젝트 만들기

타입스크립트를 만들기 전에 노드제이에스 프로젝트는 디렉터리를 하나 만들고 package.json이란 이름의 파일을 만드는 것으로 시작합니다. 

 

npm init 명령을 실행해서 생성합니다. 

package.json은 노드제이에스가 관리하는 패키지 관리 파일로서 프로젝트 정보와 관련 패키지가 기록됩니다. 

{
  "name": "ch02-1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

 

 

- 프로젝트 구현에 필요한 다양한 오픈소스 패키지를 npm install 또는 간단히 npm i 명령으로 설치합니다.

- 이 때 두 가지 옵션을 줄 수 있습니다.

 

npm i --save : 프로젝트를 실행할 때 필요한 패키지로 설치합니다. 패키지 정보가 package.json 파일의 'dependencies' 항목에 등록됩니다.
npm i --save-dev : 프로젝트를 개발할 때만 필요한 패키지로 설치합니다. 패키지 정보가 package.json 파일의 'devDependencies' 항목에 등록됩니다.

- 타입스크립트 프로젝트는 typescript와 ts-node 패키지를 설치합니다.

 

npm i -D typescript ts-node

 

* tsconfig.json 파일 

- 타입스크립트 프로젝트는 타입스크립트 컴파일러의 설정 파일인 tsconfig.json 파일이 있어야 합니다.

- 이 파일은 tsc --init 명령으로 만들 수 있습니다.

 

{
	"compilerOptions": {
	  "module": "CommonJS",
	  "esModuleInterop": true,
	  "target": "es5",
	  "moduleResolution": "node",
	  "outDir": "dist",
	  "baseUrl": ".",
	  "sourceMap": true,
	  "downlevelIteration": true,
	  "noImplicitAny": false,
	  "paths": {"*" : ["node_modules/*"]}
	},
	"include": ["src/**/*"]
  }

 -  complierOptions:  tsc 명령 형식에서 옵션을 나타냅니다. 

 -  include : 대상 파일 목록 (src/**/*은 src의 하위 디렉터리에 있는 모든 파일을 컴파일 대상으로 포함)

 -  module : ES5 자바스크립트 코드는 웹 브라우저와 노드제이에서 양쪽에서 모두 동작해야 합니다. 웹 브라우저에서는 AMD(asynchronous module definition) 방식으로 동작하고, 노드제이에스처럼 웹 브라우저가 아닌 환경에서는 CommonJS 방식으로 동작합니다.  ( amd : 웹 브라우저에서 동작, commonjs : 노드제이에스에서 동작)

 -  moduleResolution : module이 commonjs이면 node amd이면 classic으로 설정

 -  target : 트랜스파일할 대상 자바스크립트 버전을 설정합니다. (대부분 es5를 키값으로 설정)

 -  baseUrl과 outDir : 트랜스파일된 ES5 자바스크립트 파일을 저장하는 디렉터리를 설정합니다. tsc는 tsconfig.json 파일이 있는 디렉터리에서 실행됩니다. 

 -  paths : from 부분을 해석할 때 찾아야 하는 디렉터리를 설정합니다. 

 - esModuleInterop : true 

 - sourceMap : .js 이외에도 .js.map 파일이 만들어집니다. 이 소스맵 파일은 변환된 자바스크립트 코드가 타입스크립트 코드의 어디에 해당하는지를 알려줍니다. 

 

* 모듈 이해하기

- import : 다른 모듈의 기능을 이용하기 위해서 사용하는 키워드

 

import {심벌 목록} from '파일의 상대 경로';

- import * as 구문 

    - import 구문의 또 다른 형태는 as 키워드를 함께 사용하는 것입니다.

 

import * as 심벌 from '파일 상대 경로';

- export : 기능을 제공하는 쪽에서 사용하는 키워드 (interface, class, type, let, const 키워드 앞에도 붙일 수 있습니다.)

 

 

* 외부 패키지를 사용할 때 import 문

- 외부 패키지를 사용할 때 import 문 사용법을 알아보겠습니다. 

- 실습을 위해 다음처럼 chance와 ramda라는 패키지를 설치합니다.

- chance 패키지는 그럴듯한 가짜 데이터(fake data)를 만들어 주는 데 사용되며, ramda는 함수형 유틸리티 패키지입니다.