TypeScript? 타입스크립트 소개 및 개발환경 구축

타입스크립트(TypeScript)

타입스크립트(TypeScript)는 오픈소스 프로그래밍 언어입니다. 마이크로소프트가 개발했고 유지 관리하고 있습니다.
독자적인 표준을 가지고 있지 않고 ECMA스크립트 표준을 따르기 때문에 자바스크립트의 특성을 침범하지 않고 최신 ECMA 표준을 지원합니다.
그래서 타입스크립트는 자바스크립트의 상위 집합(superset)언어라고 합니다.
타입스크립트가 ECMA 스크립트를 따르므로 자바스크립트 문법을 타입스크립트에서 이용 할수 있으며, 최신 ECMA 표준을 지원함으로써 하위 ECMA 표준에 대한 컴파일도 지원합니다.

ECMA 스크립트의 역사

ECMA는 유럽 컴퓨터 제조사 연합(European Computer Manufacturers Association)의 약자로 스크립트의 표준을 만들고 관리하는 단체입니다.
이 단체는 자바스크립트 뿐아니라 C#, 다트(Dart) 같은 언어의 표준과 JSON, XML과 같은 데이터 교환 형식의 표준도 관리하고 있습니다.
간단하게 역사를 살펴보면

ECMA 스크립트 표준은 1997년에 처음 등장한 스크립트 표준이고, 첫번째 판이라는 의미로 ‘Ed.1’이라는 버전 형식을 추가해
‘ECMA-262 Ed.1’ 이라고 명명됐습니다. 이를 줄여서 ES1 이라고 부릅니다.
ES2 버전은 1998년도에 나왔습니다. 새로운 특징이 추가된 것은 아니고 국제 표준화 국제 전기 전자 표준 위원회의 표준인 ISO/IEC 16262에 부합하도록 재편집 됐습니다.
ES3부터는 ECMA 스크립트가 본격적으로 브라우저 지원을 위한 표준으로 발돋움 했고, 이때 추가된 특징으로 try/catch 예외 처리 구문 등이 있습니다.
ES4는 스크립트 버전 중 예외적으로 불완전한 표준이 되어 표준으로 채택되지 못했습니다.
ES5는 2009에 나왔고 브라우저에서 가장 안정적으로 동작하는 표준입니다. 이때 ES5표준을 기반으로 한 Node.js 플랫폼도 등장했습니다.
이로써 자바스크립트가 서버프로그래밍이 가능한 언어로서 영역을 확장했습니다.
ES6는 2015년에 확정되었고 모듈 시스템, 화살표함수, 클래스, 개선된 객체 리터널, 템플릿 문자열, 심볼, 프로미스, 제너레이터, for of, 디스트럭처링, 프락시, let, const 등 많은 특징이 추가됐습니다.
ES7은 2016년에 확정되었고, 비동기 함수를 동기화 할 수 있는 Async/Await 에 대한 특징 등이 추가됐습니다.
ES8은 2017년에 확정되었고, 문자열패딩, Object, values 메서드, Object.entries 메서드 등 많은 특징이 추가됐습니다.
ES9은 2018년에 확정되었고, Rest/Spread Properties, for await of, Promise.prototype.finally 메서드 등이 추가되었습니다.

타입스크립트의 특징

타입스크립트를 자바스스크립트와 비교할때 가장 두드러진 특징은 ‘타입’입니다. 타입은 꽤 사소해 보이지만 타입스크립트에서 중요한 특징입니다.
타입이 있음으로써 개별 변수나 함수에 타입 안정성을 더할 뿐 아니라, 대규모 프로젝트를 구성할 수 있는 밑바탕이 됩니다.

타입스크립트의 공식 홈페이지에 나와있는 슬로건은 'JavaScript that scales' 입니다.
타입스크립트는 대규모 애플리케이션 개발을 위해 다음과 같은 특징을 지원합니다.

  • 모듈 시스템- ES6 모듈과 네임스페이스 지원
  • 클래스와 인터페이스 지원
  • 타입시스템 지원

타입스크립트의 모듈 시스템은 크게 ES6 모듈네임스페이스로 나뉩니다.
ES6 모듈은 기존 ES5에서 어려웠던 모듈 분활과 결합 기능을 향상 네임스페이스는 ES6에 없는 타입스크립트에 추가된 특징으로 분리된 이름 공간을 제공해 복잡도를 낮춥니다. 또한 ES6의 클래스뿐 아니라 인터페이스를 추가로 지원해 객체지향 프로그래밍을 더욱 완전하게 지원하고,
타입시스템을 기반으로 대규모 애플리케이션을 개발 할 수 있게 합니다.

