TypeScript - 기본 세팅

Init

기존 Nodejs Package init과 동일하게 진행

$ npm init -y

TypeScript 설치

$ npm i typescript -g

TypeScript Config 파일 생성

$ npx tsc --init

tsconfig.json

{
  "exclude": ["node_modules"],
  "include": ["src/**/*"],
  "compilerOptions": {
    "lib": ["DOM","es5","es6"],                    
    "target": "ES5",                               
    "module": "commonjs",                          
    "strict": true,                             
    "moduleResolution": "node",
    "outDir": "./build",
    "esModuleInterop": true,        
    "skipLibCheck": true,                          
    "forceConsistentCasingInFileNames": true     
  }
}

"lib" : []

=> 사용할 수 있는 자바스크립트 버전 설정

“target” : “es5”

=> ECMAScript 타겟 버전을 설정: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'

“module” : “commonjs”

=> 모듈 코드 생성 방식을 설정: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext' // module 키의 값이 commonjs면 node로 설정하고 amd이면 classic으로 설정한다.

"strict" : "true"

=> 모든 엄격한 타입 검사 옵션 활성화

"moduleResolution" : "node"

=> 모듈 해석 전략 Node로 설정 (import & export와 관련한 모듈 해석 문제 해결)

“outDir” : “./build”

=> 빌드 결과물을 저장 할 디렉토리를 설정 (baseUrl 설정 기준 하위 디렉토리)

"esModuleInterop" : "true"

=> export default가 없는 라이브러리도 * as 를 사용하지 않고 불러올 수 있게 설정

include

=> "src/*/" src 디렉토리 및 src 하위 디렉토리에 있는 모든 파일을 컴파일 대상으로 설정

exclude

=> 컴파일 대상 제외 설정

TypeScript 컴파일 (ts 파일을 js로 컴파일)

$ npx tsc

outDir 설정으로 build폴더에 ts파일이 js로 컴파일된 파일이 생김

TyepScript 외부 모듈 설치

https://www.typescriptlang.org/dt/search?search=
@types 지원 모듈 검색 사이트

$ npm i @type/{module}

Ex VsCode TypeScript Code Runner 설정

Marker Place 에서 Code Runner install

ts-node 설치

$ npm i -g ts-node

Code Runner 에서 ts 컴파일 가능