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

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

들어가며

• 타입스크립트(TypeScript) 프로젝트를 만들어보자.

 

타입스크립트 프로젝트

• 타입스크립트 개발은 Node.js 프로젝트를 만든 다음, 개발 언어를 타입스크립트(TypeScript)로 설정하는 방식으로 진행한다.
• Node.js 프로젝트는 디렉터리를 하나 만들고 여기에 @package.json@이라는 이름의 파일을 만드는 것으로 시작한다.
• 보통 @package.json@ 파일은 터미널에 @npm init@ 명령을 실행해 생성한다.

> mkdir study
> cd study
> npm init --y

Wrote to C:\Users\devastra\Desktop\TypeScript_Study\ch02-01\package.json:

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

 

@package.json@

• Node.js가 관리하는 패키지 관리 파일이다.
• 프로젝트 정보와 관련 패키지가 기록된다.
• 이 파일을 이용해 프로젝트를 개발하고 진행하는 데 필요한 패키지를 관리할 수 있다.

 

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

• 터미널에 아래의 명령을 실행해 @typescript@와 @ts-node@ 패키지를 각각 설치한다.

> npm i -D typescript ts-node

 

@npm i@ 명령 옵션

• @npm i@ 명령의 옵션은 아래와 같다.
• 이 옵션으로 설치하면 해당 패키지 정보가 @package.json@ 파일에 자동으로 기록된다.

@npm i@ 옵션	의미	단축 명령
@--save@	- 프로젝트를 실행할 때 필요한 패키지로 설치한다. - 패키지 정보가 @package.json@ 파일의 @dependencies@ 항목에 등록된다.	@-S@
@--save-dev@	- 프로젝트를 개발할 때만 필요한 패키지로 설치한다. - 패키지 정보가 @package.json@ 파일의 @devDependencies@ 항목에 등록된다.	@-D@

 

• 타입스크립트는 또한 웹 브라우저나 Node.js가 기본으로 제공하는 타입들의 존재는 그냥은 알지 못한다.
• @Promise@와 같은 타입을 이용하려면 @＠types/node@라는 패키지를 설치해야 한다.
• 터미널에 아래의 명령을 설치해 해당 패키지를 설치해준다.

> npm -i -D @types/node

 

• @package.json@ 파일 내용을 확인하면 실제 패키지가 등록된 것을 확인할 수 있다.

{
  ...(생략)
  
  "devDependencies": {
    "@types/node": "^20.8.6",
    "ts-node": "^10.9.1",
    "typescript": "^5.2.2"
  }
}

 

• 또한 @node_modules@ 디렉터리와 그 아래 각 패키지의 디렉터리를 확인할 수 있다.

 

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

• 프로젝트를 만드는 과정과 이용하는 과정도 다르다.
• 보통은 프로젝트를 구현하면서 여러 패키지를 설치하게 되므로 @node_modules@ 디렉터리 크기가 매우 커진다.
• 그래서 다른 사람들에게 프로젝트를 전달할 때는 @node_modules@ 디렉터리를 모두 지운다.
• 따라서 다른 사람이 작성한 프로젝트를 전달 받아 이용할 때는 가장 먼저 @package.json@ 파일이 있는 디렉터리에서 다음 명령을 실행해야 한다. 

> npm i

 

@tsconfig.json@ 파일 만들기

• 타입스크립트 프로젝트는 타입스크립트 컴파일러의 설정 파일인 @tsconfig.json@ 파일이 있어야 한다.
• 이 파일은 @tsc --init@ 명령으로 만들 수 있다.

> tsc --init

 

• 기본 @tsconfig.json@ 파일을 열어 보면 실제 개발을 진행하는 데 필요한 옵션이 비활성화되어 있다.
• 따라서 다음과 같이 내용을 수정한다.

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

 

include 옵션의 경로인 ./src 디렉터리 안에 임시로 hello.ts 파일을 생성해주고 exclude 옵션으로 해당 파일을 설정해준다. (그렇지 않을 경우 exclude 옵션의 기본값 대상이 ./가 되어 빌드가 되지 않는다.)

 

 

