TypeScript - JavaScript의 슈퍼셋(Superset) 프로그래밍 언어

2024-11-15 POSTED.TypeScript Javascript

TypeScript

TypeScript란?

TypeScript는 마이크로소프트가 개발한 JavaScript 기반의 정적 타입 문법을 추가한 프로그래밍 언어다.
TypeScript는 JavaScript의 슈퍼 셋, 즉 상위 확장자로 JavaScript 엔진을 사용하며 자신이 원하는 변수의 타입을 정의하고 프로그래밍을 하면 JavaScript로 컴파일되어 실행할 수 있다.
여기서 컴파일이란 쉽게 말해 사람이 이해할 수 있는 언어를 컴퓨터가 이해할 수 있는 언어로 바꾸어 주는 과정을 말한다. Typescript는 Javascript와 달리 브라우저에서 실행하려면 파일을 한번 변환해 주어야 하는데 이러한 변환 과정을 컴파일이라고 칭한다.

왜 TypeScript를 사용할까?

앞서 말했듯이 우리가 사용하는 브라우저들(크롬, 엣지, 파이어폭스, 사파리 등)은 TypeScript를 이해하지 못한다.
그래서 Javscript로 변환해서 로드해야 진행할 수 있다.
이렇게만 들었을 땐 번거로울 것 같은데 무슨 장점이 있길래 TypeScript를 사용하는 걸까?

function add(num1, num2) {
    console.log(num1 + num2);
};

add(1,2); // 3
add(1,2,3); // 3
add('Petter', ' Parker'); // 'Petter Parker'

위와 같은 코드가 있다고 가정했을 때 add 함수는 숫자를 더하기 위한 목적으로 개발자가 만들었지만 인수를 잘못 넣어도 Javascript는 어떠한 힌트도 주지 않는다.
또한 문자열을 넣어도 정상적으로 작동하여 실수가 분명하더라도 알지 못하거나 직접 찾아봐야한다.
하나의 예시를 더 들어보자.

function showNumber(arr) {
    arr.forEach((i) => {
        console.log(i);
    });
};

showNumber([1,2,3]); 
// 1
// 2
// 3

showNumber(1,2,3);
// TypeError: arr.forEach is not a function

showNumber 함수는 배열을 받아 반복문을 실행하는 함수인데 배열이 아닌 다른 인수를 받게되면 forEach 메서드가 없어 TypeError가 발생한다.
이렇게 Javascript는 실행되는 시점, 즉 런타임에 타입이 결정되고 오류가 있다면 그 때 발견하게 되는 동적언어다.

반면 Java같은 정적언어는 컴파일 타임에 타입이 결정되고 오류가 발견된다.
그래서 코드 작성 시간은 오래 걸리겠지만 초기에 생각을 많이 해서 코드를 작성한다면 안정적으로 작업을 진행할 수 있는 장점이 있다.
TypeScript도 이러한 정적 타입의 언어이다.
브라우저에서 JS 변환 전, 오류를 발견하여 프로젝트가 커질수록 개발자의 의도와 맞게 동작하는지 확인하기가 어렵다는 Javascript의 단점이자 한계점을 보완할 수 있다.