[TypeScript] 타입스크립트란?

https://www.typescriptlang.org/

JavaScript With Syntax For Types.

위의 사이트는 타입스크립트의 공식사이트 공식문서입니다.

 

무언가를 공부할때 공식문서를 보고 공부하는 것이 가장 좋다고 이야기들하죠?!

 

그럼 타입스크립트는 무었일까요?? 

 

공식문서에서도 보면 타입스크립트는 타입이 입혀진 자바스크립트를 말합니다. 

즉, 타입스크립트는 자바스크립트에 타입을 부여한 또하나의 언어입니다.

자바스크립트는 타입이 없기 때문에 개발을 하는 과정에서 개발자의 의도와 다른 결과를 발생시킬수 있는데요.

타입스크립트를 사용하여 이런 오류를 방지할수 있습니다.

또한 타입스크립트는 컴파일하여 자바스크립트로 변환되어 지는데 자바스크립트가 실행되는 모든곳 즉, 브라우저, 노드 등에서 가능합니다.

 

개발자의 의도와 다르게 결과가 출력되는 예는 무엇이 있을까요??

function numberPlus(a, b){
	return a + b;
}

// 개발자의 의도로 출력되는 예시
console.log(numberPlus(10, 20));

// 개발자의 의도와 다르게 출력되는 예시
console.log(numberPlus('10', '20'));

위의 코드를 보면 숫자를 더하는 함수가 있습니다.

하지만 자바스크립트에서는 문자열로 이루어진 숫자를 인자로 받아도 오류가 나지 않습니다.

첫번째 콘솔로그의 출력은 30이 되겠지만 두번째 콘솔로그의 출력은 1020이 됩니다.

 

숫자의 더하는 것을 의도로 만들어진 함수이지만 의도와 다른 출력결과가 이루어 져있습니다.

하지만 인자를 받을때 타입이 있었다면 어떨까요??

 

function numberPlus(a: number, b: number): number{
	return a + b;
}

console.log(numberPlus(10, 20));

console.log(numberPlus('10', '20'));

위의 코드에서 첫번째 콘솔로그는 자바스크립트와 마찬가지로 30이라는 결과가 출력됩니다.

하지만 아래의 콘솔로그는 에러가 발생합니다.

함수에서 a라는 인자와 b라는 인자 둘다 number 타입이고 결과값도 number 타입이라고 지정을 해주었기 때문입니다.

해당 예시는 상당히 간단한 예시이지만 실제로 복잡한 코드를 짯을때 의도와 다르게 결과가 나온다면 어디서 에러가 났는지 한참 찾아야 하는경우가 있을텐데요.

이렇게 타입스크립트를 사용하면 사전에 에러를 던져주기 때문에 사전에 에러를 방지할수 있다는 장점이 있습니다.

 

 

하지만 타입스크립트를 사용하지 않고도 자바스크립트를 타입스크립트처럼 사용할수 있는 방법이 있기는 합니다.

/**
 *
 * @param {number} a 첫번째 숫자
 * @param {number} b 두번째 숫자
 */
function sum(a, b){
	return a + b;
}

이렇게 정의를 해주게 되면 첫번째 param으로 받는 a는 number이며 @param {number} a 뒤에는 함수에 대한 표현 방법까지 작성해줄수 있습니다.

위의 코드에서 리턴타입은 정해주지 않았지만 인자로 받는 a와 b 둘 다 number타입이므로 a + b가 더해지고 리턴이 되면 number 일것이다 하고 알아서 추론을 해줍니다.

하지만 해당 코드에는 문제가 있습니다.

console.log(sum(10, '20'));

숫자 10과 문자열 20을 인자로 넣어줬을때 타입스크립트가 아니기때문에 에러를 발생시키지 않는데요.

 

이럴때는 @ts-check 를 사용해주면 타입스크립트 같은 효과를 얻을수 있습니다.

하지만 js에서 이런식으로 사용하는것은 나중에 코드도 길어질 뿐만 아니라 손이 상당히 많이 가기 때문에 ts를 사용하는것이 더 효율적이겠죠?