[TS] 타입스크립트를 사용하는 이유

TypeScript?

타입스크립트는 자바스크립트의 기본적인 틀을 가져가면서

거기에 타입 지정이라는 옵션을 얹은 것이라고 생각하면 된다.

초창기의 웹페이지는 지금의 웹페이지처럼 사용자와 인터랙티브한 기능이 많지 않았고, 도서관에서 책을 꺼내보듯이 인터넷 생태계에 많은 양의 정보를 저장해두고 꺼내보는 형식이었다.

그래서 자바스크립트는 견고한 구조를 짜기보다는 빠르게 어떤 기능을 만들기 위해 개발된 언어였다.

그러나 복잡한 웹앱들이 등장하고 프론트 쪽에서 할 일이 많아짐에 따라 견고한 프로그램이 만들어질 필요성이 요구되자 다른 정적 타입 언어들처럼 자바스크립트에도 견고하게 만들 수 있는 언어의 기능이 필요해졌다.

그래서 등장한 것이 타입스크립트이다.

 

자바스크립트(Javascript) VS 타입스크립트(Typescript)

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

자바스크립트와 타입스크립트의 가장 큰 차이점은 타입 지정 여부 말고도 한 가지가 더 있다. 

자바스크립트는 인터프리터 언어이고, 타입스크립트는 컴파일 언어이다.

 

• 인터프리터 언어: 웹 브라우저 혹은 런타임 환경에서 코드를 한 줄 한 줄 읽어내려가 해석하도록 만들어진 언어
• 컴파일 언어: 컴파일링(컴퓨터가 해석할 수 있는 언어로 변환하는 작업) 과정을 거쳐서 실행되어지는 언어

 

※ 타입스크립트는 결국 컴파일링을 거쳐 자바스크립트로 변환된다.

 

---

타입스크립트를 사용하는 이유?

1. 버그 예방

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

2. 더 나은 개발자 경험과 코드 질 향성

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

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

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

---

온라인 상에서 타입스크립트를 사용할 수 있게 해줌

https://www.typescriptlang.org/play

TS Playground - An online editor for exploring TypeScript and JavaScript

---

참고: https://imagineu.tistory.com/6

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