TypeScript 란?

TypeScript란?

TypeScript는 자바스크립트를 확장하여 만들어진 오픈소스 프로그래밍 언어로 2012년경 마이크로소프트가 개발하였습니다. 2017년 2월 출시돼 구글의 표준 개발 언어로 승인된 2.2 이후에는 두 달에 한 번꼴로 출시가 이뤄지고 있습니다. TypeScript가 개발된 배경에는 자바스크립트를 사용한 대규모 애플리케이션을 개발할 때 복잡한 자바스크립트 코드를 다루기 위해 컴포넌트 군위 개발을 용이하게 하는 독자적인 툴이 필요하다는 점을 들 수 있습니다. 이때 자바스크립트의 단점을 보완하고 사용하기 불편함을 개선하여 대규모 개발에서 오류가 발생하기 어려운 언어로 설계되었습니다. TypeScript는 Google이 개발하는 프레임워크에도 도입되어 있어 장래성이 있는 언어 중 하나라고 할 수 있습니다.

TypeScript 특징

TypeScript는 자바스크립트의 엄밀한 슈퍼 셋(상위 호환)입니다. 자바스크립트와 달리 정적 형질을 할 수 있기 때문에 대규모 개발에서도 편리하게 사용되고 있습니다. 또한 ES2015(ES6) 이전에는 자바스크립트에는 클래스 개념이 없었기 때문에 당시에는 클래스를 사용할 수 있다는 특징도 있었지만 현재는 자바스크립트도 클래스를 사용할 수 있기 때문에 이 점에 대해서는 TypeScript만의 특징이라고 할 수 없게 되었습니다.

TypeScript는 자바스크립트와 호환성이 높다

TypeScript는 다른 AltJS와 마찬가지로 기술한 코드를 컴파일하면 JavaScript 코드로 변환하기 때문에 JavaScript와는 라이브러리권을 포함하여 100% 호환성을 가지고 있습니다. TypeScript에서 확장된 기능은 컴파일러를 통해 자바스크립트 코드로 변환됩니다. 현행 자바스크립트로 기술된 프로그램은 모두 TypeScript 프로그램으로 실행이 가능합니다.

TypeScript는 틀 정의 가능

TypeScript는 자바스크립트의 확장으로서 변수의 형 정의가 가능합니다. 틀 정의가 가능하여 변수에 정의한 틀과 할당한 값의 틀이 다를 경우 컴파일 오류가 발생하므로 버그 체크에 유용합니다. 또한 변수 선언 시 값을 전달함으로써 형 지정을 지정하지 않아도 자동으로 형이 선언된 것처럼 행동하는 '형 추론'이 가능합니다. 또한 자바스크립트와 다른 특징적인 기능으로 제네릭을 사용할 수 있습니다. 제네릭이란 틀을 추상화하여 실제로 사용될 때까지 틀이 확정되지 않은 클래스나 함수를 다루는 형이 인수를 말하며, 같은 기능을 가지고 있는 여러 함수를 하나로 묶어 코드의 중복을 줄입니다.

TypeScript와 JavaScript의 차이점

TypeScript에서는 자바스크립트와 동일한 구문이나 라이브러리를 사용할 수 있습니다. TypeScript와 JavaScript의 차이점으로 특징적인 것은 형식의 차이입니다. 자바스크립트가 실행 시 데이터형을 결정하는 동적 형틀인데 반해 TypeScript는 미리 형틀을 정의하는 정적 형틀로 되어 있습니다. 자바스크립트는 동적 형식이기 때문에 실행하기 전까지 오류의 존재를 깨닫기 어렵고 버그가 발생하기 쉬운 문제점을 가지고 있습니다. 그래서 TypeScript는 정적 형질을 채택하여 컴파일 시 버그의 존재를 쉽게 알아차릴 수 있도록 설계되어 있습니다. 또한 자바스크립트로 개발 중 많은 엔지니어가 직면한 "Uncaught TypeError: Cannot read property ** of undefined"를 피하기 위해 컴파일러 옵션에서 null이나 undefined 일 가능성을 가진 변수를 체크할 수 있습니다. 이렇게 언어 자체가 오류를 미연에 방지하고 버그를 발견하기 쉽도록 설계되어 있습니다. 더불어 TypeScript는 자바스크립트보다 코드가 간결하고 가독성이 높으며, Microsoft Visual Studio 등 통합 개발 환경을 활용하면 강력한 입력 보완을 이용할 수 있어 개발 효율이 현격히 향상됩니다. 간결한 코드와 개발 환경의 지원으로 자바스크립트와 비교하여 여러 명의 엔지니어가 참여하는 대규모 개발에 적합합니다.

