타입스크립트 소개

Cornflower blue·2022년 8월 26일
0

"타입스크립트는 자바스크립트로 컴파일되는, 자바스크립트의 타입이 있는 상위집합이다."
이 문장에서 핵심이 되는 두 단어는 타입이 있는(typed)과 상위집합(superset)이다.

타입이 있는 자바스크립트

정확히 타입스크립트는 정적 타입 시스템(static type system)을 도입한 자바스크립트
정적 타입 시스템이 있는 언어, 즉 정적 타입 언어에서는 프로그램의 예상 동작을 타입을 통해 나타내고, 그 예상에 걸맞게 동작할 지의 여부를 타입 검사기를 통해 실행 전에 확인할 수 있다.
(함수의 인자나 리턴값등이 만족해야할 특정 조건에 대한 정보를 추가적으로 담고 있다는 의미)

자바스크립트의 상위집합

타입스크립트는 현존하는 자바스크립트의 문제를 풀기 위해 등장했고,
그 수단으로 정적타입분석을 내세웠다.
그렇다면 정적타입분석은 무엇이며, 어떤 장점을 제공할까?
정적 타입 분석을 제공하는 여러 대체재 중 타입스크립트를 사용해야 하는 이유는 무엇일까?
또 타입스크립트는 어떤 요소들로 구성되어 있으며, 어떤 역사를 가질까?


정적타입분석

타입은 프로그램의 '올바른 동작'이 무엇인지에 대한 프로그래머의 의도를 인코딩하는 수단이다.
프로그램의 타입을 분석하는 방식을 기준으로 프로그래밍 언어를 크게 둘로 나눌 수 있다. 바로 프로그램이 실제로 실행될 때에 타입분석을 진행하는 동적 타입언어와 프로그램을 실행해보지 않고도 런타임 이전에 진행하는 정적 타입 언어다.

정적 타입 분석이 제시하는 장점은 시스템의 평균적인 복잡도가 늘어남에 따라 빛나기 시작한다.

보다 빠른 버그 발견

정적 타입 시스템은 프로그램이 실제로 실행되기 전에 상당수의 오류를 잡아낼 수 있다.

툴링

소스 코드에 대한 정적 타입 분석이 가능하다면 컴파일러 및 코드 에디터가 코드를 실행하지 않고도 프로그램에 대해 훨씬 더 많은 정보를 알 수 있다. 그리고 이 정보는 코드 작성 과정에서 유용하게 사용 가능하다.
대표적인 예시가 바로 에디터의 자동완성 기능이다. 만약 타입 시스템이 어떤 변수의 타입 정보를 정확히 안다면, 해당 변수의 멤버로 존재할 수 있는 변수만을 자동완성후보로 추천할 수 있다.

주석으로서의 타입

마지막으로 타입은 프로그래머의 의도를 기술하는 주석과 같은 역할을 한다.
타입 검사기에 의해 검사 및 강제되므로 프로그램의 동작과 일정 수준 이상 괴리될수 없기 때문이다.

자바스크립트와 정적 타입 분석


왜 타입스크립트인가

자바스크립트의 상위집합

타입스크립트는 시작부터 수많은 기존 코드 베이스와 생태계의 포용을 큰 우선순위로 두었다.
모든 자바스크립트 코드는 타입스크립트 코드다. 때문에 타입스크립트 컴파일러는 확장자만 바꾸면, 심지어는 확장자를 바꾸지 않고도 자바스크립트 코드를 이해한다. 뿐만 아니라 타입스크립트는 최신ECMAScript 표준 및 여러 유용한 프러포절들을 지원한다.

  • 기존 자바스크립트 코드베이스의 마이그레이션에 드는 노력이 적다.
  • 완만한 학습 곡선을 가지며 그 덕에 구인 또한 쉬워진다.
  • 서드파티 자바스크립트 패키지의 사용이 상대적으로 수월하다.

트레이드 오프

(잘 이해 못함)


타입스크립트의 구성요소

언어 명세

타입스크립트의 언어 명세는 .ts(또는 .tsx) 확장자를 갖는 타입스크립트 코드가 어떤 의미를 갖는지에 대한 약속이다. 프로그래머들이 코드를 보고 동일한 예측을 할 수 있는 이유는 코드가 어떤 의미를 갖고 어떻게 동작해야하는지를 정확히 기술해 둔 문서, 즉 언어 명세가 존재하기 때문이다.

컴파일러

타입스크립트 컴파일러는 타입스크립트 코드를 입력으로 받아, 명세에 맞게 해석한 후 대응되는 자바스크립트 코드를 출력으로 내뱉는다.
컴파일러는 많은 부분의 합으로 이루어진 복잡한 프로그램이다. 대표적인 부품으론 코드를 읽고 구문을 해석하는 파서(parser), 타입 정보에 모순이 없는지 검사하는 타입 검사기(type checker), 그리고 브라우저가 실행 가능한 자바스크립트 파일을 뱉어 내는 에미터(emitter)등이 있다.

생테계


출처 : https://ahnheejong.gitbook.io/ts-for-jsdev/01-introducing-typescript/intro

profile
무언가를 만들어낸다는 것은 무척이나 즐거운 일입니다.

0개의 댓글