타입스크립트란? (Typescript)

---

타입스크립트?

타입스크립트는 자바스크립트의 슈퍼셋 언어로, 쉽게 말해 자바스크립트 기반으로 만들어진 조금 더 확장되고 상위의 언어라고 할 수 있다.

원래 자바스크립트는 클래스 기반 객체지향 언어가 아닌, 프로토타입 기반 객체지향 언어다. 따라서 자바스크립트는 클래스를 정의하지 않아도 객체를 생성할 수 있다. 또한 동적 타입(dynamic typed)언어로써, 변수를 선언하기 전에 해당 변수의 타입을 지정할 필요가 없다.

이러한 이유들로 인해 바닐라 자바스크립트 자체는 클래스 기반 객체지향 언어와 달리 오류를 내기 쉬우며, 코드의 효율성이 떨어지는 문제를 야기할 수 있다. 이러한 자바스크립트의 문제점을 해결하고자 C#을 개발한 아네르스 하일스베르가 TypeScript를 개발했다.

타입스크립트의 특징

1. ES5와 ES6의 문법과 기능들을 모두 사용할 수 있다.
2. React, Angular, Vue 등의 프레임워크에서 모두 호환 가능하다.

타입스크립트의 장점 ✨

1. 정적 타입을 지원

   // 이렇게 하면 sum()에는 숫자만 들어갈 수 있고, 다른 타입이 입력되면 오류가 발생한다.
   function sum(a: number, b: number) {
     return a + b;
   }

   정적타입을 지원하게 되면, 컴파일 단계에서 사전에 오류를 포착할 수 있다. 예를 들어 함수 sum(a,b) 에는 숫자만 들어가야 한다고 가정했을 때, 타입스크립트의 정적타입 지원성을 활용해 해당 함수에는 숫자만 입력되도록 설정할 수 있는 것이다.

   따라서 우리는 타입스크립트를 사용하여 효율적으로 코드를 디버깅 할 수 있고, 코드 생산성을 높일 수 있다.

2. IDE를 포함한 다양한 툴 활용 가능

   타입 정보가 제공된다는 이유 하나만으로 타입스크립트는 매우 큰 장점을 선점할 수 있다. 즉, VSCode를 포함한 다양한 에디터에서 이 언어를 지원하고, 다양한 라이브러리와 툴킷들을 활용할 수 있다.

3. 객체지향 프로그래밍 지원

   큰 프로젝트나, 복잡한 코드를 짜야 하는 경우에는 클래스 기반 객체지향 프로그래밍이 필수적이다. 따라서 이제 자바스크립트도 타입스크립트의 도움을 받아 JAVA, C#에 못지 않게 큰 프로젝트에도 효율적으로 활용될 수 있고 다른 언어의 개발자들이 자바스크립트를 학습하는데 러닝커브를 낮춰줄 수도 있다.

4. 브라우저 호환성을 높일 수 있다.

   Babel에서와 같이, 내가 작성한 코드를 오래된 버전의 javascript 언어로 컴파일 할 수도 있고, 최신 버전의 javascript로 컴파일 할 수도 있다. 따라서 상황에 따라 유연하게 활용할 수 있다는 장점을 갖는다.

타입스크립트의 단점 😓

1. 브라우저 및 자바스크립트 환경에서 실행되지 못한다.

   도대체 무슨 말일까….? 자바스크립트 슈퍼셋 언어인 타입스크립트가 브라우저나 자바스크립트 환경 자체에서 사용이 불가능 하다니….

   이러한 이유 때문에 타입스크립트라는 언어이자 하나의 도구는, 자동으로 javascript언어로 코드를 컴파일 해준다. 따라서 타입스크립트로 코드를 작성해도 javascript로 컴파일 되어 브라우저에서 사용 가능하다. babel과 같은 원리라고 보면 될 것 같다.

---

타입스크립트 설치 & 설정

이제 전반적인 타입스크립트의 개념에 대해 알아봤으니 타입스크립트를 직접 설치해보고 활용해보면 될 것 같다.

설치

node.js도 필수적으로 설치해야 하나, 이전에 이미 node.js를 설치했기에 생략…

# 현재 프로젝트에 설치하고 싶다면?
$ npm install typescript --save-dev

# 컴퓨터 전체에 설치하고싶다면
$ npm install -g typescript

리액트에서 사용할 경우

$ npx create-react-app [아무 이름] --template typescript

---