🔍 타입스크립트, 왜 배워?

타입스크립트가 출시된지는 10년이 넘었다. (내가 개발공부시작한건 이제 1년...) 일단 내 입장에서 타입스크립트를 배우는 가장 큰 이유는 이렇다.
1. 채용공고에 많이 올라와있다.
2. 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발가능
3. 자바스크립트보다 친절하게 에러잡아줌

사실 2, 3은 타스를 배우면서 알게된 내용이고 1번의 이유가 가장크다. 채용공고에 자격요건으로 많이 올라와있다는 점은 그만큼 실무에서 거의 필수로 쓰이고 있다는 것이다. 취업을 하고 협업을 하기위해 배워두면 혹은 알고있어야할 언어라는 말씀!

💡 타입스크립트가 그래서 뭔데?

타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어로 타입을 미리 결정하여 엄격하게 타입룰이 있어, 큰 프로젝트에서 많이 발생하는 type관련 버그들이 발생할 확률이 적다.

⭐ 특징

1. 컴파일 언어, 정적 타입 언어
   자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있다. 이에 반해 타입스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환된다.
   ❗ 변환하는 과정을 컴파일이라 함
   
2. 자바스크립트 슈퍼셋(Superset)
   자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어이기에 유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있다.
3. 객체 지향 프로그래밍 지원
   타입스크립트는 ES6(ECMAScript 6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공한다.

⭐ 장점

1. 자바스크립트보다 에러메시지가 친절하다.
   보통 자바스크립트 에러는 어느 부분에서 난 에러인지 모를만큼 에러메시지를 알아보기 힘든데 타입스크립트는 스펠링이 틀렸다던지 타입이 잘못되었다던지 비교적 친절하다.
2. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다.
3. JavaScript를 배웠다면 TypeScript도 익히기 쉽다.
4. 대부분의 라이브러리들이 TypeScript를 지원한다.
   개발을 하면서 라이브러리를 이용할때가 적지않다. 라이브러리들이 지원된다는 것은 큰 장점 일 거같다.
   

💻 TypeScript 사용하기

✨ HTML, CSS, JS 웹개발 시

1. Node.js 최신버전 설치

2. 터미널에 설치 명령어 입력

   npm install -g typescript

3. 작업폴더에 .ts로 끝나는 파일 만들고 타입스크립트 사용 시작
   예를 들면 index.ts

4. tsconfig.json 파일도 만들어 컴파일 옵션 지정

   <script>
   {
       "compilerOptions": {
           "target": "es5",
           "module": "commonjs",
       }
   }
   </script>

5. js 파일로 변환 (터미널에 입력)

   tsc -w 

   HTML 파일 등에서 타입스크립트로 작성한 코드를 사용하려면 이때 생성된 js파일을 연결해야함. (TS는 브라우저가 못읽음)
   

✨ React 에서

1. 이미 있는 React 프로젝트에 설치할때 (작업폴더열고 터미널)

   npm install --save typescript @types/node @types/react @types/react-dom @types/jest

   .js 파일을 .ts 파일로 바꿔서 이용가능
   

2. React 프로젝트를 새로 만들 때

   npx create-react-app my-app --template typescript

✨ Vue 에서

1. 작업폴더 열고 터미널에 명령어 입력

   vue add typescript

2. vue파일에서 타입스크립트를 쓸때

   <script lang="ts">
   
   </script>

   Vue 프로젝트 내에서도 tsconfig.json 파일 만들어서 자유롭게 옵션설정 가능