[ts] 1. 프로젝트 설정 및 실행

---

TypeScript 프로젝트 세팅

타입스크립트는 데이터 타입을 명시하지 않는 기존 JS에서 일어나는 단점을 보완하기 위해 생겨났다.

타입 명시가 안되었을 경우 데이터 핸들링과정에서 어려움이 따르고 디버깅하는 시간이 길어지는 게 대표적이다.

---

1. TypeScript 설치

$ npm init-y
$ npm i -g typescript
$ npm i typescript -D

$ npm i -D ts-node

 

 

2. tsconfig.json 생성

$ tsc --init

 

 

3. tsconfig.json 옵션 설정

{
    "compilerOptions": {
        "strict": true,
        "module": "commonjs",
        "moduleResolution": "node",
        "lib": ["es2015","es2016","es2017","es2018","es2019","es2020"],
        "target": "ES5",
        "outDir": "./dist",
        "esModuleInterop": true
    },
    "exclude": ["node_modules"],
    "include": ["src/**/*"]
}

 

• strict
  말 그대로 엄격하게 타입을 검사 ( ->  false 로 하면 ts를 쓰는 이유가 없음)
• module
  웹브라우저에서 동작 시 ->  amd
  Node에서 동작 시 ->  commonjs
• moduleResolution
  ㄴ> module 설정이 commonjs면 -> node 로 설정
                                 amd 면 ->  commonjs lib로 설정
• target
  해당 버전으로 트랜스파일 됨 ( 대부분 ES5로 설정 )
• outDir
  outDir에선 타입스크립트가 자바스크립트로 컴파일될때 저장되는 폴더의 url 설정
  ex, tsc 명령어를 입력하면 ./dist 폴더에 변환된 js 파일들이 생김
• esModuleInterop
  true로 설정 해놓으면 export default가 없는 라이브러리도 * as 를 사용하지 않고 불러올 수 있음
• import * as React from 'react;
  본래 이런 방식에서
  import React from 'react;
  이렇게 사용 가능
• include exclude
  include는 컴파일 대상, exclude는 컴파일에 제외되는 대상
  src/**/*.ts은 src 디렉터리는 물론 src의 하위 디렉터리에 있는 모든 파일을 컴파일 대상으로 포함한다는 의미