TypeScript 프로젝트 셋팅하기

2022. 12. 19. 15:58프로그래밍/TypeScript

    목차

package.json 생성

npm init -y

 

typescript, parcel 설치

npm i -D typescript parcel

 

package.json 수정

"main": "index.js", // 삭제
  
...

"scripts": { 
  "dev": "parcel ./index.html", // 추가
  "build": "parcel build ./index.html" // 추가
},

 

src/main.ts 생성

export {};

 

루트 경로에 index.html 생성 및 스크립트 추가

<script type="module" defer src="./src/main.ts"></script>

 

루트 경로에 tsconfig.json 파일 추가

{
  "compilerOptions": { // 컴파일러 옵션 지정
    "target": "ES2015", // 컴파일될 ES(JS) 버전 명시
    "module": "ESNext", // 모듈 시스템 지정
    "moduleResolution": "Node", // 모듈 해석 방식 지정
    "esModuleInterop": true, // ESM 모듈 방식 호환성 활성화
    "isolatedModules": true, // 모든 파일을 모듈로 컴파일, import/export없는 경우 에러
    "lib": ["ESNext", "DOM"], // 컴파일에서 사용할 라이브러리 지정
    "strict": true // 더 엄격한 타입 검사 활성화
  },
  "include": ["./src/**/*.ts"], // 컴파일할 파일 경로 목록
  "exclude": ["node_modules"] // 컴파일에서 제외할 파일 경로 목록
}