[타입스크립트 개론]JS의 단점과 TS의 장점

해당 게시글은

강의 사이트, 인프런에서 이정환님이 진행하시는

'한 입 크기로 잘라먹는 타입스크립트' 를

들어보며 블로그를 작성하려고 합니다.

다음 게시글 내용은 해당 강의에 핸드북의 내용으로

출처는 다음과 같습니다.

 

https://ts.winterlood.com/7250edd7-a3fd-4662-b756-f11f927c73f2

타입스크립트를 소개합니다 - 타입스크립트 개론

 

이번에 살펴볼 주제는

자바스크립트의 단점과 타입스크립트입니다.

앞 게시글에선 타입스크립트에 대해 대략적으로 소개하는 글이었는데요.

요약하자면,

복잡한 대규모의 프로그램을 만들 때

자바스크립트의 한계점(엄격하지 못해 일어나는 안정성 문제)이

있었기 때문에 타입스크립트가 필요했고, 만들어졌습니다.

 

그래서 이번엔 자바스크립트에 구체적으로 어떤 한계점이 있고,

타입스크립트는 이런 한계점을 어떻게 극복하는지 살펴보도록 하겠습니다.

또 마지막으로 타입스크립트가 다른 언어들에 비해

어떤 차별점과 특징이 있는지까지 알아보겠습니다.

 

---

모든 프로그래밍 언어에는 타입 시스템이 있다

우선 자바스크립트에 정확히 어떤 한계가

왜 있었는지 이해하기 위해서

그리고, 앞으로 타입스크립트를 잘 배우기 위해서

먼저 알고가야 할 배경지식이 하나 있습니다.

 

그것은 바로 '타입 시스템' 인데요.

자바스크립트를 포함해 우리가 알고 있는 모든 프로그래밍 언어에는

사실 타입 시스템이라는 게 존재합니다.

 

타입시스템이란?

타입시스템은

언어에서 사용할 수 있는 아주 여러가지 값들을

어떤 기준으로 묶어서 타입으로 정할지 결정하고,

또 코드의 타입을 언제 검사할지,

그리고 어떻게 검사할지 등의

우리가 프로그래밍 언어를 사용할 때 타입과 관련해서

지켜야 하는 규칙들을 모아둔 체계입니다.

쉽게 말해 타입 시스템은

'언어의 타입 관련된 문법 체계'라고도 볼 수 있습니다.

 

이 타입 시스템은 크게 두 가지로 나눌 수 있는데요.

하나는 코드 실행 전에 모든 변수의 타입을

고정적으로 결정하는 정적 타입 시스템이 있고,

vs

나머지 하나는 코드를 실행하기 전에는

타입을 결정하지 않고 코드를 실행하고 나서

그때 그때마다 유동적으로 변수의 타입을 결정하는

동적 타입 시스템이 있습니다.

쉽게 말해

정적 타입 시스템은 엄격하고, 고정적인 시스템이라고 볼 수 있고,

동적 타입 시스템은 반대로 자유롭고 유연한 시스템이라고 볼 수 있습니다.

 

보통 C 나 JAVA 같은 엄격한 문법을 가진 언어들은

당연히 엄격한 정적 타입 시스템을 사용하고 있고,

파이썬이나 자바스크립트 같은 유연한 문법을 가진 언어들은

동적 타입 시스템을 사용합니다.

---

동적 타입 시스템

자바스크립트가 사용하는 동적 타입 시스템은

기본적으로 변수의 타입들을 코드가 실행되는 도중에 결정하기 때문에

미리 변수에 타입을 설정하지 않아도 된다는

유연함을 장점으로 갖습니다.

그리고 변수의 타입이

어떤 하나의 타입으로 딱 고정되지 않고

현재 변수에 담긴 값에 따라서 변수의 타입이

동적으로 계속해서 달라집니다.

 

아래 그림의 코드를 보면 변수 a 는

첫 번째 라인에서는 문자열 값을 담기 때문에

문자열 타입, string 타입이 되고,

vs

두 번째 라인에서는 숫자 값을 담기 때문에

숫자 타입, number 타입이 됩니다.

