JavaScript의 단점, 그리고 TypeScript의 장점

프론트엔드 개발자들에게 있어서 타입스크립트는 많이 쓰는 언어 중 하나이다.
그렇다면 타입스크립트에 대해서 알아보자

타입스크립트의 탄생배경

우선 TypeScript란 기존의 JavaScript를 더 안전하게 사용할 수 있도록 "타입의 여러 관련 기능들을 추가한 언어"이다.
자바스크립트의 확장판으로 생각하면 편할것이다.

// JavaScript
let a = 1;
let b = 2;

console.log(a + b);

// TypeScript
let a:number = 1;
let b:number = 2;

console.log(a + b);

위 예제코드를 통해 타입스크립트는 변수에 대한 타입을 정의해둔 코드로 작성된다는것을 알 수 있다.
즉, 원래 사용하던 JavaScript문법 + 타입을 정의하는 문법을 추가한 것이다.

그렇다면 TypeScript는 왜 생겨났을까?

원래 자바스크립트는 아주 간단한 상호작용 수준을 처리하기 위해서 개발되었다.
그런데 어느날 node.js가 등장하면서 자바스크립트를 어디서든 구동해서 무엇이든 만들 수 있게 되었다.
(ex. 웹서버개발, 모바일앱, 데스크탑앱 등등)

그런데 이렇게 유연하고 자유로운 자바스크립트의 성격때문에 버그 발생가능성이 높아서 이러한 문제점을 해결하기 위해서
자바스크립트의 좋은점은 유지하되 타입이라는 안정장치를 추가하여 안정성을 확보해준것이 바로 타입스크립트이다.

JavaScript의 단점과 TypeScript

자바스크립트의 단점에 대해서 알아보고 타입스크립트는 이 단점을 어떻게 극복했는지, 그리고 다른 언어들과 비교해봤을때 어떤 차이점이 있는지 알아보기전에

먼저 타입시스템(Type System)에 대해서 알아보자

타입시스템

모든 프로그래밍 언어는 타입시스템이라는것을 가진다.

• 값들을 어떤 기준으로 묶어 타입을 규정할것인지?
• 코드의 타입을 언제 검사할지?
• 어떻게 검사할지?

이러한 규칙들을 모아놓은 체계를 타입시스템이라고 한다.
언어의 타입과 관련된 문법체계라고 생각하면 쉽다.

그리고 타입시스템은 크게 정적타입시스템과 동적타입시스템으로 나뉜다.

동적 타입 시스템

자바스크립트가 사용하는 동적 타입 시스템은 변수의 타입들이 코드가 실행되는 도중에 결정된다.
변수의 타입을 프로그래머가 직접 정의하지 않기때문에 변수의 타입이 하나로만 고정되어있지 않고 아무 타입의 값을 자유롭게 담을 수 있다.

let a = "hello"; // 문자열
a = 20230527; // 숫자

자바스크립트는 위와 같은 코드에서 문자열타입 > 넘버타입으로 타입이 유연하게 변할 수 있다.
여기서 한줄의 코드를 더 추가해보자

let a = "hello"; // 문자열
a = 20230527; // 숫자

a.toUpperCase();

위 코드에 a.toUpperCase();를 추가하고 코드를 실행하면 Type Error가 발생한다.
toUpperCase()메서드는 소문자를 대문자로 바꿔주는 메서드인데 변수a는 문자열에서 숫자타입으로 재할당 되었기때문에
타입에 맞지않은 메서드를 사용했으므로 Type Error와 같은 에러가 발생하였다.

예제코드의 경우 코드의 길이가 짧지만 더 길고 복잡한 코드를 작성한 후 실행하였을때 이러한 에러가 발생할 우려가 있기때문에
코드가 실행되기 전 검사를 통해 검사에 실패할 경우 실행이 안되게끔 막아주는것이 좋다.
(ex. 분명이 어제까진 잘 됐는데 오늘 갑자기 왜 안되는거임... 이런상황이 생길 수 있다.)

조금 더 극단적인 상황을 생각해보면 OTT 스트리밍 서비스 서버를 자바스크립트로 구축했다고 가정해보자.
이때 사용자들이 요즘 인기있는 드라마나 영화를 보고있었는데 갑자기 오류가 발생해서 서비스 전체가 셧다운이 되고 먹통이 되어버리면
사용자들의 불편함이 상당할 것이다.

