[ TypeScript ] JavaScript vs TypeScript (동적타입/정적타입)

💡 타입 시스템이란?

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

 

 

타입 시스템은 크게 두가지로 나눌 수 있습니다. 코드 실행 전에 모든 변수의 타입을 고정적으로 결정하는 정적 타입 시스템과 코드를 실행하기 전에는 타입을 결정하지 않고 코드를 실행하고 나서 그때마다 유동적으로 변수의 타입을 결정하는 동적 타입 시스템입니다.

 

 

 

💡 동적 타입 시스템

자바스크립트의 동적 타입 시스템은 기본적으로 변수의 타입을 코드가 실행되는 도중에 결정하기 때문에 미리 변수 타입을 설정하지 않아도 된다는 유연함을 장점으로 가지고 있습니다. 그리고 변수의 타입이 어떤 하나의 타입으로 딱 고정되지 않고 담긴 값에 따라서 변수의 타입이 동적으로 계속 달라집니다.

 

 

위 코드를 보면 변수 a는 첫번째 줄에서는 문자열(string) 타입, 두번째 줄에서는 숫자(number) 타입이 됩니다.

이렇게 하나의 변수에 다양한 타입의 값을 넣을 수 있기 때문에 변수 하나로 다양하게 활용할 수 있다는 유연함을 장점으로 가집니다. 반면에 이 때 단점도 존재합니다. 마지막 줄 코드를 보면 변수 a에 toUpperCase라는 문자열을 대문자로 바꿔주는 문자열 전용 메서드를 사용하였습니다.

 

 

이 코드는 실행은 되지만 오류를 발생시키며 비정상적으로 종료됩니다. 왜냐하면 toUpperCase는 문자열에서만 사용할 수 있는 메서드인데 현재 변수 a에는 숫자가 담겨있기 때문입니다 😭 그런데 여기서 중요한 점은 이 코드가 실행이 되기는 한다는 점입니다. 이렇게 오류가 발생할 만한 코드였다면 실행 전에 검사를 거쳐 실행하지 못하도록 방지하는 것이 좋습니다.

 

 

 

💡 정적 타입 시스템

C나 Java 같은 언어들은 정적 타입 시스템으로 코드를 실행하기 전에 모든 변수의 타입을 결정합니다. 자바스크립트와는 달리 변수를 선언함과 동시에 타입도 함께 명시해주어야 합니다. 그래서 앞서 살펴본 것과 같은 동적 타입 시스템에서 발생하는 문제는 자바와 같은 정적 타입 시스템 언어에서는 잘 발생하지 않습니다.

 

 

첫번째 줄에서는 문자열 String 타입의 변수 a를 선언하고 "hello"라는 값을 저장합니다.

두번째 줄에서는 숫자 int 타입의 변수 b를 선언하고 123이라는 값을 저장합니다.

세번째 줄에서는 숫자 int 타입의 변수 c를 선언하고 문자열 타입의 값 a와 숫자 타입의 값 b를 곱한 값을 저장합니다.

 

이때, 문자열과 숫자를 곱하는 연산은 불가능한 연산이기 때문에 코드 실행 전에 타입 오류 문구가 나타나는 것입니다. 이렇게 자바같은 정적 타입 시스템을 사용하는 언어는 타입 관련 오류가 있으면 타입 오류를 바로 알려주고 실행 전에 타입을 잘못 쓰지는 않았는지 검사를 모두 마치고 실행되기 때문에 오류가 있다면 애초에 실행이 불가능합니다.

 

 

 

💡 정적 타입 시스템의 단점

그렇다고 해서 정적 타입 시스템이 모두 좋은 것만은 아닙니다. 정적 타입 시스템 언어들은 모든 변수에 하나하나 타입을 정의해야 하기 때문에 우리가 작성해야하는 코드의 양이 상당히 늘어납니다. 그동안 작성했던 자바스크립트 코드에 이와 같이 모든 변수에 타입을 정의해야한다고 생각한다면 상당히 타이핑할 코드양이 많아지겠죠?

 

 

 

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

그래서 타입스트립트는 자바스크립트의 동적 타입 시스템과 자바의 정적 타입 시스템을 혼합한 것 같은 독특한 시스템을 사용합니다. 일단 정적 타입 시스템처럼 변수의 타입을 코드 실행 전에 결정하고 타입 오류가 없는지 프로그램 실행 전에 코드를 검사합니다. 위 타입스크립트 코드를 보면 변수 a를 number 타입으로 정의하였기 때문에 a에 toUpperCase와 같은 문자열 메서드를 사용할 수 없다고 오류를 띄워주는 것입니다. 하지만 타입스크립트는 동적 타입 시스템처럼 모든 변수에 직접 타입을 명시하지 않아도 됩니다.

 

 

위 코드도 타입스크립코드인데 이번에는 변수 a에 타입을 정의하지 않았습니다. 하지만 숫자 타입으로 자동으로 인식하였기 때문에 코드에 오류가 있다고 빨간줄로 표시된 것입니다. 타입스크립트에서는 이렇게 변수의 타입을 직접 정의하지 않아도 변수에 담기는 초기값을 기준으로 타입을 자동 추론합니다. 이와 같은 타입 시스템을 점진적으로 타입을 결정한다는 의미로 점진적 타입 시스템이라고 부릅니다.

 

 

 

🌱 정리

 

 

 

출처) 한 입 크기로 잘라먹는 타입스크립트(TypeScript)_이정환