[TypeScript] 왜 TypeScript를?

 요즘 TypeScript라는 말을 자주 본다. 이는 대세가 되었고 공부를 해보려고 한다. 이전에는 TypeScript는 웹 프런트 분야가 주로 사용하는 언어인 줄 알았다. 그러나 요즘은 백엔드 분야에서도 많이 사용된다는 말을 듣고 친근해지면 전적으로 좋겠다 느꼈다.

아직까지는 규모가 있는 프로젝트를 진행해보지 않았기에 JavaScript에 대해 크게 불편함을 느끼지 못했다. 하지만 프로젝트가 커진다면 이미 만들어진 스키마 위에서 작업을 하는 관정에서 자잘한 오타로 인한 에러가 발생되고 그 에러가 바로 보이는 것이 아니라 실행하면서 런타임이 되어서야 에러를 발견할 수 있다는 치명적인 단점이 있다고 한다.

 

 이러한 이유로 기존 JavaScript의 동적 타입 체계를 완전히 뒤엎어 기존의 타입을 통해 컴파일이 메모리 사용에 대한 최적화를 할 수 있는 언어로 바꾸는 것이 아니지만. 정적 타입 언어의 장점인 필드 전에 미리 오류를 검증할 수 있다는 장점만 합치는 방향으로 발전하게 되었다고 한다.

 

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

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

// 결과
NaN
NaN
3
7
"helloworld"

JavaScript를 이용해 위와 같은 add 함수를 정의하고 여러 값들을 넣어 사용해보자.

우리는 "add(1, 2)"의 결과 말고는 생각지도 못한 사용 방법이었고 원하는 결과도 아니다.

JavaScript는 이를 알려주지도 않고 사용자가 결과를 보고 문제가 뭔지 생각을 해봐야 된다.

 

또 다른 예제를 보면

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

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

위 함수는 인자로 받은 배열을 출력하는 동작을 한다.

결과를 보면 

1
2
3
Uncaught TypeError: ~~~

배열이 들어갔을 때는 잘 실행되었지만 두 번째와 같은 인자들이 들어갔을 때는 레퍼런스 오류를 보여준다.

이처럼 JavaScript는 런타임 시 타입이 결정되면서 오류도 그때 발견해 알려준다는 특징이 있다. Java와 같은 정적 타입 언어와 큰 차이점으로 정적 타입 언어는 컴파일 타임에 타입을 결정하며 바로 오류를 발견할 수 있다. 이는 코드를 적을 땐 오래 걸리겠지만 좀 더 안정적으로 코드를 작성할 수 있다.

 

JavaScript With Syntax For Types.

이곳에서는 TypeScript를 적으며 바로 변환된 JavaScript를 확인이 가능하다.

TypeScript는 이렇게 error를 나타네 준다. 빨간 줄 위에 마우스를 올리면 내용을 보여준다.

 

위 메시지를 보면 인자 두 개를 받아야 되지만 하나만 받았다고 보여준다. 이는 TypeScript가 바로 개발자의 실수를 보여줄 수 있다.

변수의 타입도 지정해 줄 수 있다. 위와 같이 num1, num2의 type을 number로 지정하니 문자열을 넣은 "add('hello', 'world')"에도 오류를 보여준다. 이렇게 개발자가 생각한 함수의 의도를 명확히 할 수 있도록 해준다.

이렇게 함수를 사용하려고 할 때 위와 같이 어떠한 type의 값들이 들어가야 되는지도 알려준다. 이렇다면 협업을 할 때 다른 개발자가 작성한 코드를 일일이 분석하지 않아도 사용이 가능하다.

 

두 번째 예시도 위와 같이 수정이 가능하다.

 

TypeScript는 브라우저가 읽지 못한다고 한다. 그래서 거추장스럽게 JavaScript로 변환을 해주어야 하지만 이는 개발 환경을 설정해주면 자동으로 해주는 것 같다. 그래도 불편함이 생기지만 왜 사용하는지 알 수 있을 것 같다. 아니 필수 같다.

 

이렇게 TypeScript를 왜 사용하는지 알아보았다.