본문 바로가기

Programming Languages/JavaScript

[ JavaScript ] TypeScript 컴파일

# Typescript 프로젝트를 시작할 폴더 생성
mkdir -p /app/ws/node/HelloTsc/src && cd /app/ws/node/HelloTsc

# Node.js 프로젝트를 초기화
# 메타데이터, 종속성, 스크립트, 버전등을 
# 포함하는 package.json 파일 생성
npm init -y

# TypeScript에서 Node.js의 내장 모듈과 기능에 대한
# 타입 정보를 사용할 수 있도록 Node.js의 타입 정의 파일 설치
# package.json 파일에 dependencies에 @types/node가 추가됨
npm i @types/node

# TypeScript 전역설치
# tsc 명령어를 터미널에서 사용 가능
npm install typescript -g

# TypeScript 버전 확인
tsc -v

cat <<TYPE_SCRIPT > /app/ws/node/HelloTsc/src/index.ts
const user : string = 'Hong';
console.log("Hello " + user + "!\nWelcome TypeScript!");
TYPE_SCRIPT

# index.ts 컴파일로 js 파일 생성
tsc src/index.ts

# js 파일 실행
node src/index.js

# TypeScript를 컴파일하고 실행할 수 있게 하는
# ts-node 를 설치
npm install ts-node -g

# index.ts 컴파일과 함께 실행
ts-node src/index.ts

# TypeScript 프로젝트 설정을 위한
# 초기 설정 파일(tsconfig.json) 생성
# Typescript 파일을 어떻게 컴파일할지
# 세부적으로 설정
tsc --init

# typescript 컴파일 옵션 지정
cat <<TS_COMPILE_OPTION > /app/ws/node/HelloTsc/tsconfig.json
{
  "compilerOptions" : 
  {
    // 컴파일 결과 생성되는 자바스크립트의 버전을 지정
    // 컴파일 결과가 자바스크립트 버전에 맞게 생성됨
    // ES5, ES6, ESNext ...
    "target" : "ES5",
    // 컴파일 결과 생성되는 
    // 자바스크립트의 모듈 시스템을 지정
    // TypeScript는 기본적으로 ES모듈을 사용
    "module" : "CommonJS",
    // 컴파일 결과 생성되는 코드의
    // 생성 위치를 결정
    "outDir" : "dist",
    // TypeScript 문법을 엄격하게
    // 검사할 지를 지정
    "strict" : false,
    // TypeScript가 각각의 파일을
    // 개별 모듈로 인식할지 여부를 지정
    // force로 결정할 경우 컴파일된 
    // 개별 파일들에 export가 지정되지 않을 경우 
    // 자동으로 export {} 를 추가
    "moduleDetection" : "force"
  },
  "ts-node" :
  {
    // ts-node는 기본적으로 CommonJS 모듈을 인식하기
    // 때문에 ES 모듈을 인식하지 못함
    // 해당 옵션을 주어서 인식할 수 있도록 수정
    // package.json 에 "type" : module 도 추가가 필요
    "esm" : true
  },
  // 컴파일 할 범위 경로를 설정
  "include" : ["src"]
}
TS_COMPILE_OPTION


cat <<TYPE_SCRIPT > /app/ws/node/HelloTsc/src/hello.ts
export const hello = (message) => {
  console.log("hello " + message);
};
TYPE_SCRIPT

cat <<TYPE_SCRIPT > /app/ws/node/HelloTsc/src/index.ts
import { hello } from "./hello";

hello('Hong');
TYPE_SCRIPT

// 타입 스크립트 컴파일
tsc