"한 입 크기로 잘라먹는 타입스크립트 - 인프런" 강의를 요약하고 덧붙인 글입니다.

타입스크립트 등장 배경

타입스크립트는 자바스크립트의 상위 집합으로서, 기본적으로 자바스크립트의 모든 기능을 포함하고 있습니다. 이 말은 곧 자바스크립트를 배우지 않고서는 타입스크립트를 배울 수 없음을 뜻합니다. 타입스크립트의 기반이 되는 자바스크립트를 먼저 알아보며 타입스크립트가 등장한 이유를 살펴보겠습니다.

자바스크립트의 탄생

초기 웹 페이지는 정적인 HTML로만 구성되었고, 사용자와의 상호작용이 제한적이었습니다. 기존의 정적인 웹 페이지를 "어떻게 동적인 웹 페이지를 만들 수 있을까?"를 고민하였고 '자바스크립트'가 탄생합니다.

자바스크립트는 웹 브라우저에서 동작하는 간단한 사용자 상호작용을 위한 언어로 개발되었습니다. 웹 페이지에 삽입되는 스크립트 언어로 브라우저에서 바로 실행되었고 자바스크립트를 통해 웹 페이지에 동적인 기능과 상호작용을 추가할 수 있었습니다.

스크립트 언어(scripting language)란 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어를 가리킨다. 스크립트 프로그래밍 언어라고도 한다. 스크립트 언어 - 위키백과

스크립트 언어, 자바스크립트

자바스크립트는 1995년에 불과 10일 만에 만들어진 언어입니다. 웹 브라우저에서만 동작하고 경고창 띄우기와 같은 아주 간단한 사용자 상호작용을 처리하였기에 엄격한 문법을 갖출 필요가 없었습니다. 대신 아주 유연하게 설계되었습니다. 버그로부터의 안정성이나 견고함은 일부 포기하는 대신 프로그래머가 쉽고 빠르고 간결하게 코드를 작성하는데에 중점을 두고 만들어졌습니다. 또한 초기 웹 브라우저들은 인터넷 속도가 느리고, 컴퓨터의 성능이 현재와 비교해 상당히 낮았으므로 가벼운 스크립트 언어를 사용한 것이죠.

더 깊은 이해를 위해서는 - Typescript는 어떻게 공부해야 하나요?

그러나 웹이 발전하고 자바스크립트 실행 환경 'Node.js'가 등장하면서 웹 브라우저뿐만 아니라 어디서든 자바스크립트를 실행할 수 있게 되었습니다. 오늘날에는 웹 개발부터 모바일 애플리케이션을 만들거나 데스크탑 애플리케이션을 만드는 등 무엇이든 자바스크립트로 다양한 프로그램을 만들 수 있습니다.

자바스크립트 이상하다

여기서 문제가 발생합니다. 프로그램의 규모가 커지자 자바스크립트의 유연함이 버그 발생 가능성을 높이고 프로그램의 안정성을 떨어뜨리게 된 것이죠. 예를 들어,

• 자바스크립트의 동일 비교 연산자는(==) 인수를 강제로 변환하여, 예기치 않은 동작을 유발합니다.

  if ("" == 0) {
   // true, Number("") == 0 => 0 == 0 => true
  }
  if (1 < x < 3) {
   // true, 어떤 x 값이던 참!
  }
  true == "true" // false, Number(true) == Number("true") => 1 == NaN => false
  (번외) "b" + "a" + +"a" + "a" // "baNaNa", "b" + "a" + Number("a") + "b" => "b" + "a" + NaN + "a" 

  연산 과정에서 강제 형변환으로 결과를 예측하기 어렵습니다.
  (+) JS Is Weird: 자바스크립트의 이상한 문법 퀴즈 풀어보기
• 자바스크립트는 존재하지 않는 프로퍼티의 접근을 허용합니다.

  const obj = { width: 10, height: 15 };
  const area = obj.width * obj.heigth; // NaN, 10 * undefined

  문법 오류가 있더라도 자바스크립트는 오류를 출력하지 않고 실행됩니다. 즉, 프로그램을 실행해보지 않는 이상 어떤 문법 에러를 잡아낼 수 없습니다.
  

이렇게 예측하기 힘든 자바스크립트의 문제는 규모가 큰 프로그램에서 더욱 부각됩니다. 디버깅이 어렵고, 예기치 않은 동작이 여기저기서 발생할 수 있습니다.

이를 극복하기 위해 자바스크립트의 기존 문법은 유지하되 안정성을 확보한 언어가 필요해졌습니다. 이렇게 등장한 언어가 '타입스크립트'입니다.

자바스크립트의 한계점

위의 문제와 함께 자바스크립트가 어떤 한계가 왜 있었는지 더 구체적으로 들여다보겠습니다. 자바스크립트를 포함해서 모든 프로그래밍 언어에는 타입 시스템이라는게 존재합니다.

타입 시스템이란?
언어에서 사용할 수 있는 아주 여러가지 값들을 어떤 기준으로 묶어서 타입으로 정할지 결정하고 또 코드의 타입을 언제 검사할지 그리고 어떻게 검사할지 등의 우리가 프로그래밍 언어를 사용할때 타입과 관련해서 지켜야 하는 규칙들을 모아둔 체계.

타입 시스템은 크게 두가지로 나눌 수 있습니다.

• 코드를 실행하기 전에는 타입을 결정하지 않고 코드를 실행하고 나서 유동적으로 변수의 타입을 결정하는 '동적 타입 시스템'
• 코드 실행전에 모든 변수의 타입을 고정적으로 결정하는 '정적 타입 시스템'

