타입스크립트란?
MS에서 개발하고 관리하는 오픈소스 프로그래밍 언어로 어떤 브라우저나 호스트, 운영체제에서도 동작한다. 타입스크립트는 자바스크립트의 상위 집합으로서 ECMA의 최신 표준을 충분히 지원한다. 타입스크립트는 ES5를 포함하는 집합이기 때문에 기존의 ES5 자바스크립트 문법을 그대로 사용할 수 있다. 또한, ES6의 새로운 기능들을 사용하기 위해 Babel과 같은 별도 트랜스파일러를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진(현재의 브라우저 또는 Node.js)에서 사용할 수 있다.
타입스크립트의 장점
1. 정적 타입 언어(static type language)
타입스크립트는 정적 타입을 지원한다. 따라서 컴파일 시 시간이 조금 걸리더라도 안정성을 보장할 수 있다.
function sum(a, b) {
return a + b;
}
sum('x', 'y'); // 'xy'위 예시 코드는 어떤 타입의 인수를 전달해야 하는지, 어떤 타입의 반환값을 리턴해야 하는지 명확하지 않다. 자바스크립트의 동적 타이핑(Dynamic Typing)에 의한 것이다.
위 함수를 타입스크립트의 정적 타입을 사용해 다시 작성해 보자.
function 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'.타입스크립트는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착할 수 있다. 이처럼 명시적인 타입 지정은 개발자의 의도를 명확하게 코드로 기술할 수 있으며, 코드의 가독성을 높이고 예측할 수 있게 해 디버깅을 쉽게 한다.
자바스크립트의 경우 동적 타입 언어(dynamic type language)이기 때문에 런타임 속도는 빠르지만 안정성이 보장되지 않는다. 타입스크립트는 자바스크립트의 이러한 단점을 보완하기 위해 만들어진 것이다. 이러한 이유로 MS에서는 타입스크립트에 "JavaScript that scales(확장된 자바스크립트)"라는 슬로건을 만들었다.
2. 도구의 지원
IDE(통합개발환경)를 포함한 다양한 도구의 지원을 받을 수 있다. IDE와 같은 도구에 타입 정보를 제공함으로써 높은 수준의 인텔리센스(IntelliSense: 클래스, 함수, 변수, 구조체에 대한 직관적인 정보를 제공하기 위한 메카니즘), 코드 어시스트, 타입 체크, 리팩토링 등을 지원받을 수 있으며 이러한 도구의 지원은 대규모 프로젝트를 위한 필수 요소이기도 하다.
3. 강력한 객체지향 프로그래밍 지원
인터페이스, 제네릭 등과 같은 강력한 객체지향 프로그래밍 지원은 크고 복잡한 프로젝트의 코드 기반을 쉽게 구성할 수 있도록 도와준다. 또한, Java, C# 등의 클래스 기반 객체지향 언어에 익숙한 개발자가 자바스크립트 프로젝트를 수행하는 데 진입 장벽을 낮추는 효과도 있다.
4. ES6 / ES Next 지원
브라우저만 있으면 컴파일러 등의 개발환경 구축없이 바로 사용할 수 있는 ES5와 비교할 때, 개발환경 구축 관점에서 다소 복잡해진 측면이 있다. 하지만 현재 ES6를 완전히 지원하지 않고 있는 브라우저를 고려해 Babel 등의 트랜스파일러를 사용해햐 하는 현 상황에서 TypeScript 개발환경 구축에 드는 수고는 그다지 힘든 것이 아니다.
또한, TypeScript는 아직 ECMAScript 표준에 포함되지는 않았지만, 표준화가 유력한 스펙을 선제적으로 도입하기 때문에 새로운 스펙의 유용한 기능을 안전하게 도입하기에 유리하다.
5. Angular
Angular는 자바스크립트, Dart로도 작성할 수 있지만 TypeScript가 가장 많이 사용되고 있다. Angular 관련 문서의 예제 등도 타입스크립트로 작성된 것이 대부분이라 관련 정보를 얻을 때 이점이 있다.
타입스크립트의 특징
타입스크립트는 대규모 어플리케이션 개발에서 다음과 같은 세 가지 특징을 지원한다.
1. ES6 모듈 및 네임스페이스
타입스크립트는 ES6에서 제공하는 모듈 선언과 모듈 호출 방식을 지원한다. 또한 클래스가 커지고 개수가 많아지면 유사한 기능의 클래스들을 그룹으로 구분지어야 할 필요가 생기는데, 이 때 타입스크립트에서는 네임스페이스를 지원해 라이브러리 단위의 모듈 구성에 유리하다.
2. 클래스와 인터페이스
타입스크립트는 ES6의 클래스 특징을 받아들이고, 인터페이스 특징을 지원함으로써 완전한 객체지향 프로그래밍 환경을 제공한다. class, interface, extends처럼 전통적인 객체지향 언어에서 사용하던 키워드를 그대로 사용할 수 있다.
타입스크립트는 다중 생성자를 선언할 수 없으며, 디폴트 초기화 매개변수와 선택 매개변수를 선언할 수 있다.
3. 타입 시스템
타입스크립트는 타입 시스템을 지원한다. 타입 시스템은 자바스크립트의 타입을 확장하고 타입 ✔️어노테이션을 이용해 변수에 타입을 선언할 수 있게 한다. 이렇게 타입이 지정되면 변수는 엄격한 타이핑이 적용돼 타입 안정성을 확보한다.
✔️ 어노테이션
@를 이용한 주석으로 자바에서 사용한다. 컴파일러가 특정 오류를 억제하도록 지시하는 것과 같이 프로그램 코드의 일부가 아닌 프로그램에 관한 데이터를 제공, 코드에 정보를 추가하는 정형화된 방법이다.
코어 타입스크립트 컴파일러
타입스크립트의 언어 변환은 코어 타입스크립트 컴파일러에서 수행된다. 코어 타입스크립트 컴파일러는 파서, 바인더, 타입 체커, 에미터, 전처리기로 구성되어 있다.
파서(parser)
읽어들인 소스코드를 해석해 구문 트리를 만들고, 구문 트리를 다시 해석해 추상 구문 트리를 생성한다.
바인더(binder)
인터페이스나 모듈, 혹은 함수와 같은 모듈에 선언이 있을 때 이러한 선언을 Symbol로 보고 심벌 간의 규칙을 정의한다.
타입 체커(type checker)
타입이 선언된 구문을 분석하고 타입이 적절한지 체크한다.
에미터(emitter)
입력된 .ts같은 타입스크립트 파일을 .js, .d.ts, js.map 유형의 파일로 생성하는 기능을 수행한다.
전처리기(pre-processor)
타입스크립트 파일에 선언된 import문이나 외부 호출 선언이 있을 때 참고할 수 있는 파일을 가져와 정렬된 파일 목록을 생성한다. 파일 목록을 만들 때는 .d.ts보다는 .ts파일을 우선적으로 호출해 가져온다. 결국 컴파일러는 전처리기로부터 생성된 파일 목록을 이용해 파일을 호출하고 컴파일을 수행한다.
💡 요약
타입스크립트는 정적 언어로 자바스크립트의 상위 집합이다. 자바스크립트의 상위 집합이기 때문에 ES5 자바스크립트 문법을 그대로 사용할 수 있으며, ES6의 새로운 기능을 사용하기 위한 별도의 트랜스파일러(babel..)를 사용할 필요가 없다.타입스크립트는 정적 타입을 지원한다. 따라서 컴파일 시 시간이 조금 걸리더라도 안정성을 보장할 수 있다. 이처럼 명시적인 타입 지정은 코드의 가독성을 높이고 예측할 수 있게 해 디버깅을 쉽게 해준다.
또한, 타입스크립트는 다양한 도구를 지원한다. 타입스크립트를 이용해 개발시 타입체크, 리팩토링, 코드 어시스트 등의 도구 지원을 받을 수 있어 대규모 프로젝트를 진행하는데 유용하다.
이처럼 타입스크립트는 자바스크립트에서 발생할 수 있는 에러를 미리 방지해주고, 대규모 프로젝트 진행시 유용하다.
타입스크립트는 별도의 런타임 과정을 거치지 않고 바로바로 에러를 발견할 수 있기 때문에 리팩토링 시 유용하다.
해당 사이트를 참고해 작성했습니다.