TypeScript의 장점

자바스크립트 개발을 효율화하고 기능을 확장하는 AltJS 중에서 특히 TypeScript를 개발에 채택하는 이유로 TypeScript가 갖는 몇 가지 장점이 있습니다.

자바스크립트와의 호환성이 높음

TypeScript는 JavaScript의 엄밀한 슈퍼 셋(상위 호환)이 됩니다. 그렇기 때문에 자바스크립트 개발 환경이나 실행 환경이 있으면 바로 TypeScript를 도입할 수 있습니다. 또한 자바스크립트로 작성한 파일을 TypeScript에서 호출하거나 자바스크립트를 위해 개발된 라이브러리나 프레임워크를 TypeScript에서 사용할 수 있습니다.

오류를 방지할 수 있다

TypeScript는 생략 가능한 정적 형질 언어이기 때문에 변수의 형질을 코드 내에서 선언할 수 있습니다. 틀과 값이 다를 경우 컴파일 에러가 되므로 프로그램 전체의 에러를 방지할 수 있습니다. 또한 자바스크립트는 undefined 가 발생하기 쉬워 실행 시 오류의 원인이 됩니다. TypeScript는 컴파일러 옵션을 사용하여 null이나 undefined 일 가능성을 가진 변수를 체크함으로써 코드 문제를 발견하고 수정하기 쉽게 되어 있습니다.

자바스크립트 지식이 있으면 외우기 쉽다

TypeScript는 자바스크립트를 기반으로 기능을 확장하고 있습니다. 그렇기 때문에 자바스크립트와 기술 법이 가깝기 때문에 자바스크립트를 습득하고 있는 사람들에게 TypeScript는 기억하기 쉬운 언어라고 할 수 있습니다. 또한 자바스크립트 라이브러리나 프레임워크를 사용할 때 자바스크립트 지식이 필요할 수도 있습니다. TypeScript를 배우고 능숙하게 사용하려면 자바스크립트 지식이 있어야 원활하게 스킬 업이 가능합니다.

TypeScript와 JavaScript 프레임워크의 관계성

TypeScript에서는 JavaScript 용 프레임워크도 사용할 수 있습니다. 프레임워크를 사용하면 복잡한 기능의 추가 구현이 쉬워지고 애플리케이션 개발의 효율성이 향상됩니다. 자바스크립트에는 여러 프레임워크가 있으며, 각각 특징이나 TypeScript와의 관계성이 다릅니다. 아래에 몇 가지 소개하는 프레임워크는 모두 오픈 소스로 되어 있으며 GitHub에 저장소가 공개되어 있습니다.

AngularJS

Google을 비롯한 여러 기업과 개인을 포함한 커뮤니티에 의해 개발되고 있는 프런트 엔드 웹 애플리케이션 프레임워크입니다. 싱글 페이지 애플리케이션 개발이 가능하고, 하나의 프레임워크 내에서 모든 기능이 완결되어 있는 풀 스택 프레임워크인 것이 특징으로 꼽힙니다. 자바스크립트용 프레임워크로 개발되었으나 버전 2.0 이후에는 TypeScript로 개발이 권장되고 있습니다.

React

페이스북을 중심으로 한 커뮤니티가 개발하고 있는 사용자 인터페이스 구축에 적합한 프레임워크입니다. 단일 페이지 애플리케이션이나 모바일 애플리케이션의 개발 기반으로 사용할 수 있습니다. 라우팅 및 API와의 대화에는 추가 라이브러리를 사용합니다. 자바스크립트용 프레임워크로 자바스크립트 개발이 권장되지만 확장 기능을 이용하면 TypeScript도 사용할 수 있습니다.

Vue.js

Google에서 Angular JS의 개발에 종사한 Evan You 씨가 개발하고 있는, 프로그레시브 프레임워크입니다. 심플하고 자유도가 높으며 가볍고 동작이 빠른 것이 특징이며 웹 UI 개발에 필요한 부분만 채택하여 다른 라이브러리와 자유롭게 조합할 수 있습니다. 코어 라이브러리와 지원 라이브러리나 패키지가 나누어져 있기 때문에 부분적으로 필요한 경우 콤팩트하게 도입할 수 있는 것이 장점이라고 할 수 있습니다. Vue3.0은 TypeScript로 기술되어 있으며 확장 기능을 사용하지 않고 TypeScript로 개발이 가능합니다.