.png)
스탙업에서 프론트엔드 개발자로 일한다는건 그래도 대학교에 가서 강의를 듣는 것보다 재미있는 일이다. 계속 공부를 해야하고, 그것은 발전으로 이어진다. 타입스크립트에 대해서 빠르게 1, 2, 3편을 통해서 어떻게 쓰는지, 그리고 기본적으로 알아야하는 것은 무엇인지 적을 것이다.
참고한 자료는
알아놔야할 개념.
타입스크립트는 기본적으로 자바스크립트의 수퍼셋 언어이다. 자바스크립트라는 언어가 있다면 그 언어를 감싸는 더 큰 확장팩 느낌인 것이다. 따라서 자바스크립트의 문법을 따르고(물론 타입 명시는 해줘야한다) 거기에 더 확장된 기능들을 제공한다 (interface, type, generic)
타스는 어떻게 작동하는가?
타스를 처음 접하게되면, 대부분의 튜토리얼이 그렇듯, 타스를 머신(컴퓨터)에 설치한다. 이때 사용하는 명령어는 만국 공통
npm i typescript -g이다. node 패키지 매니저로 typescript를 해석해줄 수 있는 프로그램을 설치한 것이라고 이해하면 된다.
그러고나서 ts확장자 파일을 만든다. 예를 들어 HelloWorld.ts를 만든다고 가정하자. 그리고 그 안에 다음과 같이 타스 문법을 이용해서 적었다고 가정하자.
function sayHelloToWorld(name: string): string {
return `Hello World! I am ${name}`;
}위에 있는 :를 이용해서 string타입을 명시한 것은 일부러 그런 것이다. 타스의 문법인데, 나중에 살펴볼 것이다. 아무튼, ts파일을 만들어주고 terminal을 이용해서 대부분, tsc라는 명령어를 사용한다.
tsc HelloWorld.ts이렇게되면 HelloWorld.ts가 있는 같은 디렉토리에 HelloWorld.js라는 파일이 생성된다. 결국은 tsc가 뭘한 것이냐... HelloWorld.ts파일을 읽고 해석해서 js, 자바스크립트 파일로 변환해준 것이다. 그리고 나서 이 js파일을 실행해보면 잘 돌아간다.
즉, 타스파일을 만들면 해석 과정을 거쳐서 js로 만들어주고 이것을 실행할 수 있는 것이다.
그렇다면, 해석되서 산출된 js파일은 어떻게 생겼을까?
function sayHelloToWorld(name) {
return "Hello World!, I am " + name;
}이렇게 생겼다. 그런데... 뭔가 시시하다. 타입체킹을 넣어줬는데.. 바뀐 자스파일에는 타입체킹 부분이 없다. 그렇다면 어떻게 된 것일까?
타입스크립트는 타입체킹을 하긴 한 것일까? 한게 맞다. 그렇다면 언제했을까? 그것은 바로 타스에서 자스로 변환될때 compile time에 타입체킹을 한다.
그런데.. 그렇다면, 실제로 실행될때는? 그때는 자스파일이 실행되는 것이기 때문에 실제로는 타입체킹을 하지않는다. 대신 타스는 코드를 쓸때, 코드에서 코드로 인자가 전달되는 과정 속에서 개발자가 할 수 있는 실수들을 전에 미리 찾아서 코드를 짤때 말해준다. 혹시나 실수가 일어나지 않도록!
그래서 기억해야할 것은,
타스는 런타임에 타입체킹을 하지 않는다. 컴파일 시간에 타입체킹을 한다.
만약 런타임과 컴파일타임의 차이를 모른다면... 공부를 하면 되겠다.
결국 js를 많이 쓰는 우리 웹 개발자들에게 실수를 덜하게 해주는 타스는 아주 고마운 존재이다. 앞으로는 js말고 ts로 모든 것을 짜도록 하자. ts가 미래다.
