[Typescript] 타입스크립트를 "사용해야 하는" 이유 (+ 온라인에서 연습하기)

자바스크립트는 전세계의 97% 이상의 웹사이트에서 사용되고 있는 만큼 가장 인기 있는 프로그래밍 언어 중에 하나입니다.  자바스크립트는 웹사이트를 동적으로 만들 수 있고 다른 복잡한 기능들을 구현가능하게 해주기 때문에 웹사이트에서는 거의 필수적인 존재라고 볼 수 있습니다. 하지만 타입스크립트 또한 자바스크립트 못지않게 그 인기를 빠르게 끌어 올리는 중인데요. 지금 당장 구직사이트에서 프론트엔드 개발자만 검색해봐도 많은 IT기업들은 타입스크립트 사용자를 우대하거나 필수로 하고 있는 것을 볼 수 있습니다.

https://octoverse.github.com/#geographical-distribution-of-active-users

타입스크립트는, 자바스크립트 기반으로 추가적인 코드작성 ( 타입 지정 등) 을 해준 후 다시 자바스크립트로 컴파일 되어 사용되어지기 때문에 자바스크립트 슈퍼셋(superset) 같은 개념입니다. 결국 자바스크립트로 컴파일되어 사용되는데, 과연 무슨 이유때문에 타입스크립트가 자바스크립트를 대체하고 있을까요?

---

우선, 타입스크립트와 자바스크립트의 차이점부터 알아야 합니다.

Javascript	Typescript
동적타입 언어	정적타입 언어
인터프리터 언어	컴파일 언어
독립적으로 사용가능	자바스크립트에 의존적임 (자바스크립트로 컴파일된 후 실행)
좀 더 유연함 (타입에 제한을 받지 않으므로)	더 나은 구조와 간결함, 일관성, 재사용성
.js 확장자	.ts 확장자
작고 간단한 프로젝트에 적합함	복잡한 프로젝트에 적합함

 

---

자바스크립트 대신 타입스크립트를 선택해야하는 이유

위와 같이 많은 차이점이 존재하지만, 모든 차이점은 근본적으로 동적타입이냐, 정적타입이냐에서 출발한다. 자바스크립트의 가장 큰 장점이자 단점은 모든 변수나 객체를 타입을 지정하지 않는다는 점입니다. (그 점을 보완해서 나온 것이 "타입"스크립트입니다. ) 

구글링을 하다보면 많은 이유들을 나열하고 있지만, 여기서는 "써도되는 이유"가 아닌 "써야하는 이유" 에 대해서만 언급하면,

1. 버그 예방 

자바스크립트의 버그 중 15%를 타입스크립트의 사용으로 미리 예방할 수 있다는 연구가 있다고 합니다. 자바스크립트는 선언할 때 타입을 지정해주지 않기 때문에 동작하면서 언제 나도 모르게 형변환이 되어 있을 수도 있고, 그런 부분으로 인해 예기치 않은 버그가 발생할 수도 있습니다. 심지어 인터프립터 언어 특성상 그런 버그들을 찾는 것 조차 쉽지 않죠. 컴파일 과정이 없기 때문에 에러를 출력하지 않고 실행되기 때문입니다. 타입스크립트를 사용한다고해서 모든 버그를 완전히 막을 수 있는 것은 아니지만 적어도 컴파일단계에서 타입관련 에러는 막을 수 있습니다. 예를들어, strictNullCheck 옵션을 true로 해놨다면 객체/null/undefined가 할당될 수 있는 변수가 있을 때, null이나 undefined가 아닌지 체크하지 않고서는 객체의 속성을 가져올 수 없습니다.

2. 더 나은 개발자 경험과 코드 퀄리티 향상 

자바스크립트로 코드를 작성할 때, 객체의 필드나 함수의 매개변수로 들어오는 값이 무엇인지 알기 위해 여러 파일들을 살펴봐야했던 경험이 있을 것입니다. 하지만 타입스크립트를 제대로 사용함으로써 얻을 수 있는 가장 큰 장점중에 하나는 변수의 이름뿐만 아니라 그 데이터의 "type"까지 알 수 있게 해준다는 것입니다. 그래서 코드 작성이 좀 더 쉽고 직관적이게 만들어줍니다. 개발자는 로직과 같은 큰 구조들에만 집중할 수 있게 해주는 것이죠. 
또한 오브젝트 안의 속성값을 하나하나 기억할 필요없이 IDE가 자동으로 리스트업 해주기 때문에 개발자 입장에서는 훨신 편해집니다. 

3. 크로스브라우징(브라우저 호환성) 문제 해결

모든 브라우저의 지원을 걱정해야하는 프론트개발자 입장에서는 ES6+을 써도 될지 고민이 많을 것입니다. 하지만 타입스크립트는 컴파일 과정에서 ES6+ 문법들을 ES5(또는 ES3)로 바꿔주기 때문에 Babel의 도움 없이 크로스브라우징 문제를 해결할 수 있습니다. 

---

타입스크립트는 항상 좋기만할까? 

타입스크립트는 자바스크립트의 문법을 기반으로 한 슈퍼셋(superset)이기 때문에 컴파일러를 통해 자바스크립트로 컴파일되어 실행됩니다. 때문에 컴파일을 해주는 시간이 들기때문에 자바스크립트만 사용했을 때보다 속도에서 차이가 날 수 밖에 없습니다.

또한 자바스크립트의 장점이나 단점인 타입에 제한이 없다는 점을 보완한 것이 타입스크립트이기 때문에, 매번 타입을 따로 결정해주어야해 번거롭기도 하고 작성해야하는 코드의 양이 많아질 수 있습니다. 

이와 같은 이유로 아직 타입스크립트에 대한 비판도 있고 규모가 작은 프로젝트에서는 여전히 타입스크립트 도입을 망설이고 있습니다. 

---

하지만 아래의 그래프를 보면 알 수 있듯이, 많은 개발자들이 타입스크립트를 좋아하고 있고, 특히 프론트엔드 개발자라면 타입스크립트에 대한 공부가 거의 필수가 된 것 같습니다. 

 

 

국내 많은 개발자분들이 모여 타입스크립트에 대한 문서를 한글로 잘 정리해놓았습니다. 이제 시작할 일만 남았네요!

https://typescript-kr.github.io/

TypeScript 한글 문서

---

그리고 타입스크립트 개발환경 설정이 귀찮은 사람들을 위해, 온라인 상에서 타입스크립트를 사용할 수 있도록 해주는 사이트도 있습니다.

https://www.typescriptlang.org/play

TS Playground - An online editor for exploring TypeScript and JavaScript