[TypeScript] 타입스크립트 프로젝트 기본 구성 및 설정

 타입스크립트 기본 환경 구성

 

#1. NPM 초기화 (npm 설정파일 package.json 추가)

npm init -y

 

#2. 타입스크립트 라이브러리 설치

npm i typescript --save-dev

 

#3. 타입스크립트 설정 파일(tsconfig.json) 생성 및 기본 값 추가

//tsconfig.json
{
    "compilerOptions": {
        "allowJs": true, // 자바스크립트 검증
        "target": "ES5", // 타입스크립트 컴파일 tsc
        "outDir": "./built", // 결과물 들어갈 곳
        "moduleResolution": "Node" // Promise 인식 위해서
    },
    "include": ["./src/**/*"] //src폴더 모든 파일 대상 포함
}

 

#4. 자바스크립트 파일을 타입스크립트 파일로 변환

app.js => app.ts

 

#5. `tsc` 명령어로 타입스크립트 컴파일 하기

// package.json
{
  "name": "ts-covid19",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc" // npm run build 시 컴파일 된다
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^4.3.2"
  }
}

 

* JSDoc으로 타입 시스템 입히기

// @ts-check

라고 입력하면 기존 js 파일에 ts로 변환하지 않고도 타입스크립트 효과를 입혀나갈 수 있다.

 

#6. index.html에 built된 app.js 연동하기