모듈 시스템

ES6에서 제공하는 모듈 선언모듈 호출 방식을 지원합니다. export 키워드로 외부 모듈을 선언하거나 import 키워드를 이용해 외부 모듈을 호출 할수 있습니다. 네임스페이스는 라이브러리 단위의 모듈 구성에 유리하며 규모있는 모듈 구성에 필요한 특징입니다.
각 네임스페이스에는 인터페이스를 비롯해 클래스나 함수 등의 모듈을 선언할 수 있습니다.

클래스와 인터페이스 지원

ES6와 동일한 키워드를 이용해 클래스를 정의 할수 있고, 특히 인터페이스를 지원함으로써(interface, extends) 객체지향 언어의 특징을 더욱 풍부하게 지원합니다.

타입 시스템 지원

타입스크립트에는 강력한 타입 시스템(type system)이 있습니다 타입시스템은 자바스크립트의 타입을 확장하고 타입 어노테이션(type annotation)을 이용해 변수에 타입을 선언할 수 있게 합니다.
변수에 타입을 선언하는 것을 타입 지정(typing) 이라고 합니다. 타입 지정이 이뤄지면 변수는 엄격한 타이핑(strong typing)이 적용돼 타입 안전성(type safety)을 확보합니다.
예를 들어 변수에 string을 타입 어노테이션으로 선언하면 지정한 string 타입 외에 다른 타입의 값을 할당할 수 없습니다.

1
2
// 타입 어노테이션
val myVal:string

타입스크립트에서 변수는 함수의 매개변수 등에 선언한 타입 어노테이션은 컴파일할 때 타입 검사를 위한 목적으로 사용합니다.
타입 검사를 통해 타입 안정성이 확보되면 타입스크립트 컴파일러가 타입 어노테이션을 제거하고 최종적으로 자바스크립트 코드를 생성합니다.

정적타입

1
2
3
4
5
6
funxtion sum(a: number, b: number){
return a + b;
}

sum('x','y');
// error TS2345: Argument of type '"x"' is not assignable to parameter of type 'number'.

TypeScript는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착 할수 있다는 장점이 있다.
명시적인 정적 타입 지적은 개발자의 의도를 명확하게 코드로 기술 할 수 있다. 가독성을 높이고 디버깅을 쉽게 한다.

타입스크립트의 역사

타입스크립트는 대규모 애플리케이션을 개발하는 데 있어 자바스크립트는 어렵고 불편하다는 고객사의 불만에 대응하기 위한 목적으로 개발됐습니다.
메인 개발자는 앤더스 헤일스버그(Anders Hejlsberg)입니다. C# 언어의 설계를 이끌고 있으며, 델파이의 창시자이기도 합니다.
C# 를 설계하고 개발을 주도한 아키텍트가 타입스크립트 개발을 이끌면서 타입스크립트에 많은 영향을 끼쳤습니다.

버전별 특징

출시 당시에는 많은 관심을 받지 못함, 여러가지 불편사항들이 있었는데 그 중 IDE 지원이 원할하지 못하다는 것에 대응으로 이후 마이크로소프트는 비주얼 스튜디오를 통해 타입스크립트를 지원하게 됐습니다. 이 후 여러가지 개발도구들에서 타입스크립트를 지원하게 됐습니다.

  • 2012년 10월 1일에 첫번째 버전(0.8)이 출시 됐습니다. 이후에 ECMA 스크립트가 발표될 때마다 곧바로 버전이 업데이트 되었습니다.
  • 타입스크립트 두 번째 버전(0.9)은 2013년 6월 18일에 발표 됐습니다. 0.9 버전의 가장 큰 특징은 제네릭(generics) 지원입니다.
  • 2014년 4월 2일에 타입스크립트 버전1.0 을 발표 2014년 7월에 타입스크립트만을 위한 새로운 컴파일러를 발표
  • 2016년 8월 26일에 타입스크립트 2.0 이 발표 주요 특징은 Non-Nullable 타입, .d.ts 파일을 패키지로 가져올 수 있음
  • 버전 2.1 에서는 프로미스에 대한 폴리필이나 Async/Await 의 하위표준(ES3, ES5)으로의 컴파일을 지원
  • 2.5 에서는 함수추출, 메서드 리팩토리, 퀵 픽스 기능 추가
  • 2.7 에서는 컴파일러의 타입검사 기능 향상 대표적 특징으로는 엄격한 클래스 초기화(Strict Class Initialization)와 고정 길이 튜플(Fixed Length Tuples)이 있습니다.

