저번 Node.js 프로젝트 세팅에서 Javascript 기반으로 세팅을 했다면 이번에는 Typescript 기반으로 프로젝트를 세팅하는 방법에 대해서 알아보자.
또한 이번에는 저번과 달리 npm이 아닌 yarn을 이용해서 설치를 진행할 것이다. (간단하게 말하자면 yarn은 npm과 비슷하지만 속도가 조금 더 빠르다.)
📌아직 node.js가 설치되지 않았다면 지난번 포스팅(Javascript기반 프로젝트 세팅하기) 1번을 참고해서 설치해오면 된다!
➡️ https://velog.io/@cjw020607/Node.js-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0
그럼 node.js가 다 설치돼었다는 가정하에 세팅을 시작해보자!
1. yarn 설치
이번 세팅은 yarn을 이용한다고 했기 때문에 먼저 아래 명령어로 yarn을 설치해준다.
npm install -g yarnyarn -v을 통해 버전 확인이 가능하다.
2. 프로젝트 생성
원하는 경로에 폴더를 만들고 yarn init-y 를 입력하면 된다.
그러면 package.json이 생성될것이다.
3. 라이브러리 설치
일단 추가적인 라이브러리는 (2)번 포스팅에서 다루고 이번 (1)번 포스팅에서는 기본적인 라이브러리인 typescript와 express만 설치하겠다.
yarn add express
yarn add -D typescript
위 명령어를 입력하면 package.json에 의존성 정보들이 추가된것을 알 수 있다.
4. Typescript 설정(tsconfig.json 파일 이용)
yarn tsc --init 명령어를 통해 Typescript 설정 파일인 tsconfig.json을 생성할 수 있다.
이부분은 Typescript 컴파일러가 컴파일할 때 타입 체킹을 어디까지 할 것인지에 대한 부분인데 여기서 "noImplicitAny": true 부분을 주석 해제해주자. 이는 any 타입을 허용하지 않겠다는 뜻이다.
나는 이부분만 주석해제를 해줬는데 다른 부분은 상황에 맞게 변경해주면 된다.
이부분은 컴파일러가 빌드한 결과물을 어떻게 할 것인지에 대한 부분인데 "outDir": "./" 부분의 주석을 해제한 뒤에, 값을 "outDir": "./dist" 로 바꿔주자.
주석이 되어있다면 빌드된 Typescript 파일과 같은 위치에 결과물이 생성되기 때문에 Not Good...
Typescript는 암묵적으로 빌드 결과물을 dist 폴더에 넣기 때문에 "outDir": "./dist"이렇게 설정을 해준 것이다.
마지막으로 코드의 맨 아래쪽에 다음 사진과 같이 "include" 값을 추가해주자.
이 설정은 컴파일할 대상을 설정하는 것인데 나는 src 폴더안에 Typescript로 코드를 적고 이를 Typescript 컴파일러로 빌드할 것이기 때문에 이렇게 설정을 해두었다.
빌드한 후에는 아까 설정한것처럼 dist 폴더에서 js 파일을 생성한 뒤에 실행하게 된다.
이렇게 tsconfig.json 파일로 Typescript 설정을 해보았는데 이렇게 설정한 내용이 적용되도록 꼭 저장하는것을 잊지말자!!
5. 빌드 script 추가
이전 포스팅에도 추가해줬듯이 이번에도 단축어같은 기능을 해주는 script를 추가해보자.
package.json 파일에서 아래 코드를 추가해주자.
"scripts":{
"build": "tsc"
},이는 yarn run {스크립트명} 즉, yarn run build를 하게 되면 자동으로 yarn tsc를 실행해주게 된다.
+ 추가
이제 프로젝트를 실행하기위해 main.ts파일을 생성하고 import express from "express" 코드를 작성하면 express부분에서 오류가 날것이다.
이는 타입 정의가 존재하지 않는 JS Only 라이브러리이기 때문에 @types/{JS 라이브러리 이름} 설치를 통해 타입 정의를 만들고 배포할 수 있다.
따라서 yarn add -D @types/express 로 패키지를 설치하면 오류가 사라질것이다!
