TypeScript Compiler

식당에 도착했습니다.

식당이 컴퓨팅 환경이라고 생각해보겠습니다.

영어만 할 줄 아는 종업원(들)

자바스크립트 실행 환경이라고 가정하겠습니다.

브라우저 혹은 node.js 런타임 환경일 수 있습니다.

영어로 작성된 주문서

자바스크립트 문법에 맞게 작성된

.js 스크립트 파일

영어로 작성된 주문서를

종업원에게 제출합니다.

.js 스크립트 파일을 실행환경에서 실행합니다.

종업원은 주문서를 이해하여,

주문에 맞게 행동합니다.

자바스크립트로 작성된 프로그램이 실행됩니다.

실행되고 있는 동안(의 동작)을 런타임이라고 합니다.

한국어로 작성된 주문서

타입스크립트 문법에 맞게 작성된

.ts 스크립트 파일

한국어로 작성된 주문서를 종업원에게 제출합니다.

.ts 스크립트 파일을 실행합니다.

어디서 ?

종업원은 한국어를 모르기 때문에

주문에 맞게 행동할 수가 없습니다.

오류가 발생합니다.

타입스크립트 실행 환경

런타임 환경이 아예 존재하지 않습니다.

실행 환경처럼 보이는 것들도 실제는 아닙니다.

한국어로 작성된 주문서를 영어로 작성된 주문서로 번역하기 위해 번역가를 식당으로 부릅니다.

컴퓨터(식당)에 컴파일러(번역가)를 설치합니다.

번역가는 한국어로 작성된 주문서를 영어로 작성된 주문서로 번역합니다.

번역하는 행위가 컴파일이며,

번역하는 사람은 컴파일러입니다.

번역가는 한국어를 번역하며, 꼼꼼하게 문법을 체크합니다.

번역가가 번역하는 하는 시간(또는 구체적인 행동)을 컴파일 타임이라 하며, 컴파일 타임에 하는 일 중에 한가지가 원문의 문법적인 오류를 체크하는 일입니다.

번역가가 무사히 번역을 마치면, 영어로 작성된 주문서를 돌려줍니다.

컴파일러가 컴파일이 정상적으로 끝나면,

.js 스크립트 파일을 만들어 냅니다.

한국어로 번역된 주문서를

종업원에게 제출합니다.

컴파일된 .js 스크립트 파일을

실행환경에서 실행합니다.

종업원은 주문서를 읽고, 이해하며 주문에 맞게 행동합니다.

자바스크립트로 작성된 프로그램이 실행됩니다.

실행되고 있는 동안(의 동작)을 런타임이라고 합니다.

식당

A) 한국어로 작성된 주문서

B) 영어로 작성된 주문서만 이해하여, 주문에 따라 행동하는 종업원

C) 한국어를 영어로 번역해주는 번역가를 식당에 데려옵니다.

D) 번역가에게 한국어 주문서를 주고, 번역을 요청합니다.

E) 번역을 합니다.

F) 번역이 끝나면 영어로 작성된 주문서를 돌려받습니다.

G) 종업원을 불러 주문서를 제출합니다.

H) 종업원은 영어로 된 주문서를 이해하여, 주문에 맞게 행동합니다.

컴퓨터

A) .ts 스크립트 파일

B) 자바스크립트 실행 환경 (브라우저 또는 node.js 런타임 환경)

C) 타입스크립트 컴파일러 설치

D) .ts => .js 로 컴파일 합니다.

E) 컴파일 타임

F) 컴파일이 끝나고 .js 파일이 생성됩니다.

G) 자바스크립트 실행 환경을 골라 스크립트를 실행 시킵니다.

H) 런타임

Only Compiler

npm i typescript

TypeScript Compiler

설치하기

a.ts

a.js

TypeScript

Compiler

프로그램

컴파일러 설치 방법

  • Via npm (the Node.js package manager)

  • By installing TypeScript’s Visual Studio plugins

node package manager

https://www.npmjs.com/

node.js runtime environment

https://nodejs.org/en/

node.js 버전 관리자

  • https://github.com/creationix/nvm

  • https://github.com/tj/n

npm i typescript -g

전역 설치 (어디에서나 컴파일러 사용 가능)

TypeScript Compiler

tsc

Project

컴파일러를 프로젝트에서만 사용하기

 

- - -  ... (사용자의 소스들)

- - -  node_modules/

       - - -  .bin/

              - - -  ... (모듈에서 생성된 명령어들)

              - - -  tsc

       - - -  ... (npm 을 통해 설치한 각종 모듈)

       - - -   typescript/

- - -  package.json

 

Project Folder

tsc

./node_modules/.bin/tsc

package.json => scripts

./node_modules/.bin/tsc a.ts

package.json => scripts

tsc a.ts

tsc [options] [file ...]

컴파일 옵션

tsc [-h or --help]

https://www.typescriptlang.org/docs/handbook/compiler-options.html

[ 마크의 타입스크립트 : 기본편 ] TypeScript Compiler

By Woongjae Lee

[ 마크의 타입스크립트 : 기본편 ] TypeScript Compiler

마크의 타입스크립트 기본편 동영상 강좌의 프레젠테이션 자료입니다.

  • 1,572