즉, 자바스크립트는 코드를 실행하고 런타임 도중에 오류가 발생될 가능성이 있다.
이것은 굉장히 치명적인 문제점이 된다.

정적 타입 시스템

이번에는 정적 타입 시스템에 대해 한번 살펴보도록 하자.

정적타입시스템의 경우 코드가 실행되기 이전에 변수에 타입들을 결정해야하는 문법으로 구성되어 있어서 동적 타입 시스템에서 발생하는 문제점들이 정적타입 시스템에서는 잘 발생하지 않는다.

자바를 잘 모르더라도 해당 코드에 대해서 쉽게 살펴볼 수 있다.
우선 첫번째 라인 String a = "hello";는 문자열타입을 가지는 변수 a에 "hello"라는 값을 할당해주었고,
두번째 라인 int b = 123;은 숫자타입(int)을 가지는 변수 b에 123이라는 값을 할당해주었다.
자바의 경우 위 이미지와 같이 int c = a * b;를 입력할 경우 에디터상에서 잘못된 코드를 작성했음을 알려준다.

이렇게 정적 타입 시스템에서는 코드가 실행되기 전에 검사를 통해 오류가 있는지를 알려주고 오류가 있으면 실행되지 않게끔 되어있다.
그래서 프로그래머가 의도치 않은 실수를 하더라도 코드가 실행되기전에 실수를 미리 확인할 수 있는 장점이 있다.

하지만 정적타입 시스템이라고 반드시 좋은점만 가지고 있는것은 아니다.
정적타입시스템 언어들에서는 모든 변수에 타입을 다 지정해줘야하기 때문에 타이핑 양이 많아져 작업이 번거로워진다는 단점을 가지고 있다.

그래서 자바스크립트의 동적 타입 시스템과 자바와 같은 정적 타입 시스템을 합친 독특한 형태를 가진 타입스크립트가 탄생하게 되었다.
즉, 변수의 타입을 실행전에 결정한 후 타입 오류를 코드실행 전에 검사를 해주는 기능 + 동적 타입 시스템을 따른다.

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

위 두 이미지는 모두 타입스크립트 코드이다.
첫번째 이미지에서는 변수의 타입을 정의해주었고, 두번째 이미지에서는 변수의 타입을 정의해주지 않았다.
그러나 두 코드는 모두 a.toUpperCase();코드줄에서 코드가 잘못되었음을 에디터상에서 표시해주고 있다.

이것은 타입스크립트가 자바스크립트처럼 타입을 명시해주지 않아도 자동으로 변수 a의 타입을 숫자타입으로 지정해주었기때문에 이러한 에러를 표기해줄 수 있는것이다.

이처럼 타입스크립트는 정적 타입 시스템의 장점인 코드실행 전 오류에 대해서 검사를 해주는 안정성을 확보함과 동시에 동적 타입 시스템의 장점인 타입을 일일이 지정해줄 필요가 없는 점을 가지고 있다.

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

마무리 정리

모든 프로그래밍 언어에는 타입 시스템이라는 것이 존재하고 이러한 타입 시스템은 변수의 타입을 프로그래머가 언제 결정하느냐에 따라서 달라진다.
실행중에 타입이 결정되는것은 동적 타입 시스템, 실행 전에 타입이 결정되면 정적 타입 시스템이다.

그리고 타입스크립트는 점진적인 타입 시스템을 채택하여 정적 타입 시스템처럼 코드 실행 전에 타입을 올바르게 썼는지 검사를 해주는 안정성을 확보하면서도
동적 타입 시스템처럼 타입을 굳이 정의하지 않아도 자동적으로 타입을 추론해주는 유연한 시스템을 가지고 있다.

정적 타입 시스템 : 코드를 실행하기 전에 정적으로 변수의 타입을 결정하지만 모든 변수에 일일이 타입을 지정해줘야하기 때문에 타이핑 양이 증가하고 유연하지 못하다는 단점이 있다.
동적 타입 시스템 : 코드를 실행하면서 유동적으로 변수의 타입을 결정하지만 코드의 타입 오류를 미리 검사할 수 없어 예기치 못한 오류가 발생할 수 있다는 단점이 있다.
타입스크립트 : 코드 실행 전 검사를 통한 타입 안정성을 확보하고 자동으로 변수의 타입을 추론한다.

 

관련 강의 : 인프런 - 한입 크기로 잘라먹는 타입스크립트