JavaScript 의 타입 시스템
JavaScript 는 공식적으로 boolean, null, undefined, number, bigint, string, symbol, object 타입을 가지고 있습니다.
기본적으로 JavaScript 는 동적 타입 언어입니다. 동적 타입이란, 변수의 타입을 컴파일할 때 (정적) 대신 실행할 때 (동적) 결정하는 것입니다.
즉 아래와 같습니다. 비슷한 언어로는 python 등이 있습니다.
let a = 1; // number 타입
console.log(a); // 1
a = "asdf"; // string 타입
console.log(a); // "asdf"
a = null; // null 타입
console.log(a); // null반면 정적 타입 언어로는 C, Java 등이 있습니다. 이 언어에서 코드는 컴파일 타임에 아래와 같이 동작합니다.
int a = 1;
a = true; // Compile ERROR: boolean 타입을 int 타입에 할당할 수 없습니다
boolean b = true;
boolean c = b + 1; // Compile ERROR: boolean 타입에 "+" 연산자를 이용할 수 없습니다정적 타입 검사의 필요성
정적 타입 검사를 하지 않는다는 건 코드가 덜 피로하고 더 유연하게 동작하도록 도와줄 때도 있지만, 오류를 발생시킬 때도 있습니다. 특히 자바스크립트처럼 타입 자동변환에 일관성이 없는 언어의 경우 더 그렇습니다. (이런 특성은 수많은 자바스크립트 밈을 탄생시켰습니다.)
가령 아래와 같은 경우가 있을 수 있습니다.
const colorMap = {
red: "#FF0000",
grean: "#00FF00", // green 인데 grean 으로 오타가 남
blue: "#0000FF"
};
const greenColor = colorMap.green; // #00FF00 을 의도했으나, 실제로는 undefined
document.getElementById('test').color = greenColor; // 의도대로 동작하지 않음이외에도 정말정말 다양한 오류들이 발생할 수 있습니다. 우리에게 친숙한 아래 에러가 보여지면서 사이트가 하얗게 터져버리기도 합니다.
따라서 자바스크립트에서 정적 타입 검사를 도와주면 좋지 않을까 하는 아이디어들이 나오게 되었습니다.
여러 정적 타입 검사 도구들
정적 타입 검사를 하려면 그걸 언어 레벨에 녹여내야 하겠죠? 언어의 레벨에서 컴파일 단계에서 javascript로 변환되는 도구로는 TypeScript, ReScript, Kotlin 등이 있습니다. 또한 javascript 언어에 주석으로 타입을 체크해주는 도구로는 Flow 가 있습니다.
이중 현재 웹 생태계의 1인자는 단연 TypeScript 입니다. javascript 생태계에서 다른 것들을 사용하는 건 눈을 씻고 찾아봐야 할 수준으로, 대부분의 정적 타입 체커를 이용하는 프로젝트가 TypeScript 를 이용하고 있습니다.
작년까지만 해도 논쟁의 여지가 있었으나, 2022년 11월 현재 자바스크립트 생태계는 TypeScript가 완전히 지배해버린 형태로 흘러가고 있다고 보여집니다.
아래 사진은 stateofjs 에서 조사한 표입니다. (링크)
타입스크립트의 장점
정적 타입 검사
당연한 이야기이지만 정적 타입 검사가 이루어집니다. 이를 통해 개발자의 실수를 미연에 방지할 수 있습니다.
또한 이 덕분에 자동완성도 편해졌는데, 정적 타입 검사가 불가능했을 땐 그럴 수 없었지만 이젠 IDE가 확신에 차서 프로퍼티를 추천해줄 수 있습니다.
거대한 생태계
앞서 봤던 거대한 생태계에 의해, 가장 빠르고 넓게 성장하고 있습니다. 생태계가 넓다는 건 항상 매력적이죠. 개발 중 "고통받는" 시간을 몇 배는 줄여 주니까요.
사실 이 파트를 열심히 쓰기엔, 이미 javascript vs typescript 는 싸울 의미가 없을 정도로 typescript 가 무조건 정답인 상태입니다.
그럼 다음 글에서부터, TypeScript 에 대해 알아보겠습니다!
