TypeScript란? TypeScript를 왜 쓰는가?

TypeScript 타입스크립트란 무엇인가?

TypeScript는 단어 그대로 Type + Script로 Typed 된 JavaScript라는 뜻이다.

우리가 알고 있는 기존의  JavaScript(이하 JS)에서는 변수에 대해 타입을 정형화하지 않기 때문에 변수를 선언하고

단순히 사용함에 있어서는 신경쓰지 않아도 되기 때문에 편할 수 있다.

그러나, 이는 Java와 같이 강력한 타입화된 언어에서처럼 런타임 전에 컴파일 단계에서 유효하지 않은 문법을 구사하였을 때 막아주지만

JS에서는 실행을 시켰을 때 의도하지 않은 결과가 도출되거나 런타임 오류를 뱉어낼 수 있다. 이는 굉장히 치명적인 상황이다.

 

예를들어, 단순히 20~30라인 이내의 코드가 아니라 여기 저기에서 쓰는 메소드가 있다고 하자.

코드의 라인 수가 100, 200 을 넘어가거나 유지보수를 할 때 number 형태의 값을 넣어야 하는데 boolean 값을 넣었다면

실행하기 전까지 오류를 찾아내지 못하고 서비스 동작중에 죽어버리는 결과를 뱉어낼 수 있다.

 

let numArray = [1,2,3,4];
numArryay + false;

// 결과 : '1,2,3,4false'

위와 같은 예시코드를 보면 숫자 배열에 boolean 값인 false를 더하면 '1,2,3,4false'라는 값을 반환한다.

과연 이게 내가 원했던 결과일까? Java 였다면 상상도 못할 결과다 ㄴㅇㄱ

 

 

TypeScript를 쓰는 이유는 무엇인가?

TypeScript의 장점

앞서 말했듯 JS에서는 실행이 될 때까지 형이 일치하지 않아도 오류가 발생하지 않는다.

따라서 안정성을 위해 Type을 지정하고 그에 맞게 코딩을 하면 안정성을 보장할 수 있게 된다.

 

실제 크롬 콘솔창에서 입력한 내용

 

예를들어 위와 같이 sum(num1, num2) 라는 함수가 있다고 가정하자.

이때 나는 파라미터로 숫자형만 받고 싶은데 1과 2를 입력했을 땐 정상적인 결과를 반환하지만

"no"라는 String 형태의 단일 파라미터를 넣어도 오류를 반환하지 않는다.

"a"와 "b"를 넣으면 두 문자가 합쳐진 'ab'를 반환하고, String과 정의되지 않은 변수명을 입력하면 오류를 뱉어낸다.

 

그렇다면 TypeScript 에서는?

위에서 작성했던 sum 함수를 TypeScript 에서 파라미터에 형을 작성한 형태로 만들어봤다.

파라미터로 num1, num2를 받을건데 이 둘은 모두 숫자형태인 number를 받을 것이라고 명시한 것이다.

이때 함수에 명시한 파라미터의 형태 값이 들어올 경우 아무런 오류를 표시하지 않지만,

"a"와 "b"라는 다른 형태(String)를 파라미터로 넘길 경우 빨간 줄로 무언가 잘못되었다고 알려주고 있다.

실제로 마우스를 올려보면 파라미터 타입으로는 number가 올 수 있으며 string은 불가능하다고 친.절 하게도 나온다.

아니면 함수에 마우스를 직접 올려보아도 어떤 파라미터 값을 넣을 수 있는지 알려주기도 한다.

위의 테스트는 타입스크립트 페이지에 가면 에디터를 사용할 수 있다.

 

https://www.typescriptlang.org/play

TS Playground - An online editor for exploring TypeScript and JavaScript

 

 

정리

JavsScript는 타입추론이라는 것을 통해 변수에 형을 지정하지 않아도 사용할 수 있도록 해준다.

let name = "James";

// 타입추론을 통해 string 으로 인식

위와 같은 코드가 있다고 할 때 우리가 Java에서 하듯이 변수 앞에 형을 명시하지 않아도 타입추론을 통해 string 이라고 인식하게 된다.

따라서 편하게 사용할수도 있지만 잘못된 형식을 사용하려 할 때 컴파일 단계에서 오류를 표시해주지 않고 런타임시에 발생하기 때문에 굉장히 위험한 결과를 초래하게 될 수 있다.

그래서 TypeScript가 등장하였고 이를 통해 타입을 명시하여 런타임 전에 잘못된 사용을 방지해준다.

(물론 TypeScript에서도 타입추론 가능함 ㅋ)

 

* 오늘의 결론 : TypeScript를 이용하면 오류를 방지할 수 있고 어떤 형의 파라미터를 입력해야하는지 정보도 볼 수 있어 짱짱맨!