[Typescript] 타입스크립트를 쓰는 이유를 알아보자

브라우저들은 타입스크립트를 이해하지 못한다. 자바스크립트로 변환해서 로드해야 실행할 수 있다.

얼핏 생각해도 번거로울 것 같은데 어떤 장점이 있길래 타입스크립트를 쓰는 것일까?

 

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

add();    // NaN
add(1);   // NaN
add(1, 2);     // 3
add(3, 4, 5);  // 7
add('hello', 'world');  // "helloworld"

위 예시에서 add(1, 2)는 원하는 사용방식이고 결과도 잘 나오지만 나머지는 그렇지 않다.

원하는 결과가 나오지 않아도 자바스크립트는 에러 없이 실행된다.

 

function showItems(arr) {
	arr.forEach((item) => {
    	console.log(item);
    });
}

showItems([1, 2, 3]);  // 1
                       // 2
                       // 3
showItems(1, 2, 3);    // TypeError

인수로 배열을 전달했을 때는 잘 실행되지만 배열이 아니면 에러가 발생한다. 숫자에는 forEach라는 메서드가 없기 때문이다.

 

 

이처럼 자바스크립트는 동적언어로, 런타임에 타입이 결정되고 오류가 발견된다. 개발자가 실수하게 되면 사용자가 그 실수를 고스란히 볼 수 있는 것이다.

반면 자바, 타입스크립트와 같은 정적언어는 컴파일 타임에 타입이 결정되고 오류가 발견된다. 코드 작성 시간은 길어지겠지만, 초기에 생각을 많이 해서 코드를 짜둔다면 안정적이고 빠르게 작업할 수 있다는 장점이 있다.

 

위에서 든 예시들을 타입스크립트로 바꿔보자.

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

//add();
//add(1);
add(1, 2);
//add(3, 4, 5);
//add("hello", "world");

 

function showItems(arr:number[]) {
	arr.forEach((item) => {
    	console.log(item);
    });
}

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

타입이 맞지 않으면 에러가 발생해서 원하지 않는 결과가 나오는 것을 막을 수 있다.