동적 타입 시스템(Dynamic Type System)

변수의 타입을 코드가 실행되는 도중에(런타임에) 결정하기 때문에 개발자가 변수의 타입을 명시적으로 정의하지 않아도 됩니다.

let a = 'hello';

그리고 변수의 타입이 어떤 하나의 타입으로 딱 고정되지 않고 현재 변수에 담긴 값에 따라서 변수의 타입이 동적으로 계속해서 달라집니다.

let a = 'hello';
a = 2147483647

이처럼 유연하게 타입을 결정하고 간결한 코드 작성이 동적 타입 시스템의 장점입니다. 그러나, 큰 단점이 있습니다.

let a = 'hello';
a = 2147483647;
a.toUpperCase(); // ❌ Error 발생

위의 코드를 실행하면 실행은 되지만 오류가 발생하며 비정상적으로 종료됩니다. toUpperCase은 문자열을 대문자로 변환해 반환하는 문자열에만 사용할 수 있는 메서드입니다. 변수 a 값의 타입은 숫자(number)이므로 숫자 타입인 변수에 문자열에만 사용하는 메서드를 사용하니 당연히 오류가 발생합니다.

문제는 이 코드가 실행이 되기는 된다는 것입니다. 오류가 발생할 코드라면 실행 이전에 검사하여 실행되지 않도록 막는 것이 좋습니다. 복잡한 프로그램에서는 언제 터질지 모르는 시한폭탄과 같은 코드이기 때문입니다.

동적 타입 시스템은 프로그램이 런타임에 오류가 발생한다는 것이 치명적인 문제.

정적 타입 시스템(Static Type System)

반면에 정적 타입 시스템은 코드를 실행하기 전에 모든 변수의 타입을 결정합니다. 변수에 할당되는 값의 타입을 미리 명시하여 타입 오류를 사전에 방지할 수 있습니다.

#include <stdio.h>

int main() {
  int a = 123;
  char b[] = "hello";
    
  int c = a * b; // ❌ Error 발생
    
  return 0;
}

C 코드를 예로 들면 변수 a에는 정수 타입으로 값은 123을, 변수 b에는 문자열 배열로 값은 hello를 저장했습니다. a * b 연산은 정수 a와 문자열 b을 곱하는 불가능한 연산이므로 코드 실행 전에 타입 오류를 보여줍니다. 프로그래머가 실수를 하더라도 에디터 상에서 오류를 알려주기 때문에 바로잡을 기회가 주어집니다.

그러나, 정적 타입 시스템에도 단점은 있습니다. 모든 변수에 타입을 지정해주어야 하므로 개발 시간이 늘어날 수 있고 많은 타입 선언이 필요한 프로젝트의 경우 유지보수하는 것이 어려울 수 있습니다.

정리) 동적 타입 시스템과 정적 타입 시스템의 장단점

	동적 타입 시스템	정적 타입 시스템
장점	개발 속도와 유연성	타입 안정성
	짧은 코드 길이	코드 가독성
	자유로운 타입 변환이 가능	자동 완성과 코드 어시스트
단점	런타임 타입 오류	타입 선언의 부담
	타입 오류 발견의 어려움	개발 시간 증가
	디버깅 & 유지보수의 어려움	유연성 감소

타입스크립트의 독특한 타입 시스템

그래서 타입스크립트는 동적 타입 시스템과 정적 타입 시스템을 혼합한 것 같은 독특한 타입시스템을 사용합니다.

let a: number = 2147483647;

정적 타입 시스템과 같이 변수의 타입을 실행 전에 결정하고 타입 오류를 실행 전에 검사하여 알려줍니다. 타입스크립트는 정적 타입 시스템의 타입 안정성을 확보하면서도 동적 타입 시스템처럼 모든 변수의 타입을 직접 명시하지 않아도 됩니다.

그 이유는 타입스크립트에서는 변수의 타입을 직접 정의하지 않아도 변수에 담기는 초기값을 기준으로 자동으로 타입을 알아서 추론합니다.

let a = 2147483647;
a.toUpperCase(); // ❌ Property 'toUpperCase' does not exist on type 'number'

타입스크립트의 이런 독특한 타입 시스템은 동적 타입 시스템의 타입 안전하지 않은 문제를 해결하면서도 정적 타입 시스템의 귀찮음도 동시에 해결하는 멋진 타입 시스템입니다.

이런 타입시스템을 "점진적으로 타입을 결정한다"라고 해서 점진적 타입 시스템(Gradual Type System)이라고 부릅니다. 타입이 정의된 변수들에 대해서는 타입을 미리 결정하고 타입이 정의되지 않은 변수들은 타입을 자동으로 추론하는 타입 시스템.

정리하자면 타입스크립트는

자바스크립트를 더 안전하게 사용할 수 있도록 "타입 관련 기능들을 추가한 언어"로 자바스크립트의 확장판이라고 볼 수 있습니다.

타입스크립트는 점진적 타입 시스템을 채택해서 정적 타입 시스템처럼 프로그램 실행 전에 타입을 올바르게 썼는지 타입 검사를 해 타입 안정성을 확보하면서도 동적 타입 시스템처럼 모든 변수에 일일히 타입을 지정해주지 않아도 되는 유연함까지 확보한 독특한 타입 시스템을 갖추고 있는 언어!

Reference

• TypeScript: Handbook - The TypeScript Handbook
• 소개 - 한 입 크기로 잘라먹는 타입스크립트
• 1. 타입 스크립트에 대해 알아보자.