Typescript 세팅하기

성준영·2022년 7월 2일
0

빈 폴더에서 타입스크립트를 세팅하는 방법을 기록 하려고 한다.

우선 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폴더를 삭제한 후 스크립트를 실행해 보면

아래 이미지처럼 타입스크립트 파일이 더 이상 빌드 되지않고 저장할 때마다 재실행 되는 것을 볼 수 있다.

profile
기록해버리기

1개의 댓글

comment-user-thumbnail
2022년 12월 16일

감사합니다!!

답글 달기