@src/utils@ 디렉터리 생성하기

• @tsconfig.json@ 파일에서 @include@ 항목을 보면 아래와 같은데, 이것은 다음의 디렉터리에 이 프로젝트의 모든 타입스크립트 소스 파일이 있다는 뜻이다.
  • @./src@
  • @./src/utils@

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

 

• 터미널에 아래 명령을 실행하여 @src//utils@ 디렉터리를 생성한다.

> mkdir -p src/utils

 

• 그리고 각 디렉터리에 실습하는 데 필요한 소스 파일을 만들어본다.

> touch src/index.ts src/utils/makePerson.ts

 

• 각각의 소스 파일에 다음과 같은 코드를 작성한다.

@./src/utils/makePerson.ts@

export function makePerson(name: string, age: number) {
    return { name: name, age: age }
}

export function testMakePerson() {
    console.log(
        makePerson('Jane', 22),
        makePerson('Jack', 33)
    )
}

 

@./src/index.ts@

import { testMakePerson } from "./utils/makePerson";

testMakePerson()

 

node나 node-ts로 소스 파일을 실행하려면 ts-node ./src/index.ts 명령을 사용한다. 하지만, 소스 파일명이 index이면 파일명을 생략하고 단순히 ts-node ./src로 실행할 수 있다. 

 

@package.json@ 파일 수정하기

• 타입스크립트 프로젝트를 개발할 때는 @ts-node@를 사용하지만, 막상 개발이 완료되면 타입스크립트 코드를 ES5 자바스크립트 코드로 변환해 @node@로 실행해야 한다.
• 이를 위해 다음처럼 @package.json@ 파일을 열고 @scripts@ 항목에 @dev@와 @build@ 명령을 추가한다.

{
  "name": "study",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "dev": "ts-node src",
    "build": "tsc && node dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^20.8.6",
    "ts-node": "^10.9.1",
    "typescript": "^5.2.2"
  }
}

 

• @dev@ 명령은 개발 중에 @src@ 디렉터리에 있는 @index.ts@ 파일을 실행하는 용도로 사용하며, @build@ 명령은 개발이 완료된 후 프로그램을 배포하기 위해 @dist@ 디렉터리에 ES5 자바스크립트 파일을 만들 때 사용한다.
• 위의 명령들은 터미널에서 @npm run 명령@ 형태로 사용한다.
• 터미널에서 다음 명령을 실행해 @src@ 디렉터리에 있는 @index.ts@ 파일을 컴파일하고 실행한다.

> npm run dev

 

•  아래의 명령을 실행하면 @dist@ 디렉터리에 ES5 자바스크립트 파일을 만든다.

> npm run build

 

 

• @dist@ 디렉터리 안에 생성된 ES5로 컴파일된 @index.js@ 파일의 내용은 다음과 같다.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var makePerson_1 = require("./utils/makePerson");
(0, makePerson_1.testMakePerson)();
//# sourceMappingURL=index.js.map

 

요약

• 아래의 명령을 차례로 실행한다.

> npm init --y

> npm i -D typescript ts-node

> npm i -D @types/node

> tsc --init

 

• @tsconfig.json@ 파일을 아래와 같이 수정한다.

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

 

• 아래의 명령을 실행한다.

> mkdir -p src/utils

 

• @/src@ 디렉터리에 @hello.ts@ 파일을 생성해준다.

\src> touch hello.ts

 

• @package.json@ 파일에 다음의 내용을 추가해준다.

{
    // ... 생략 ...
    "main": "src/index.js",
    "scripts": {
    "dev": "ts-node src",
    "build": "tsc && node dist"
    },
    // ... 생략 ...
}

 

• 컴파일하고 실행하려면 다음 명령을 실행한다.

> npm run dev

 

• @dist@ 디렉터리에 ES5 자바스크립트 파일을 만들려면 다음 명령을 실행한다.

> npm run build