이런 특징은 하나의 변수에

다양한 타입의 값을 넣을 수 있기 때문에

변수 하나로 돌려가면서 여기저기 다 활용할 수 있다는

유연함을 장점으로 갖는데요.

반면에 큰 단점도 하나 있습니다.

 

 그림의 코드는 방금 살펴본 코드에서

가장 마지막 라인만 하나 추가한 코드입니다.

마지막 라인에서는 변수 a 에 toUpperCase 라는

문자열을 대문자로 바꿔주는 문자열 전용 메서드를 사용하고 있습니다.

이 코드를 실행하면 어떻게 될까요?

실행은 되지만 당연히 오류가 발생합니다.

그리고 프로그램이 비정상적으로 종료되죠.

이유는 toUpperCase 는 문자열에만 사용할 수 있는 메서드인데,

지금 변수 a 에는 숫자가 들어있기 때문이죠.

 

그런데 여기서 중요하게 살펴봐야 할 부분은

이 코드가 실행이 되기는 된다는 겁니다.

실행이 안되지는 않죠?

근데 사실 애초에 이렇게 오류가 발생할 코드였다면,

실행 전에 검사를 거쳐서 실행하지 못하도록 막는 게 좋습니다.

왜 그럴까요?

이유는 간단합니다.

지금 이 코드가 매우 간단해서 실행되자마자 오류를 확인할 수 있지만,

아주 복잡한 프로그램을 만들 때에는

코드도 따라서 매우 복잡해지고, 많아지게 되면서

저런 오류가 실행과 동시에 발생하지 않고,

한참 뒤에 발생하게 될 수 도 있기 때문입니다.

그럼 개발자들은 원래 잘 돌아갔는데,

갑자기 왜 오류가 발생한건지 예상하기 어렵고,

예기치 못한 오류의 발생으로 프로그램이 강제 종료되고

서비스가 마비될 수도 있습니다.

그렇기 때문에 프로그램이 실행 중에 발생하게 되면

치명적인 문제가 될 수 있습니다.

---

정적 타입 시스템

반면에 C 나 JAVA 와 같은 언어들은

정적 타입 시스템을 가지고 있는데요.

정적 타입 시스템은 코드를 실행하기 전에

모든 변수의 타입을 결정합니다.

 

자바스크립트와는 반대로

변수를 선언함과 동시에 타입도 함께 명시해 주어야 합니다.

그래서 앞서 살펴본 것과 같은 동적 타입 시스템에서

발생하는 문제는 이런 자바와 같은

정적 타입 시스템언어에서는 잘 발생하지 않습니다.

 

예제를 하나 보면서 왜 그런지 자세히 살펴보겠습니다.

지금 이 코드는 JAVA 코드인데요.

첫 번째 라인에선

문자열 String 타입의 변수 a 를 선언하고, "hello' 라는 값을 저장합니다.

vs

두 번째 라인에선

int 자바에선는 숫자 타입 변수 b 를 선언하고, 123 이라는 값을 저장했습니다.

vs

그 다음 세 번째 라인에선

숫자 타입 변수 c 를 선언하고 값으로는

문자열 타입의 값 a 와 숫자 타입의 값 b 를 곱한 값을

저장하라고 코드를 작성합니다.

 

그런데 이렇게 작성하면 에디터 상에서 바로 빨간줄로

"이 코드는 오류가 발생한다. 너 타입 지금 잘못 썼다."

라고 알려줍니다.

문자열과 숫자를 곱하는 연산은 불가능한 연산이기 때문에

이렇게 코드 실행 전에 타입을 잘못 사용했다고

타입 오류를 보여주고 있습니다.

 

이렇듯 자바스크립트 같은 동적 타입 시스템을 사용한는 언어와 달리

자바같은 정적 타입 시스템을 사용하는 언어는

타입 관련 오류가 있으면 에디터 상에서

애초에 오류를 바로 알려주고, 실행되기 전에

타입을 잘못 쓰지 않았는지 검사까지 모두 마치고 실행되기 때문에

오류가 있다면 애초에 실행이 불가능합니다.

 

