글

라벨이 typescript인 게시물 표시

Node.js ts -> js 자동 변환 ts-node 활용 TypeScript 기본 환경 세팅하기

이미지
 기존에 Node.js에 타입스크립트와 @types/node를 세팅해서 기본 환경을 구축 해봤습니다. 하지만 이렇게 했더니 node.js에서는 ts를 바로 실행을 못해서 tsc 컴파일을 계속 해줘야 하는 이슈가 있더군요. package.json의 script 부분에 수정을 해주면 node 실행시마다 자동으로 tsc 컴파일 해줄 수 있을 듯 하지만 이번에는 ts-node 라는 녀석을 활용하는 것을 정리해봅니다. ts-node는 JIT을 통해서 precomile 없이 node.js에서 ts를 바로 실행할 수 있게 해주는 모듈 이네요. ts-node대신 개발용에 특화된 것 처럼 보이는 ts-node-dev 를 설치해서 사용하겠습니다. npm i -D ts-node-dev 입력해 개발 종속성으로 설치해줍니다. src/index.ts를 아래와 같이 간단히 만들어줍니다. Person은 기존에 만들었던 것 에서 객체 생성과 console.log부분만 지워줍니다. import { Person } from "./person" ; const person : Person = new Person ( "wwforever" ); console . log ( person . sayHello ()); ts-node-dev src/index.ts로 실행하면 아래와 같이 에러가 발생합니다. sh: command not found: ts-node-dev 아래와 같이 package.json의 script에 추가해서 npm run dev로 실행시켜줍니다. respawn과 transpile-only는 각각 node-dev와 ts-node의 옵션이라고 합니다. 2개 모듈의 기능을 합친게 ts-node-dev이니 둘다 기본 옵션으로 추가해줍니다. "scripts" : { "dev" : "NODE_ENV=localdev NODE_PATH=src ts-node-dev --respawn --transpile-o...

Node.js TypeScript 기본 환경 세팅하기

이미지
 Node.js 프로젝트에 타입스크립트 기본 환경 설정하는 것을 정리합니다. 일단 node.js가 설치 되어있다고 가정합니다. 먼저 프로젝트 폴더를 만들고 터미널에 npm init -y을 입력해줍니다. 저는 start-node-ts라는 폴더에 만들어줬습니다. 다음으로 npm i typescript 를 입력해 타입스크립트를 설치합니다. 다음으로 node의 각종 기본모듈의 d.ts 추가를 위해 npm i -D @types/node 를 설치합니다. 보통 @types 하위 패키지들은 개발용으로만 필요하기 때문에 -D(대문자) 또는 --save-dev 옵션으로 설치해줍니다. 그러면 package.json의 devDependencies에 @types.node가 추가되고 node_modules/@types 가 추가됩니다. tsc --init를 실행해서 tsconfig.json 파일 을 생성합니다. compilerOptions 기본 설정에 outDir이 주석으로 되어 있는데 "./dist"로 변경해서 js로 컴파일된 파일이 저장될 폴더를 지정합니다. 2022년 2월기준 es2016으로 target이 설정되네요. 이제 간단한 타입스크립트 샘플 파일을 아래와 같이 만들고 터미널에서 tsc를 입력해 ts 파일을 js로 컴파일 합니다. node dist/person.js 를 실행하면 결과가 잘 나옵니다. 여기까지 했다면 프로젝트 진행에 불현한 것이 계속해서 수동으로 ts를 js로 컴파일 해줘야하는 것입니다. ts-node를 통해 ts 파일을 node에서 바로 실행하는 것을 추가로 정리 해봤습니다.