빈 폴더에서 타입스크립트를 세팅하는 방법을 기록 하려고 한다.
우선 vscode
에서 테스트용 폴더 ts-test
를 열고
npm init -y
를 실행해준다.
그러면 package.json
이 생성되는데 여기서 main부분을 지워준다.
여기에서 아래 명령어로 타입스크립트를 인스톨해준다.
npm i -D typescript
그 다음 아래 이미지와 같이 src
폴더 아래에 index.ts
파일을 만들어 준 후, hello
함수를 만들어 준다.
여기까지 했다면 이제 tsconfig.json
을 아래와 같이 생성해준다.
//tsconfig.json
{
"include": ["src"], // 타입스크립트 사용할 폴더 지정
"compilerOptions": {
"outDir": "build", // ts->js로 빌드될 폴더 지정
"target": "ES6", // 어떤 시점의 js로 빌드할지 지정
"lib": ["ES6"], // 타입스크립트에게 어떤 API를 사용하고 어떤 환경에서 코드를 실행하는 지를 지정
// "lib":["ES6","DOM"] => 브라우저에서 돌아감 document.querySelector 같은 브라우저API 자동완성 지원
"strict": true, // 모든 엄격한 타입 검사 옵션을 활성화. *핵심 기능이다*
"esModuleInterop": true, // import xx from "xxx" 형태의 불러오기를 가능하게 해준다
"module": "CommonJS",
//"allowJs":true => 타입스크립트에서 자바스크립트를 사용가능하게 해준다
}
}
이 외에도 여러 설정들이 있는데 참고 하고 싶다면 여기 링크를 클릭해서 확인하길 바란다.
다음으로 package.json
안에서
{
"script":{
"build": "tsc",
"start": "node build/index.js"
}
}
를 작성해준 뒤
npm run build
를 실행하면
build
폴더안에 이렇게 index.js
가 빌드된 것을 볼 수 있다.
이제
npm run start
를 해주면 되지만 타입스크립트 코드를 바꿀 때마다 자바스크립트로 빌드 되고 스크립트를 재실행하는 것은 비효율적이기 때문에
npm i -D ts-node
npm i nodemon
두개를 인스톨한 다음
//package.json
{
"script":{
"dev": "nodemon --exec ts-node src/index.ts",
}
을 추가해주고
npm run dev
build
폴더를 삭제한 후 스크립트를 실행해 보면
아래 이미지처럼 타입스크립트 파일이 더 이상 빌드 되지않고 저장할 때마다 재실행 되는 것을 볼 수 있다.
감사합니다!!