타입스크립트 - 탄생

타입스크립트라는 언어를 들어보았을 것이다.
자바스크립트와 문법은 비슷하지만 눈에 띄게 다른 점이 있다. 
그것은 바로 JS와는 다르게 타입이 적혀있다는 점이다.
그럼 왜 JS를 대신해서 TS가 나오게 되었는지에 대해 생각해보자.
 
JS라는 언어는 어떤 언어일까?
JS는 일반 문법 + 셀프(프로토타입 객체) + 스킴(일급 함수 개념) 언어를 합쳐서 탄생하게 되었다.
여기서 일급 함수란 함수를 데이터처럼 취급하는 것이다.
함수를 변수로 사용, 인자로 전달, 반환값으로 사용한다는 말이다.
이로 인해, 함수형 프로그래밍, 비동기, 클로저로의 사용이 가능해졌다.
 
옛날 브라우저는 각 브라우저마다 DOM이 달랐다. 이로 인해 크로스 브라우징과 같은 충돌이 발생했다.
JS도 브라우저마다 동작 차이가 발생했다. 이를 예방하기 위해 폴리필과 트랜스파일 같은 기능을 도입했다.
폴리필은 구형 브라우저가 이해할 수 있도록 최신 함수를 바꾸는 기능이고,
트랜스파일은 최신 브라우저 코드를 구형 브라우저 코드로 바꾸는 기능이다. Babel이 예시로 있다.
 
이러한 상황에서 JS가 표준으로 채택되었고, 브라우저가 동적으로 관리되기 시작되었다.
웹 사이트와 웹 애플리케이션의 차이가 뭘까?
우선, 둘 다 JS를 가지고 있다.
웹 사이트는 정적인 사이트로, 주로 데이터 확인 등의 역할을 가진다.
웹 애플리케이션은 동적인 사이트로, 데이터 입력 등의 상호작용이 가능하다.
이러한 동적인 웹 서비스가 증가하면서 JS의 사용도 늘어났다.
 
또한, 컴포넌트 베이스 개발(CBD)가 유행했다. 
데이터를 구분해 UI로 표현하는 컴포넌트 단위 접근이 늘어났다. 이 때, 컴포넌트는 재사용이 가능하며, 독립적으로 존재할 수 있으며, 컴포넌트 간 유기적인 데이터 흐름 가졌다.
 
JS가 유행하면서 이에 따른 한계도 들어났다.
JS는 동적 타입 언어로 런타임 시 변수 타입을 결정한다. 또한, 타입에 관대해서 동적 타이핑 시스템이 가지는 한계를 보였다.

const f = (a, b) => a + b;
f("a",1);

 
문자열과 숫자를 더해도 오류 없이 계산이 된다.
 
이를 해결하기 위해 JSDoc, propTypes, Dart가 등장했다.
JSDoc은 주석에 대한 의존도가 과하게 높다는 , propTypes는 prop이라는 특수한 상황에 사용된다는 점, Dart는 JS 언어 대체하는 새로운 언어라는 점에서 해결 한계를 가졌다.
 
이러한 문제를 해결하기 위해 TS가 등장했다.
TS는 JS 언어를 그대로 사용하는 슈퍼셋 언어이다. 슈퍼셋이란 기존 언어를 보완한다는 의미이다.
1. 안정성 보장: 컴파일 단계(TS -> JS)에서 타입을 검사한다. 런타임 에러를 방지한다.
2. 개발 생산성 향상: 자동 타입 완성 기능을 제공한다.
3. 협업: 인터페이스, 제네릭 등 많이 사용하는 기능을 제공하여 협업 능력을 높인다.
 

정리

TS는 왜 우리 앞에 나타났을까?

 
웹 생태계가 웹사이트에서 웹 애플리케이션으로 진화하며 JS의 역할이 비대해졌다. 컴포넌트 중심 개발이 주류가 되면서 수많은 데이터가 컴포넌트 사이를 오가게 되었다.
하지만, JS의 역할이 커지면서 한계가 드러났다. JS는 본래 유연함을 강조하는 동적 타입 언어이다. f("a", 1) 같이 타입이 다른 함수의 매개변수 덧셈을 오류 없이 실행되게 한다. 규모가 큰 프로젝트일수록 이러한 관대함은 시한 폭탄으로 작용했다. 이를 해결하기 위해 JSDocs, propTypes, Dart 같은 대안이 나왔지만 각각의 한계가 명확했다.
이러한 한계를 해결하기 위해 TS가 등장했다. JS의 슈퍼셋 언어로, 컴파일 단계에서 타입 검사를 실시해 런타임 전에 미리 오류를 잡아내는 안정성을 제공했다. 자동 완성 타입 등의 편리성을 제공하며, 협업에 좋은 도구를 제공하면서 JS의 동적 타입 언어의 문제를 잡을 수 있었다.
 
다음은 TS의 기본 타입에 대해 알아볼 것이다. 
 
 for ... in

is, as

 

partial, omit, pick

함수 오버로딩

extends

extract

제네릭

 

.d.ts

declar module

namespcae