타입 스크립트 서버 환경 구성

npm init -y

npm i express typescript @types/express

npm i -D nodemon ts-node

ts-node : ts를 노드에서 바로 실행할 수 있게 해 주는 패키지.

nodemon : 수정사항이 바로 반영될 수 있게 서버를 자동으로 재시작해주는 패키지.

타입스크립트 설정

npx tsc —-init

전역 설치를 했다면 tsc —-init으로도 가능.

tsconfig.json 가 생성된다. 필요한 옵션을 작성해 주면 된다.

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

src에 있는 ts 파일들을 dist 폴더에 컴파일한다. exclude가 없으면 기본적으로 node_modules가 제외되기 때문에 안적어도 된다.

만약 include나 ourDir를 지정하지 않으면 폴더 내에서 모든 ts 파일을 찾아서 해당 위치에 js 파일로 바꿔준다. 이건 점진적으로 타입스크립트를 적용할 때 좋을 것 같다. 하지만 가장 좋은 방법은 처음부터 세팅을 하는 것이 아닐까…

package.json 세팅하기

package.json 파일을 수정해서 npm run start 나 npm run dev 명령어로 다음과 같이 사용할 수 있게 만들자.

start 명령어는 일반적인 프로덕션 환경에서 js 파일을 돌리는 것이다.

dev 명령어는 nodemon과 ts-node를 결합해서 개발환경에서 수정사항이 바로 반영될 수 있게 한다.

"scripts": {
  "start": "nodemon dist/app.js",
  "dev": "nodemon --watch \"src/**/*.ts\" --exec \"ts-node\" src/app.ts"
},

타입스크립트 코드 만들어 보기

src/app.ts를 다음과 같이 만들어 보자~

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

const app = express();

interface Item {
  title: string;
  desc: string;
  price: number;
}

const myItem: Item = {
  title: "typescript",
  desc: "typescript server",
  price: 100,
};

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

app.listen(8080);

그 다음 127.0.0.1:8080을 방문하면 다음과 같이 뜰 것이다.

gitignore 파일 만들기

git에 올릴 때 필요한 .gitignore 파일을 루트에 만든다. 이 파일에 명시된 폴더와 파일은 git에 파일을 올릴 때 제외된다.

node_modules
.env

추가적으로 자신의 github에 올리든지 등의 프로세스를 진행하면 된다.

지금 이 프로젝트의 공개 github 주소는 다음과 같다. https://github.com/wisdomcrane/ts-server

타입스크립트 핸드북

타입스크립트를 전부 학습하고 싶으면 https://typescript-kr.github.io/ 를 이용해 보자.