이번시간에는  타입 스크립트 파일을 하나 만든후 타입스크립트 파일을  컴파일하여 순수 자바스크립트로 변환하고 순수 자바스크립트 파일을 실행하는 과정을 알아보도록 하겠습니다.

1)작업폴더 구성 및 확인
여러분 컴퓨터의 특정폴더에 TypeScript 실습 폴더를 생성합니다.
C:\TypeScript
or
D:\TypeScript

VSCode 열고 상단 File>폴더열기> 작업폴더 지정합니다.
VSCode 탐색기에서 1-JSvsTS 폴더를 만들고 해당 폴더로 터미널을 통해 경로 이동합니다.
D:\TypeScript\
cd 1-JSvsTS

D:\TypeScript\1-JSvsTS


2) 자바스크립트 파일과 타입스크립 파일 만들기
D:\TypeScript\1-JSvsTS 폴더내에 hello1.js 파일과 hello2.ts 파일 확장자 각자 다른 파일 두개를 생성합니다.


A) hello1.js 작성하고 실행하기
타입을 사용하지 않는 간단한 순수 자바스크립 실행 파일입니다.

const userId = 'hong';
const userName = '홍길동';


function sayHello(userId,userName) {
    console.log('안녕하세요.'+userName+'님. 아이디는 '+userId+'입니다.');
}


sayHello(userId,userName);


//node hello1.js



해당 파일을 node 명령어를 통해 실행합니다.
node hello1.js
터미널 콘솔에 로깅정보가 출력되는것을 확인합니다.

순수 자바스크립트 파일이나 자바스크립트 모듈파일로 개발된 클라이언트 자바스크립 파일(프론트엔드용)은 웹브라우저의 경우
웹브라우저에 내장된 JavaScript엔진에 의해 실행되어지고 서버나 개발환경에서 실행되는 자바스크립트 파일(백엔드용)의 경우
Node Framework 기반에서 node명령어를 통해 실행하고 그결과를 확인할수 있습니다.


B) hello2.ts 작성하고 실행하기 

hello2.ts 파일에 hello1.js와 동일한 기능을 제공하는 코드를 Type Annotation(데이터 타입 지정) 기법을 이용해 작성합니다.
작성된 파일을 저장후 아래 명령어중 하나를 통해 타입스크립트 파일을 컴파일합니다. 

const userId:string = 'hong';
const userName:string = '홍길동';



function sayHello(userId:string,userName:string) {
    console.log('안녕하세요.'+userName+'님. 아이디는 '+userId+'입니다.');
}

//tsc hello2.ts 컴파일시 문제 없지만 tsc --strictNullChecks hello2.ts 엄격체크모드옵션로 실행시 사전 빌드 오류 제공
// let age:number;
// console.log('나이는 '+age+'세 입니다.');

sayHello(userId,userName);

//데이터 타입이 다른 타입 에러 발생 예시코드
//sayHello(10,userName);


tsc hello2.t
or
tsc --strictNullChecks hello2.ts

우리가 설치한 typescript 전역 패키지에서 제공하는 tsc명령어는 지정한 타입스크립파일(.ts)을 순수한 자바스크립트 파일로  컴파일하여 동일한 파일명의 확장자가 .js인 파일을 만들어 냅니다.

컴파일 후 같은 경로상에 hello2.js 자바스크립트 파일이 생셩된것을 확인합니다.
컴파일로 만들어진 hello2.js를 node명령어를 통해 실행합니다. 

node hello2.js

hello1.js와 동일 기능을 제공하지만 hello2.js파일의 소스를 확인해보면 개발자가 직접 작성한 자바스크립트 파일과는 다소 다른 최신 자바스크립트 문법을 통해 구현되어 있는것을 확인할수있습니다.
여기 중요한 부분은 타입스크립트 파일은(.ts) 해당 내용을 실행하려면 컴파일해서 나온 최종 결과물을 실행해야한다는것입니다.

sample.ts(타입스크립파일작성) ---> compile(tsc 컴파일) ---->sample.js(자바스크립트파일 생성) ----> node sample.js(실행) 

상기와 같은 컴파일과 실행과정은 추후 프로젝트 개발시에는 각종 지원 패키지들에 의해 자동으로 실행되며
지금은 타입스크립트 파일이 실행되는 과정을 정확히 이해하시면 좋을듯합니다.

Tips) 타입스크립트 컴파일 옵션 --strictNullChecks 엄격체크 옵션의 의미
--strictNullChecks는 TypeScript 컴파일러 옵션 중 하나입니다.
이 옵션을 사용하면 변수의 값에 대해 null과 undefined 허용하지 않는 강력한 타입 체크를 체크하여 null,undefined 에러 이슈를 줄여줍니다.

해당 옵션을 사용하면 any 타입이라고 지정된 변수가 아닌이상 변수는 정의했지만 값을 할당하지 않은경우
일반적을  undefiled 값이 자동 할당되는데 이를 허용하지 않게되어 에러를 발생시킵니다.


Tips) undefined vs null 에 대한 이해
** 자바스크립트는 변수를 선언하면 기본값인 undefined 값이 자동 할당되고 개발자가 특정값을 할당하면 해당값이 변수에 저장됩니다.
** 자바스크립트에서 null 값은 해당변수에 값이 없음(참조하는 값이 없음) 을 뜻하며 null은 타입은 기본 object 타입입니다.

이 옵션을 사용하면, null 또는 undefined가 될 수 있는 변수에 접근하기 전에 해당 변수를 체크합니다.
이렇게 하면 런타임에서 발생할 수 있는 오류를 컴파일 타임에 잡아낼 수 있습니다.

예를 들어, 다음과 같은 코드를 보겠습니다:
let age:number;
console.log('나이는 '+age+'세 입니다.');

--strictNullChecks 옵션을 사용하면, x가 초기화되지 않았기 때문에 이 코드는 컴파일 오류를 발생시킵니다.
이렇게 하면 null 또는 undefined 값으로 인한 런타임 오류를 방지할 수 있습니다.
되도록 컴파일시 --strictNullChecks 옵션으로 실행시켜 사전 빌드 에러 검증 필요 

이번 시간에는 타입스크립 파일이 어떤 과정을 통해 컴파일되고 컴파일된 내용이 어떻게 실행되는지 알아보았습니다.
다음 시간에는 본격적으로 타입스크립트 기초 문법에 대해 이해하는 시간을 가져보겠습니다.

감사합니다.