[TS] TypeScript의 정의, 설치 방법 및 TS파일 JS로 변환 방법

🔶 TypeScript의 정의

TypeScript = JavaScript + Type 문법

• JavaScript는 Dynamic Typing이 가능하기 때문에 5 - 3 뿐만 아니라 5 - ’3’ 도 가능하다. ’3’가 String Type이어도 JS가 알아서 숫자 3으로 바꿔 연산을 하기 때문인데, 이는 편리하기도 하지만 프로젝트 규모가 커지고 코드가 길어질수록 이러한 자유도와 유연성은 단점으로 작용한다.

• 반면 TypeScript는 Type을 엄격히 검사해 준다. 또한 타입스크립트는 이러한 Type 불일치나 문법명 오타 등으로 인해 발생하는 Error들을 정확한 Error Message를 통해 알려준다. (에러메세지 퀄리티 Good👍🏻)

🔶 TypeScript 설치 방법(Vanilla JS / React / Vue)

🔷 Vanilla JavaScript (JS, HTML, CSS로 웹 개발 시)

• Vanilla JS로 개발 시 TypeScript 설치하는 방법 (React나 Vue 등을 사용한다면 아래 별도 내용 참고)
  $ npm install -g typescript

🔷 React에서 TypeScript 설치하는 방법

• React 프로젝트 생성할 때 같이 설치하는 방법 (권고)

  $ npx create-react-app 프로젝트명 --template typescript

• React 프로젝트가 이미 진행 중인 경우 설치하는 방법

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

🔷 Vue에서 TypeScript 설치하는 방법

• Vue 프로젝트에서 TypeScript 사용하고 싶은 경우

  1. 작업 폴더 경로에서 터미널로 라이브러리 설치: $ vue add typescript

  2. vue 파일에서 lang 옵션 기재

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

🔶 TypeScript 파일 JavaScript로 변환하는 방법

💡 Compile TypeScript into JavaScript
.ts파일 생성하여 TypeScript 작성 후 브라우저에 적용하려면 변환(compiling) 작업이 필요하다!
브라우저는 JavaScript만 읽을 수 있기에 .ts라는 TypeScript 파일은 JavaScript로 변환해줘야 한다.
이러한 변환 과정을 거치기 전에 변환관련 옵션을 설정하는 파일인 tsconfig.json를 생성해 준다.

1. 프로젝트 폴더 내 tsconfig.json 파일 생성
   • 수동으로 생성 혹은 터미널로 생성: $ tsc --init
   • 생성 후 아래 내용 입력해 준다.

     // tsconfig.json
     
     {
       "compilerOptions": {
         "target": "es5",
         "module": "commonjs",
       }
     }
     
     // target: JS로 변환할때의 ECMA 버전
     // module은 commonjs가 대표적

     • cf. 위 내용 외 tsconfig.json 파일 기타 옵션들 보기: https://www.typescriptlang.org/tsconfig
2. 위 처럼 tsconfig.json 파일을 생성하고 작성해 주었다면 다음은 변환 파일을 생성하는 명령어를 입력한다.
   • TS→JS 변환 파일 생성 (변환된 JS 파일이 해당 경로에 생성됨) : $ npx tsc
   • TS→JS 자동 변환 모드 켜기 (TS 파일을 저장하면 JS 파일로 자동 변환 및 갱신 됨): $ npx tsc -w