TypeScript 시작... (feat. Compiler)

우리는 node.js 의 패키지 매니저인 npm 을통해 타입스크립트 컴파일러를 설치를 할수 있다.

 

근데 node.js에대해 정확히 알아들? npm도? 사실 난 잘몰라...그래서 우선 개념이라도 좀 적고갈께

 

공식홈페이지에는 이렇게 나와있다.

V8 자바스크립트 엔진으로 빌드된 JavaScript 런타임이라... 런타임???

런타임 -> (언어가 작동하는 환경) 으로의 자바스크립트.  위키백과에는 다음과 같이 설명한다.

핵심은. Node.js는 자바스크립트를 서버에서도 사용할 수 있도록 설계가 되어있는 서버 사이트 스크립트 언어로

서버개발을 위해서 나온 언어로 위에 바로 V8이라는 자바스크립트 엔진 위에서 동작하는 이벤트 처리 I/O 프레임워크로 웹서버와 같이 확장성 있는 네트워크 프로그램을 제작하기 위해 고안된 것이라 한다.

 

V8 엔진이용해서 서버에서 사용할수 있게 만든거라는데... 왜 서버에서 사용을 하는게 좋은거야 그럼?

->

기존의 네트워크 방식은 스레드를 기반으로 하는 동기 방식인데 이 처리 방식인데 이 방식을 쉽게 표현을 한다면 처리를 해야할 곳이

4군데 인데 몸은 하나라고 치고 또한 대기시간이 있으실 것입니다.

이럴 경우에 처리를 할 수가 있는 방식은 몸을 복제하여 동시에 처리를 하는 방식이 있는데 이 방법은 좋은 것 같아 보이지만

일이 많아질 수록 스레드를 더 많이 나누어야 하기때문에 메모리 사용량이 폭발적으로 증가를 하게 되어 결국에는 서버가 다운이 되는

원인이 되기도 하는 것입니다. 

 

그래서 요놈을 쓴다 이거네...

 

그럼 npm은 뭐시냐.... 사이트 가보자

 오픈소스를 사용하여 응용프로그램을 빠르게 구축하라...... 이게 무슨말이냐면

->

npm이란 Node Package Modules의 약자다. Node.js에서 사용가능한 모듈들을 패키지화시켜 모아놓은 것이다. 이를 통해 웹에서 필요로 하는 특정기능들을 일일이 개발하지 않아도 이미 누군가가 만들어서 올려놓은 모듈을 다운로드 받는 것으로 대신할 수 있어 개발을 쉽게 할 수 있는 것이다. 물론 Github에 올라가있는 모듈을 다운로드받아 빌드하고 사용해도 되지만 어떤 모듈들이 있는지 알 수도 없고 버전관리 등에도 불편함이 생길 수 밖에 없다. 그래서 Isaac Z. Schlueter라는 개발자가 만든 npm은 Node.js 개발자들에게 이제 필수로 자리잡은 상황이다.

 

서론이 길었다 TypeScript 쓰는 페이지인데... 그럼 노드 패키지 모듈(npm) 을 이용해서 타입스크립트 시작해보자

npm install typescript -g

타입스크립트 설치를 한다 (-g globally로 ㅎ)

 

tsc 

typescriptCompiler 의 약자로 -g 로 설치했다면 어디서든 실행이 가능하다

 

tsc hello.ts

이러면 hello.ts 파일이 생성되는걸 볼수있다.

 

오해하면 안되는게 tsc(TypeScript Compiler)는 node.js 프로그램이다... 고로 node.js에서만 실행이 가능하다.

(컴파일을해서 자바스크립트 파일로 만들어내는게 임무)

 

 

예를들면 hello.ts 라는 파일을 만들고 위 방식으로 tsc 해보면

컴파일된 hello.js는 다음과 같다.

let 이 var 로 바뀌었다?? --> es5형식으로 이전부라우저도 지원이 되겠끔 지원한다.

 

만약 최신es6로 or 그이상으로 해야한다면??

target옵션을 사용하여 진행할수 있다.

 

만약...

1초뒤에 resolve 나 reject가 되게 되는데 약속이(Promise)이행되면 .then함수가 실행이 된다.

es6이후에 나온 문법이 컴파일 된다면....??

 

못찾는다..... 별도의 폴리필이 필요하다..... 

근데 폴리필이 뭐냐....;;;

 

 

--lib es2015.promise 와 같이 2015 버전에 promise를 쓰겠다 옵션을 주어보겠다.

아 타입오류 막뜨네.. es5 타입도 추가해줘서 다시해보자

 

아 3개뜨네... 그냥 컴파일 안해도될꺼같은데....ㅋㅋ

위에보니 Iterable<T> 머시기 타입이 문제가되네... 저것도 옵션으로 무시해주자

 

저콘솔도 .....무시??? ??? 콘솔도 버전문제가 아니잖나??? 

--> 저것은 옵션처리하면서 'dom' 의 요소가 빠졌기 때문에 넣어주어야한다.

--> 우리가 라이브러리 요소를 변화시키면서 dom이 빠지기때문에 추가해주어야 한다고 카더라...

오오 넘어갔어 오류없어! 그럼 프로미스가 어떻게 js로 변했는지 볼까!!

 

화살표 함수가 사라졌다 es5이기때문에

 

터널로 기입한것들은 es5가 있다, es2015.promise가 있다. 등등 명시를 해준것이기때문에

컴파일되도 실행이 된거기 때문에 화살표함수는...끄흠...

 

방금전에 넘어간 폴리필이 무슨뜻이야?

이런거래 ..ㅎㅎ promise라는 런타임에만 구동하고 평가가 될때 전역에서 찾게되는거야... 

 

 

이렇게 export 하면 어디서든 import할수가 있다. hello.ts에다가 해볼까?

임포트해서 추가해보자 ㅎㅎ

근데 우리가 왜 이렇게 컴파일 해보고 이러는건지알아??

 

결국 이거이해하려고 ㅎㅎ 하려는것보다 개념을 전보다 이해하게 될껄? 난 지금 그러고있어서..ㅎ

compile option은  json형식으로 볼수 있는데... 여기서 package.json을 생각해냈다면 당신 좀 해본놈이구나 한다더라 ㅎ

(또는 tsconfig.json)

별거도 아닌거같은데 더럽게 기네 글