Typescript 사용해보기

Typescript 사용하는 이유

Javascript는 dynamically typed language입니다.

즉, 런 타임에 타입이 정해지기 때문에 개발자들이 개발할 때(compile time) 없었던 에러가

 

클라이언트의 웹 브라우저(Run time)에서  일어날 수 있습니다.

이러한 치명적인 일을 방지하기 위해 규모가 있는 애플리케이션에서는 Type checker 역할을 하는

Typescript를 사용하여 개발합니다.

 

Typescript는 다른게 아니라  typescript file을 javascript file로 컴파일하는 "컴파일러"입니다.

코드가 한번 컴파일되면, 결과로 나온 js 파일은 타입 정보가 없습니다.

 

 

이는 ES6+ 문법을 ES5로 컴파일해주는 Babel과 매우 유사합니다. 

 

1. 일단 해보기

1. node -v 

- 우선 노드가 깔려있어야 합니다.

 

 

2. npm install -g typescript

- 내 프로젝트 node_modules 파일에 글로벌하게 typescript 설치.

 

 

3. tsc -- init

- 현 프로젝트에서 타입스크립트 configuration 파일 생성. (tsconfig.json)

제가 타입스크립트로 개발할 때 늘 설정하는 configuration 입니다.

 

우리는 tsconfig.json 파일에서 "target" 값을 설정함으로써 ts 파일을 어떤 버전의 js로 컴파일할지를 정할 수 있습니다. (디폴트값은 es5입니다)
이는 ECMAScript 버전을 브라우저에 맞게 호환해주는 바벨과 매우 비슷한 성격인 것 같습니다.

그리고 컴파일할 typescript file을 include 해줍니다. 반대로 exclude 할 수도 있습니다. 

 

 

 

4. npm start

- 타입스크립트에 의해 컴파일된 js 파일을 node로 실행합니다.

package.json

npm start로 실행하기 위해 package.json의 script를 위와 같이 작성합니다.

다만, index.js 파일을 실행하기 전에 타입스크립트(tsc)로 먼저 컴파일 해줍니다. ("prestart": "tsc")

 

 

5. tsc index.ts --watch

- index.ts 파일을 계속 컴파일합니다. Type을 지속적으로 검사합니다.

 

terminal

 

공부하며 느낀점

ECMAScript로부터 발전한 Javascript는 원래 스크립트 언어로부터 그 시작을 이어왔다.

2000년대 초반의 웹 브라우저는 그 몇 십줄의 스크립트를 실행하는 데에도 벅찼기에 Javascript는 dynamically typed language로 개발이 된 것 같다. 하지만 이러한 특성의 언어는 배우기 쉽지만 앞에서도 언급했듯 런타임 에러를 컴파일 타임에 잡을 수 없다는 치명적인 단점이 있다. 그래서 TypeScript를 만들어서 C, Java 처럼 개발할 때부터 인자 타입, 변수 타입, 리턴 타입을 전부 엄격히 선언을 하는 것이다.

 

그런데 파이썬처럼 변수나 인자의 타입을 정해주지 않아도 실행 시 Type error를 잡아주는 Type checker 모듈이 자바스크립트에도 임포트되면 정말 좋을 것 같지 않은가? 이 모듈을 만드려면 먼저 "타입 추론"이라는 것을 해야하는데 이것은 정말이지 너무 어렵다.

 

사실 올해 전공 중에 Ocaml이라는 함수형 언어로 Type check를 만드는 것이 기말 과제였던 수업이 있었는데 여기서 위의 모듈을 만들었던 기억이 있다. Type checker를 만들기 위해서는 먼저 모든 타입의 "Type Equation"을 전부 만들고, 이 타입 방정식을 하나씩 풀어가면서 최종 타입을 리턴하는 방식으로 진행된다. 이 과정에서 단 하나의 모순이라도 발견하면 Type Error를 raise하는 것이다.

 

음.. 글을 쓰면서 추후에 이 타입 추론에 대해 포스팅하면 좋을 것 같다는 생각이 든다. 

아무튼 여러 컴파일러 종류중 하나인 Type system은 정말 개발자의 삶을 윤택하게 해주는 훌륭한 시스템이다.

더 깊게 공부하면 재밌을 것 같다.

 

www.typescriptlang.org/

Typed JavaScript at Any Scale.

www.youtube.com/watch?v=-dyrcJr5NiQ&list=PL7jH19IHhOLNM5mePXxbpnPefi6PiiNCX&index=2