타입스크립트의 아키텍처

  • 에디터
  • 독립서버
  • 언어 서비스 / 독립 TS 컴퍼일러
  • 코어 타입스크립트 컴파일러

컴파일러

타입스크립트의 아키텍처는 언어 변환 기능을 수행하는 코어 타입스크립트 컴파일러(core typescript compiler)를 기반으로 합니다.
코어 타입스크립트 컴파일러는 파서, 바인더, 타입체커, 에미터, 전처리기로 구성돼 있습니다.

  • 파서(parser) : 읽어 들인 소스코드를 해석해 구문 트리를 만들고, 구문 트리를 다시 해석해 추상 구분 트리(AST: Abstract Syntax Tree)를 생성한다.
  • 바인더(binder) : 인터페이스나 모듈 혹은 함수와 같은 모듈에 선언이 있을 때 이러한 선언을 심벌로 보고 심벌 간의 규칙을 정의한다. 타입 시스템은 바인더를 통해 명명된 선언을 추론 할 수 있게 된다.
  • 타입 체커(type checker) : 타입이 선언된 구문을 분석하고 타입이 적절한지 체크한다.
  • 에미터(emitter) : 입력된 *.ts 같은 타입스크립트 파일을 *.js, *.d.ts, *.js.map 유형의 파일로 생성하는 기능을 수행한다.
  • 전처리기(pre-processor) : 타입스크립트 파일에 선언된 import문이나 “/// ” 같은 외부 호출 선언이 있을 때 참조 할 수 있는 파일을 가져와 정렬된 파일 목록을 생성한다.

언어 서비스

언어 서비스는 코드를 컴파일해 도움말이나 코드의 포매팅, 코드 생상 지정 같은 편집기에 필요한 기능을 제공합니다. 언어 서비스는 편집기에서 코드 어시스트를 제공하는 근간입니다.

독립서버(standalone server)

독립서버는 컴파일러와 언어 서비스 같은 하위 레이어를 래핑해 JSON 형식을 통해 외부에 정보를 노출할 수 있게 합니다. 독립서버의 다른 이름은 tsserver 입니다.
IDE 나 편집기 개발에 필요한 기능을 명령어 형식으로 제공, 서버 형식에 맞게 JSON으로 요청하면 결과를 응답합니다.
독립서버는 타입스크립트의 개발 환경이므로 타입스크립트를 이용한 응용 개발에서 직접 다룰 일은 없습니다.

편집기

타입스크립트코드에 구문 오류나 타입 오류가 있는지 실시간으로 파악 할 수 있도록 코드 어시스트를 지원합니다.

개발환경 구축

타입스크립트는 npm을 통해 설치 할수 있다. npm의 사용을 위해 Node.js 를 설치한다.
https://nodejs.org/ko/

Node.js 가 재대로 설치됐다면 npm 명령어를 사용해 타입스크립트를 설치한다.

1
$ npm install -g typescript

아래 명령어를 사용하여 타입스크립트 버전을 확인 할수 있다.

1
$ tsc -v

타입스크립트 컴파일러

TypeScript 컴파일러(tsc)는 TypeScript 파일(.ts)을 입력받아 ECMA 스크립트(자바스크립트)의 특정 버전으로로 반환합니다.

컴파일링 : 한 언어의 소스코드를 다른 언어로 바꾸는 것
트랜스파일링: 한 언어의 소스코드를 비슷한 추상화 수준의 다른 언어로 바꾸는 것

관점에 따라 타입스크립트는 다른 언어인 자바스크립트로 바꾸므로 컴파일링 한다고 볼수 있지만 비슷한 추상화 수준의 다른 언어로 트랜스파일링 한다고 볼수도 있다.

간단한 코드를 작성해서 타입스크립트 코드를 자바스크립트 코드로 컴파일하고 이를 실행 해보자.

hello.ts
1
2
let hello: string = "hello TypeScript";
console.log(hello);

tsc 명령어로 컴파일 할 수 있다. tsc 명령어 뒤에 컴파일 대상 파일명을 작성하다. 이때 확장자 .ts 는 생략이 가능합니다.

1
tsc hello

변환 결과 hello 변수 타입인 string 이 삭제되고 hello.js 파일이 생성 됩니다.

hello.js
1
2
var hello = "hello typeScript";
console.log(hello);

Reference

타입스크립트 퀵스타트 - 루비페이퍼
TypeScript의 소개와 개발 환경 구축 - Poiemaweb

댓글

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×