TS setting

TS-node

# build없이 ts실행해줄수 있게해주는 거! 개발환경에서 사용
npm i -D ts-node

npm i nodemon  # 선택사항

# package.json 설정 후 
npm run dev

 

package.json

"scripts": {
    "build": "tsc",
    "dev" : "ts-node src/index",   // 설정 추가
		// 노드몬 할경우 
	  // "dev": "nodemon --exec ts-node src/index.ts",
    "start": "node build/index.js"
  },

---

 

프로젝트 빌드 후 실행 방법(비추 → ts-node 추천)

package.json

"scripts": {
    "build" : "tsc", 
    "start": "node build/index.js"
  },
// 이렇게 세팅해주고

npm run build && npm start
# 이렇게 실행해주면 바로 빌드되고 실행됨

---

 

첫 생성

# 폴더 생성 후 
npm init -y

npm i -D typescript

# src 폴더 생성, 파일 만드는데 .ts로 생성

# 파일 이름 무조건 아래와 같이 해야함 
# 그래야 vs code가 TS로 작업하는걸 알고 자동완성 등 도와쥼줌 
touch tsconfig.json 

# tsconfig.json와 package.json 세팅완료해주고 
npm rum build
# 하면 TS -> JS 컴파일됨!

tsconfig.json

{
		// js로 컴파일하고 싶은 모든 디렉터리를 넣어줘야함. 
	"include": ["src"],  // TS가 src내의 모든 파일을 확인함
  }  "compilerOptions": {
      "outDir": "build",   // outDir는 JS 파일이 생성될 디렉터리 지정
      "target": "ES6"  // target은 어떤버전의 js로 ts를 컴파일하고 싶은지를 나타냄
			"lib": ["ES6", "DOM"]
			// lib은 js가 어디서 동작할지 알려줌(어떤 버전이 사용되는지 ex.es6지원하는 크롬)
			// 'ES6'을 지원하는 서버와 'DOM'은 브라우저를 환경에서 코드 실행시킬 거라고 알려준것
			// 여기에서 명시해주면 TS가 인식해서 메서드 선택지, 설명, 자동완성 등 제공함 WOW!!!
			"strict": true         // ts 가 보호해주도록 켜줌(실수보호)
			"allowJs" : true       // 말그대로 ts안에 js 허용
  }

}

package.json

"scripts": {
    "build" : "tsc" // 추가
  }