타입스크립트와 자바스크립트의 차이

타입스크립트는

 

자바스크립트의 모든 기능을 지원하며 단지, 자바스크립트 위에 타입 시스템이라는 추가적인 레이어를 추가한 것입니다. 즉, 여러분이 작성한 자바스크립트 코드는 타입스크립트라고 할 수 있습니다. 타입스크립트의 주요 이점은 여러분이 예상하지 못한 돌발 상황을 쉽게 발견할 수 있게 해 주고, 버그의 가능성을 낮춰준다는 점입니다.

 

자바스크립트와의 차이

 

자바스크립트를 사용하다보면 자주 undefined를 마주하게 됩니다. 자바스크립트는 타입을 엄격하게 따지지 않기 때문에 '이 값이 왜 여기서 나와?' 하는 경우에는 그냥 undefined로 취급해 버립니다. 이것은 어떻게 보면 장점이라고 할 수도 있습니다. 개발자가 작성한 코드에 사소한 문제가 있더라도 자바스크립트는 최대한 성실하게 코드를 실행하기 위해 노력합니다. 곧바로 예외를 던져 페이지 전체의 렌더링에 실패하게 만드는 대신, 일부 영역 또는 기능에 국한되어 문제가 발생하게 됩니다.

하지만 개발을 하다보면 여간 불편한 것이 아닙니다. 모든 페이지에서 F12를 눌러 콘솔창을 확인하지 않으면 스크립트 오류가 발생했음에도 그냥 넘어가는 경우도 종종 생깁니다. 사람이 하는 일인 이상 처음부터 완벽한 프로그램을 만들 수 있는 개발자는 없죠ㅡ완벽한 프로그램이 존재하는가의 문제는 차치하고ㅡ수차례의 시행착오와 테스트를 거쳐 비로소 완성된 프로그램이 탄생하게 됩니다.

그런데 명백한 실수를 했음에도 컴파일러가 이를 알려주지 않고 좋은 게 좋은 거지~ 하면서 넘어가 버리면 이를 바로잡을 기회를 놓치게 됩니다. 테스트 단계에서 발견되거나 최악의 경우는 고객이 사용 중에 발견하게 되겠죠.

누군가로부터 오류가 발생한다는 이야기를 듣고 개발자 도구를 열어봤을 때 빨간 글씨가 발견되는 경우는 그나마 다행이라고 할 수 있습니다. 자바스크립트가 아무것도 알려주지 않아 문제를 파악하기 어려운 경우도 생기기 때문입니다.

예를 들어, 두 개의 인자를 받아서 곱한 결과를 반환하는 함수를 작성한 다음 숫자가 아닌 문자를 넣어주면 결과는 어떻게 될까요?

> function multiply(op1, op2) {
	return op1 * op2
}

> multiply('1', 2)

 

자바라면 컴파일 단계에서 다음과 같은 구문(Syntax) 에러를 발생시킵니다.

java: incompatible types: java.lang.String cannot be converted to int

 

자바스크립트는 에러를 발생시키지 않고 그저 숫자가 아니다(Not a Number) 라는 계산 결과를 던집니다.

NaN

개발자는 코드를 한참 뜯어보고 나서야 multiply에 숫자대신 문자를 넣었기 때문에 원하는 결과가 나타나지 않았음을 알 수 있겠죠.

반면, 타입스크립트는 숫자 타입에 문자열을 할당할 수 없다는 에러를 개발 단계에서 알려줍니다.

multiply를 작성할 때 숫자 타입을 지정해줘야하는 수고는 따르지만요.

function multiply(op1: number, op2: number) {
  return op1 * op2
}

물론 타입스크립트도 타입 추론이 가능하기 때문에 항상 타입을 명시해줘야 하는 것은 아닙니다.

let a = 10;
let a: number = 10;

변수를 선언 및 할당하는 경우 타입스크립트 컴파일러가 a의 타입을 number로 추론할 수 있기 때문에 위 두 가지 선언의 결과는 같게 됩니다.

이렇듯 타입 안전성(type safety)을 보장한다는 점이 자바스크립트와 비교했을 때 타입스크립트의 가장 큰 특징이라고 할 수 있습니다.

또, 자바스크립트는 런타임에 타입을 결정하는 동적 타입 바인딩 언어이며, 타입 확인과 에러 검출 역시 런타임에 이루어지고 타입 자동 변환이 가능한 반면

타입스크립트는 컴파일 시점에 타입을 확인하고, 에러를 검출하며 점진적으로 타입이 결정됩니다. 대부분의 경우 타입 자동 변환도 안 됩니다.

 

타입스크립트 작동원리

 

타입스크립트 컴파일러는 타입스크립트 소스를 타입스크립트AST(Abstract Syntax Tree, 추상 구문 트리)로 바꿔줍니다.

그다음 타입체커가 AST를 검사하고 문제가 있으면 알려줍니다.

그리고 AST는 다시 자바스크립트 소스로 변환됩니다.

이하는 자바스크립트 작동 방식과 같은데,

자바스크립트 소스 역시 컴파일러에 의해 자바스크립트 AST로 변환되고, 다시 바이트코드로 바뀝니다.

런타임이 바이트코드를 평가하여 실행이 이루어집니다.

* 자바스크립트 컴파일러와 런타임을 합쳐서 엔진이라고 한다. ex) V8

 

타입스크립트를 사용하는 이유

 

타입스크립트는 개발자가 자바스크립트를 사용하면서 겪게 되는 문제들을 해결해 줍니다. 즉, 설계단계에서부터 개발자의 의도를 명시하여 이해하기 쉬울 뿐 아니라, 컴파일 단계에서 에러 검출을 할 수 있도록 하여 오류 발생 가능성을 줄일 수 있습니다. 그래서 한국의 스타트업이나 잘 나가는 IT 기업들은 타입스크립트를 많이 사용하고 있습니다. 

 

타입스크립트를 사용하지 않는 이유

 

ai에게 문의한 결과 추가적인 학습과 개발 환경 세팅, 호환성 때문이라고 하는데 이건 기존에 사용하던 언어에서 다른 언어로 넘어가는 경우에 공통적으로 발생할 문제점이라고 생각되구요.

타입스크립트의 특성에 따른 이유를 찾아보자면 규모가 작은 프로젝트에서는 타입스크립트를 사용할 필요가 없을 수 있다고 합니다. 또 타이핑할 양 자체가 늘어나는 것을 귀찮아할 사람들도 많겠죠.

기업 사정에 따라서 타입스크립트를 도입할 수도 하지 않을 수도 있는 거지만

리액트, 타입스크립트가 점점 대세로 굳어지고 있는 만큼 여러분이(제가) 타입스크립트를 공부하지 않을 변명으로 삼기에는 조금 빈약하지 않나 싶습니다.

 

참조

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

타입스크립트 프로그래밍 - 보리스 체르니