TypeScript 설치하기🌊

🌊 TypeScript

TypeScript는 type을 추가하여 자바스크립트를 확장한 것으로 즉, 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어라고 할 수 있다.
코드를 실행하기 전 사전에 에러를 방지할 수 있고 코드 자동완성으로 코드를 수정하는데 들이는 시간을 줄여준다는 장점이 있다.
따라서 자바스크립트 코드의 품질과 개발 생산성을 높일 수 있다.
그런데 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해줘야 한다.
이 변환 과정을 컴파일(complile)이라고 부른다.

💧 TypeScript 설치하기

먼저 broswer(ex. chrome), node.js, nvm가 기본적으로 설치되어 있어야 한다.

1. 터미널에 npm init -y 입력

폴더 생성 후 vscode 터미널에 npm init을 입력해 npm 프로젝트를 생성하자.

2. 터미널에 npm i typescript -g 입력

-g는 컴퓨터 전역에 typescript를 설치한다는 뜻이며 해당 프로젝트에서만 실행하려면 -g를 빼면 된다.

3. 터미널에 npm i -D ts-node 입력

node에서 ts를 실행하게 하기 위해 ts-node를 설치하자.

4. package.json 파일의 scripts 수정

"scripts":
      "build": "tsc --build",
        "clean": "tsc --build --clean"
    }

ts를 컴파일하려면 npm run build
build한 파일을 모두 지우고 싶다면 npm run clean

5. tsconfig.json 파일 생성

tsconfig.json 파일을 생성하는 방법은 두 가지가 있다. 

첫 번째, 터미널에 npx tsc --init 를 입력하자.

그럼 자동으로 tsconfig.json 파일이 루트경로에 생성되며 기본적인 compilerOptions이 들어가 있다.

 

두 번째, 루트경로에 직접 tsconfig.json 파일을 생성하고 아래의 기본적인 compilerOptions를 추가해도 된다.

{
      "compilerOptions": {
          "strict": true,
          "module": "commonjs",
          "moduleResolution": "node",
          "target": "es5",
          "outDir": "./dist",
          "lib": ["es5", "es6", "es7","esnext", "DOM"],
          "esModuleInterop": true
      },
      "exclude": ["node_modules"],
      "include": ["index.ts"]
  }

• strict : 엄격하게 타입 검사
• module : 웹브라우저에서 동작 시 amd, Node에서 동작 시 commonjs
• moduleResolution : module 키의 값이 commonjs면 node로 설정하고 amd이면 classic으로 설정
• target : 대부분 ES5로 설정하며 해당 버전으로 트랜스파일
• outDir : 타입스크립트가 자바스크립트로 컴파일될때 저장되는 폴더의 url
• lib : 사용할 JS 버전
• esModuleInterop : true로 설정 해놓으면 export default가 없는 라이브러리도 * as 를 사용하지 않고 불러올 수 있다. 예를 들면 import * as React from 'react; 이런 방식에서 import React from 'react; 이렇게 사용 가능하다.
• include과 exclude : include는 컴파일 대상, exclude는 컴파일에 제외되는 대상이며 src/*/.ts는 src 디렉터리와 그 하위 디렉터리에 있는 모든 파일을 컴파일 대상으로 포함한다는 의미

세부옵션들은 필요에 따라 수정하면 된다.
여기에서 (https://typescript-kr.github.io/pages/compiler-options.html) 다양한 compilerOptions을 확인할 수 있다.

6. 루트경로에 임의의 index.ts 생성 후 터미널에 npm run build 입력

테스트용 ts파일을 생성하고 npm run build를 입력하면 dist 폴더와 그 안에 js파일이 컴파일 된 것을 확인할 수 있다.