프로그래밍/TypeScript

0.1 TypeScript 란?

showmiso 2019. 10. 15. 14:35


01. 타입스크립트 란?

ES6 부터 모듈방식이 새롭게 추가되었다.

개발에는 static type과 dynamic type 이 있다.
Static type : compile time 에 type check => Typescript
Dynamic type : runtime 에 type check => Javascript

Typescript = Javascript + Type
: 확장된 자바스크립트. 
Java나 C# 같은 형태를 띈 Script 언어.
함수, 변수, 클래스의 타입지정이 가능하다.

- ES6, Java, C# 과의 차이점 (P.8)
1) ES6에 없는 interface 선언 및 구현이 가능하다.
2) Java는 다중생성자가 가능하나 TypeScript는 단일생성자만 가능하다.
3) Java와 달리 매개변수에 default 값을 선언할 수 있다.

TypeScript 에는 강력한 Type System이 있다.
타입 지정(Type annotation)을 통해 엄격한 타이핑(Strong typing)을 적용하여 타입 안전성(type safety)을 확보한다. 타입 검사 후 타입 안전성이 확보되면 complier가 타입 지정을 제거하고 .js 코드를 생성한다.

* 컴파일 단계를 거쳐 런타임에는 실행에만 집중할 수 있는 Javascript(ECMAscript) 코드를 만들어 낸다. 

* QLC에서 Typescript를 선택한 이유
1) 명확한 타입 선호
2) 자체 클래스 지원
3) Generics 사용가능 
4) ECMAscript로 원활한 컴파일

Typescript Version 별 특징
- 2.0 : Non-nullable, .d.ts로 서드파티 라이브러리 사용이 쉬워짐
- 2.7 : scritc class initialization, Fixed Length tuples

* 컴파일링과 트랜스파일링
Compliing : 한 언어의 소스코드를 다른 언어로 바꾸는 것
Transpiling : 한 언어의 소스코드를 비슷한 추상화 수준의 다른 언어로 바꾸는 것
TSC (TypeScript Complier) : 엄밀히 말하면 transpiling 이지만 편의상 compiling이라고 한다.

ex) tsc --target es5
: compile typescript to javascript using the version es5.

babel : Javascript 상위표준을 하위표준으로 변환하는 것

* Typescript 기반 Framework
AngularJS : Typescript를 주력 언어로 채택함.
Electron : 데스크탑 용 GUI App을 개발할 수 있는 오픈소스 프레임.
Javascript, html, css 만으로 cross-platform을 지원하는 데스크탑 App을 개발할 수 있다.


02. 개발환경구축

* tsconfig.json
: complie을 설정을 저장하는 파일로 tsc --init으로 생성한다.

해당 파일 하위에 "compilerOptions"를 수정하여
하나의 파일로 합쳐서 컴파일 하거나, 컴파일 결과를 특정 디렉토리에 생성하는 작업을 할 수 있고, 
부모 설정파일을 만들어 사용할 수 있다.

Typescript에서 파일의 실행결과를 확인하려면 명령어를 2번 입력해야 한다.

ex1)
tsc hello.ts // compile typescript to javascript
node hello.js // run the file

ts-node 명령어를 입력하면 한번의 입력으로 실행 결과를 확인할 수 있다.
ts-node는 hello.ts를 읽어들여 내부적으로 컴파일하고, 실행결과만 출력한다.

* Task Runner
: 빌드 작업 자동화를 위한 도구
VSCode에서는 빌드환경을 미리 설정해놓고 필요에 따라 원하는 형태로 빌드할 수 있다.