TypeScript - 사용하는 이유

TypeScript

우리가 사용하는 브라우저들은 타입스크립트를 이해하지 못합니다. 결국 자바스크립트로 변환하고, 로드해야 브라우저들이 이해할 수 있습니다. 이런 절차를 거쳐야하기에 번거러울 것 같지만, 확실한 장점이 있어서 타입스크립트를 사용합니다.

동적언어와 정적언어의 오류체크 방식

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

	add(); //결과: NaN
	//아무런 인수를 넣지 않아도 자바스크립트는 이 코드를 아무런 문제 없이 실행합니다.
	//Undefined + Undefined로 계산했기 때문
	add(1); //결과: NaN
	//1 + Undefined로 계산했기 때문
	add(1, 2); //결과: 3
	add(3, 4, 5); //결과: 7
	//12를 예상하고 함수를 실행했겠지만 자바스크립트는 인자가 하나 늘어나도 에러로 잡지 않습니다.
	add('hello', 'woeld'); //결과: "helloworld"
	//숫자를 더하기 위해 만든 함수이지만 문자열을 넣어도 합쳐주었습니다.

위 코드에서 add(1,2);를 제외하고는 원하는 사용 방식도 아니고, 원하는 결과도 얻을 수 없습니다. 하지만 자바스크립트에서는 어떠한 오류도 잡지 않고, 심지어 문제 없이 실행되었습니다.

	function showItems(arr){
      arr.forEach(item) => {
        console.log(item);
      });
    }
	
	showItems([1,2,3]);
	// showItems(1,2,3); //이 코드를 각주처리하지 않으면 실행되지 않습니다.

위 코드에서 마지막 줄의 코드를 각주처리하지 않으면 에러가 발생합니다. Javascript가 동적언어여서 런타임때 타입이 결정되고, 이때 오류가 발생된다는 것입니다. 이는 개발자가 실수한 것이 그대로 사용자에게 노출될 수 있음을 의미합니다.
하지만 Java나 TypeScript처럼 정적언어는 컴파일 타임에 타입이 결정되고, 이때 오류가 발견됩니다. 그래서 코드 작성에는 시간이 오래걸리지만, 좀더 안정적인 코드를 작성할 수 있습니다.

TypeScript로 에러 확인하기

위의 Javascript코드를 TypeScript Playground에 넣으면 이렇게 에러들이 표시됩니다. 이 상태로는 배포할 수 없습니다. 이처럼 런타임하기 전 컴파일 단계에서 에러를 보여줍니다.

그리고 이처럼 브라우저에 올릴 때는 Javascript로 어떻게 변환되는지도 보여줍니다.

출처

코딩앙마