[타입스크립트] 02장 타입스크립트 프로젝트 생성과 관리

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

타입스크립트 개발은 nodejs 프로젝트를 만든 다음, 개발 언어를 타입스크립트로 설정하는 방식으로 진행한다.

 

프로젝트 생성자 관점에서 패키지 설치하기

1. 폴더 만들기

2. 만든 폴더로 이동 후, 터미널에서 npm init (package.json 파일이 생긴다.)

3. npm install -D typescript ts-node (node_modules 디렉터리가 생기고, 각 패키지의 디렉터리들을 확인할 수 있다.)

 

프로젝트 이용자 관점에서 패키지 설치하기

프로젝트를 구현할 때 여러 패키지를 설치하게 되므로 node_modules 디렉터리의 크기가 매우 커진다. 그래서 다른 사람들에게 프로젝트를 전달할 때 node_modules 폴더를 모두 지운다. package.json 파일이 있는 디렉터리의 터미널에서 npm install 또는 npm i 명령어를 실행하면 package.json에 등록된 패키지들이 node_modules 디렉터리에 자동으로 설치된다.

// package.json
{
  "name": "ch02-1",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "dev": "ts-node src",
    "build": "tsc && node dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/chance": "^1.1.3",
    "@types/node": "^20.1.0",
    "@types/ramda": "^0.29.1",
    "ts-node": "^10.9.1",
    "typescript": "^5.0.4"
  },
  "dependencies": {
    "chance": "^1.1.11",
    "ramda": "^0.29.0"
  }
}

 

tsconfig.json 파일 만들기

tsc --init 명령어를 실행하면 타입스크립트 컴파일러의 설정파일인 tsconfig.json 파일이 만들어진다.

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

  },
  "include": [
    "src/**/*"
  ]
}

 

---

02-2 모듈 이해하기

타입스크립트에서는 index.ts와 같은 소스 파일을 모듈(module)이라고 한다.

소스 파일을 하나로 구현해도 되지만, 코드 관리와 유지보수를 편리하기 하기 위해서 모듈마다 고유한 기능을 구현하는 방식으로 소스코드를 분할한다. 이러한 작업을 모듈화(modulization) 라고 한다.

 

export 키워드

작성한 소스코드를 다른 파일에서 동작하게 하려면 export 키워드로 심벌을 내보낸다.

export 키워드는 interface, class, type, let, const 키워드 앞에도 붙일 수 있다.

 

export default 키워드

export default 키워드는 한 모듈이 내보내는 기능 중 오직 1개에만 붙일 수 있다.

export default가 붙은 기능은 import 문으로 불러올 때 중괄호 없이 사용할 수 있다.

export default interface IPerson {
  name: string,
  age: number
}

 

import 키워드

export 키워드로 내보낸 심벌을 사용하기 위해서 import 키워드로 해당 심벌을 불러온다.

import { 심벌목록 } from '파일 상대 경로'
import * as 심벌 from '파일 상대 경로'

import IPerson from './IPerson'

 

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

chance는 가짜 데이터를 만들어 주는 패키지이다.

ramda는 함수형 유틸리티 패키지이다.

npm i -S chance ramda
npm i -D @types/chance @types/ramda

import Chance from 'chance'
import * as R from 'ramda'

 

---

02-3 tsconfig.json 파일 살펴보기

콜론(:)을 기준으로 "키:키값" 형태로 작성한다.

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

  },
  "include": [
    "src/**/*"
  ]
}

 

• compilerOptions

tsc 명령 형식에서 옵션을 나타낸다.

 

• include

compilerOptions의 대상 파일 목록이다.

 

• module

타입스크립트 소스코드가 컴파일되어 만들어진 자바스크립트 소스코드는 웹 브라우저와 nodejs 모두 동작해야 한다. 그런데 웹 브라우저와 nodejs는 물리적으로 동작하는 방식이 달라서 자바스크립트 코드 또한 웹 브라우저랑 nodejs에서 다르게 동작한다. 따라서 tsconfig.js 파일에서 module 키는 동작 대상이 웹 브라우저인지 nodejs인지 구분해줘야 한다.

 

웹 브라우저에서 동작: amd

nodejs에서 동작: commonjs

 

• moduleResolution

module의 키 값이 amd이면 moduleResolution 키 값은 classic

module의 키 값이 commonjs이면 moduleResolution 키 값은 node

 

• target 키

트랜스파일할 대상 자바스크립트의 버전을 설정한다.

 

• baseUrl

주로 현재 디렉터리를 의미하는 "."으로 키 값을 설정한다.

 

• outUrl

baseUrl 설정값을 기준으로 했을 때 하위 디렉터리의 이름이다.

빌드된 결과가 해당 디렉터리에 만들어진다.

 

• paths

import 문에서 from 부분을 해석할 때 찾아야 하는 디렉터리이다.

 

• esModuleInterop

chance 패키지를 사용하려면 true로 설정한다.

 

• sourceMap

sourceMap의 값이 true이면 트랜스파일 디렉터리에 js 파일뿐만 아니라. js.map 파일도 만들어진다.

 

• downlevelIteration

생성기 구문을 사용하려면 true로 설정한다.

 

• noImplicitAny

타입을 지정하지 않더라도 오류로 인식하지 않게 하려면 false로 설정한다.

 

 

참고자료

Do it! 타입스크립트 프로그래밍