그래서 정적 타입 시스템을 사용하는 언어는

프로그래머가 의도치 않은 실수를 하더라도

미리 확인할 수 있는 기회가 주어진다는 거죠.

 

정적 타입 시스템의 단점

자 그런데 이런 정적 타입 시스템이라고

모든 게 다 좋은 건 아닙니다.

아까 말했듯이 정적 타입 시스템 언어들에서는

모든 변수에 일일히 타입을 다 정의해야 하기 때문에

일단 매우 귀찮고, 

작성해야 하는 코드의 양이 상당히 늘어납니다.

그동안 작성했던 자바스크립트코드에

모든 변수에 타입을 정의해야 한다고 생각하면

굳이 자바스크립트를 쓸 이유가 없습니다.

---

타입스크립트와 점진적 타이핑

그래서 타입스크립트는

좀 독특한 타입 시스템을 사용하는데요.

마치 자바스크립트의 동적 타입 시스템과

자바의 정적 타입 시스템을 혼합한 것 같은

그런 독특한 타입 시스템을 사용합니다.

 

일단 타입스크립트에서는

마치 정적 타입 시스템처럼 변수의 타입을

코드 실행 전에 결정하고 타입 오류가 없는지

프로그램 실행 전에 코드를 검사합니다.

그래서 아래 타입스크립트 코드를 보면

변수 a 를 number 타입으로 정의했기 때문에

a 에 toUpperCase 같은 문자열 메서드를 사용하려고 하면

미리 오류를 띄워 알려줍니다.

그런데 타입스크립트는

이렇게 정적 타입 시스템처럼 안전하면서도

마치 동적 타입 시스템처럼 모든 변수에

일일히 직접 타입을 명시하지 않아도 됩니다.

 

다음 그림의 코드도 타입스크립트 코드인데요.

이번에는 변수 a 의 타입을 정의하지 않았습니다.

그럼에도 변수 a 를 숫자 타입으로 자동으로 인지해서

코드에 오류가 있음을 빨간 물결 줄로 알려줍니다.

타입스크립트에서는 이렇게 변수의 타입을 정의하지 않아도

변수에 담기는 초기값을 기준으로

마치 인공지능처럼 자동으로 타입을 알아서 추론합니다.

 

결론적으로

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

동적 타입 시스템의 타입의 안전하지 않은 문제를 해결하면서도

정적 타입시스템의 귀찮음도 동시에 해결하는 아주 훌륭한 타입 시스템이라고 볼 수 있습니다.

 

그리고 이런 타입시스템을 '점진적으로 타입을 결정한다' 라고 해서

'점진적 타입 시스템' 이라고 부릅니다.

영어로는 Graual Type System 이라고 합니다. 

쉽게 말해서 점진적으로 타입이 정의된 변수들에 대해서는 타입을 미리 결정하고,

타입이 정의되지 않은 변수들에 대해서는 타입을 자동으로 추론하는 그런 타입 시스템이라는 거죠.

---

정리

이번에 배운 내용을 정리하습니다.

 

1. 타입 시스템의 종류

모든 프로그래밍 언어에는

타입 시스템이 있고, 이 타입 시스템은 변수의 타입을 언제 결정하느냐에 따라서

실행 중에 결정하면 동적 타입 시스템,

실행 전에 결정하면 정적 타입 시스템이라고 배웠습니다.

 

 2. 동적 타입 시스템의 단점

자바스크립트 같은 동적 타입 시스템을 채택하는 언어에서는

코드에 관련 오류를 미리 검사할 수 없기 때문에

실행 도중에 예상치 못한 오류가 발생할 수 있다는 단점이 있습니다.

 

3. 타입스크립트는 점진적 타입 시스템이다

마지막으로 타입스크립트는 점진적 타임 시스템을 채택해서

정적 타입 시스템처럼 프로그램 실행 전에 타입을 올바르게 썼는지

타입 검사를 해 타입 안정성을 확보하면서도

동적 타입 시스템처럼 변수에 일일히 타입을 지정해주지 않아도 되는

유연함까지 확보한 독특한 타입 시스템을 갖추고 있는 언어라고 알아보았습니다.