본문 바로가기
Frontend/TypeScript

[TypeScript] VSC 타입스크립트 설치 및 설정 방법

by 민두이 2023. 2. 1.
728x90
반응형

노드 모듈 설치

npm init -y

 

타입스크립트 설치 

npm i -D typescript

 

tsconfig.json 파일 생성 

touch tsconfig.json

 

tsconfig.json 파일 설정

{
    "include"  : ["src"],
    "compilerOptions": {
        "outDir": "build",
        "target":"ES6",
        "lib":["ES6", "DOM"]
    }
}

 

**lib

타입스크립트에게 어떤 API를 사용하고 어떤 환경에서 코드를 실행하는지 설정해주는 것.
(target 런타임 환경이 무엇인지를 지정)
프로그램이 브라우저에서 실행되면 lib에 "DOM" 유형 정의를 할 수 있음 
DOM: window, document 등
ex) "lib": ["ES6","DOM"]

https://www.typescriptlang.org/tsconfig#lib

 

TSConfig Reference - Docs on every TSConfig option

From allowJs to useDefineForClassFields the TSConfig reference includes information about all of the active compiler flags setting up a TypeScript project.

www.typescriptlang.org

 

package.json 파일 설정

{
  "name": "typescript",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build" : "tsc"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/mindyaaa/TypeScript-BlockChain.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/mindyaaa/TypeScript-BlockChain/issues"
  },
  "homepage": "https://github.com/mindyaaa/TypeScript-BlockChain#readme"
}

 

tsc 작동

build 파일 내에 자바스크립트 파일이 컴파일 되어지는 것 확인 할 수 있음!

npm run build

 

ts-node 다운 받기 

 npm i -D ts-node
 
 npm i nodemon
  "scripts": {
    "build": "tsc",
    "dev": "nodemon --exec ts-node src/index.ts",
    "start": "node build/index.js"
  },
npm run dev

 

728x90