2022-07-03(일) TIL

오늘배운점!

Node JS + Express(With) TypeScript 기본구성

1. 시작 npm init

2. 필수 모듈 설치!

npm i express typescript @types/express
npm i -D nodemon ts-node

실제 서버 구동시 필요한 모듈 3가지
-express : NodeJS 를 사용하여 서버를 개발할 때 서버를 쉽게 구성할 수 있게 만든 프레임워크
-@types/express : express는 원래 자바스크립트로 만들어졌다. 이를 타입스크립트 환경에서 쓰기 위해 express 내부의 변수들, 함수들의 타입을 정의한 ~d.ts 파일이 포함된 형태
-typescript : 타입스크립트 사용을 위해 설치

3. 타입스크립트 시작 init

tsc --init

TypeScript가 정상적으로 설치되어 있다면 위 명령어가 실행되고 tsconfig.json파일이 생성된다.
npm init 는 package.json을 , tsc --init는 config.json을 생성한다.

해당 파일을 열어보면 많은 옵션들이 보이며, 필수적인 옵션들만 설정해 준다.

{
"target":"es6",
"module":"commonjs",
"outDir":"dist" //타입스크립트가 자바스크립트로 빌드된 파일들 모아두는 폴더명
}

보통 주석처리되어 있는 outDir의 주석을 풀고 원하는 위치로 설정하면 된다.

그외 다른 옵션들에 대한 설명은 위 타입스크립트 공식 홈페이지에 있고 만들어지는 tsconfig.json에도 주석으로 간단히 설명되어 있다.

4. 간단한 타입스크립트 코드 작성

import express, {Request, Response} from "express";

const app = express();

type Data = {
	name : string;
    age : number;
    url : string;
}

const sendData:Data = {
	name : "name",
    age:3,
    url:"tistory.com",
};

app.get("get", (req:Request, res:Response)=> {
	res.send(sendData)
})

app.listen(8080)

5. 서버 실행

서버를 실행하기 위해서는 package.json의 script 부분을 수정해야 한다.

"script":{
	"test":"echo \ "Error: no test specified \" && exit 1",
    "start":"nodemon app",
    "dev":"nodemon --watch \ "*.ts\" --exec \ "ts-node\" app.ts"
},

위와 같이 dev 명령에 해당하는 명령어를 package.json에 넣고

npm run dev 를 실행한다.

그리고 브라우저에 http://localhost:8080/get 을 입력하면 json 데이터가 잘 넘어오는 것을 확인할 수 있을 것이다.

참고 링크 : https://bgradecoding.tistory.com/26