1. TypeScript - 왜 써야 하는가

TypeScript가 좋다는 말은 이미 많이 들었다.
근데 도대체 왜 사람들은 그렇게 TypeScript에 열광하는 것 일까? 
TypeScript에 대해 자세히 들어가기 전에 TypeScript가 무엇인지 왜 사용해야 하는 이유부터 알아보자.

 

---

 

What is TypeScript?

TS 공식홈페이지 소개

공식 홈페이지에서는 TypeScript is JavaScript with syntax for types 라고 소개하고 있다.
즉, JavaScript 이지만, types를 지정할 수 있는 문법이 추가 됐다는 뜻이다. (superset of JavaScript)

 

이러한 TS(TypeScript)는 어떠한 특징들을 가지고 있을까?

 

1. TS는 자바스크립트의 superset이다.

JS와 TS의 관계

그렇기 때문에 TS는 JS가 사용되는 모든 곳(node.JS, 브라우저 등)에서 다 사용이 가능하다.
어떻게 그럴 수 있을까? TS는 그 자체로 사용되는 것이 아니라 자체 컴파일러나 barbel을 통해 JS로 변환되게 되기 때문이다.

 

2. TS는 정적 타입 이다.

정적타입이란 무엇일까? 우선 JS는 동적타입이라는 것을 인지하자. 
JS를 이용하면서 우리는 어떠한 변수에 Type을 미리 지정해준 적이 없을 것이고, 코드를 작성할 때 이러한 Type이 이상하다면서 Error가 뜨는 것을 본 적이 없을 것이다. 이는 JS는 컴파일시에는 타입체크를 하지 않고, runtime에서 체크를 하고 에러를 내뿜는다. 

코드를 다 작성하고 실행시켰을 때 TypeError: message is not a function 와 같은 에러가 나타나는 모습을 자주 봤을 것이다. 이것이 바로 대표적인 예이다. 

 

이에 반해, TS는 컴파일시에, 코드를 작성하면서 type을 미리 체크하고 미리 에러를 내뿜는다. 

 

---

 

Why TypeScript?

오케이. 이제 대충 TS가 어떤 놈인지는 알겠다. 미리 타입을 지정해주고, 미리 에러를 내뿜는다.
근데 혹시 예전의 나처럼 JS를 작성할 때보다 코드양도 많아지고 JS로 컴파일 한다는데, 우리는 익스플로러 까지 지원해야 해서 브라우저 호환까지 신경써야 하고... 쓴다고 해서 딱히 달라지는 것도 없는 것 같은데 저걸 왜 해... 라고 생각하는 사람은 없길 바란다.

 

이제 왜! 우리가 TS를 사용해야 하는지 그 이유에 대해 알아보자. 

 

---

 

1. 예외처리 용이 - 테스트 코드의 간결화

아래와 같은 간단한 함수가 있다고 하자. 
우리가 name은 string타입으로만 받고자 한다면, 아래와 같은 예외처리 + 테스트코드 역시 다른 타입의  arguments로 넘겨줘야 할 것이다. 얼마나 귀찮은가!

function printName(name){
	if(typeof name !== "string") //예외처리
	console.log(name)
}

 

하지만, TS에서는 변수의 타입을 코드를 작성 하면서 지정 할 수 있기에 이러한 번거러움이 사라진다 !!!

function printName(name:string){
	console.log(name)
}

변수의 타입을 string으로 지정했기에, 불필요한 예외처리나 테스트코드에서 여러 타입의 arguments를 넘겨줄 필요도 없어진다.

사실 테스트 코드를 작성하는 사람이라면, 이러한 변수타입 체크만으로도 코드양을 많이 줄일 수 있을 것이다. 

 

---

 

2. 미리 에러 발생 - 에러 원인 파악 시간 감소

앞서 말했듯이, JS이용자라면 코드 작성후 실제로 실행 시켰을 때 발생하는 에러들을 많이 접해 봤을 것이다. 
이때 에러가 단순하다면 큰 문제가 되지 않겠지만, 여러개를 타고 따라 들어가야 그 에러 발생 원인을 찾을 수 있는 경우, 도대체 어디가 잘못됐는지 파악하기 힘들다. 

 

그렇다고 해서 코드를 작성하면서, 1 라인마다 매번 체크하는 것은 귀찮다...(사실 Refactoring 책에서는 이 방법을 추천한다.)

 

하지만, 앞서 말한 것 처럼 TS는 컴파일시 미리 에러를 발생시켜 주기 때문에 어디에서 에러가 발생했는지가 매우 명확해지고, 
에러를 추적하는데 드는 시간을 감소시킬 수 있다. 

 

---

 

3. 진정한 OOP

요즈음 웹프로그래밍에서는 재사용성이 높고, 유지보수성도 좋으며, 대형 프로젝트에 적합한 OOP(객체지향프로그래밍)이 선호되고 있다.

또한 최근 ES6 문법에서 class 문법도 추가 되면서 JS역시 이러한 추세를 따라 가려고 하는 것으로 보이나, 
여전히 진정한 의미의 OOP를 하기에는 약간의 어려움이 있었다. 

 

하지만, TS에서는 class, interface, generics, types 모두 사용가능 함으로써 진정한 OOP를 할 수 있게 되었다. 

이에 대해서는 직접 코드로 작성하면서 더 알아보도록 하자.

 

---

4. 매우 편리한 Refactoring

앞서 말한 것 처럼, TS파일은 그 자체로 사용되는 것이 아니라 JS파일로 trans-compile 되어 JS로 사용된다. 

이는 우리가 기존에 작성한 JS프로젝트를 TS로 변경할 때 한번에 모든 파일을 TS파일로 변경 해줄 필요가 없다는 것이다. 

 

새롭게 작성하는 파일은 TS로, 기존 작성된 파일들은 JS로 가져가다가 시간이 생길 때 TS로 리팩토링 하는 것이 가능하다!

부담감이 확 줄어들지 않는가!? 

 

 

 

 

자, 이제 TS가 왜 좋은지에 대해 알아봤으니, 실제로 어떻게 사용하는지 알아보자!