Programming Languages/JavaScript
[ JavaScript ] TypeScript 컴파일
loopinger
2024. 5. 31. 11:20
# 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