[node.js] Typescript를 이용하여 Express 환경 구성하기
타입스크립트를 이용하여 Express 환경 구성하기
1. 패키지 초기 설정
프로젝트 정보 및 의존성을 구성하는 packages.json
파일을 생성한다.
npm init
명령어를 통해 설치할 수 있다. 필자는 ts-express
라는 디렉토리에서 패키지를 생성했다.
패키지를 초기화 할 때는 다른 옵션을 건드리지 않고 엔터를 눌러 넘어갔다.
2. 필요 모듈 설치하기
익스프레스 모듈을 타입스크립트를 이용하여 사용하기 위해서는 몇가지 모듈이 필요하다.
express
, typescript
, ts-node
, @types/node
, @types/express
5개의 모듈을 설치하여 개발에 필요한 모듈을 설치한다.
그리고 추가적으로 nodemon
모듈도 설치하여 서버를 껐다 키지 않아도 알아서 서버를 다시 시작해주는 모듈을 추가로 설치한다.
npm install express nodemon typescript ts-node @types/node @types/express
install 뒤에 -d 옵션을 붙여 개발자 모드로 설치하여도 무방하다.
{
"name": "ts-express",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"@types/express": "^4.17.13",
"@types/node": "^17.0.18",
"express": "^4.17.2",
"nodemon": "^2.0.15",
"ts-node": "^10.5.0",
"typescript": "^4.5.5"
}
}
설치가 완료된 후 packages.json
파일을 살펴보면 우리가 설치한 모듈들이 정상적으로 반영된 것을 확인할 수 있다.
3. 타입스크립트 환경 파일 생성하기
타입스크립트로 작성된 코드일지라도 컴파일을 할 때에는 자바스크립트로 변환하여 컴파일 하는 일이 필요하다. 타입스크립트 컴파일은 tsc
명령어를 이용하며 tsconfig.json
파일을 생성하기 위해서는 npx tsc --init
명령어를 입력한다.
tsconfig.json 파일 살펴보기
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
기존 구성은 위와 같이 되어있으며 아래와 같이 구성을 수정한다.
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"outDir": "./build", // 컴파일 이후 JS파일이 생성될 디렉토리
"rootDir": ".",
"moduleResolution": "node",
}
}
이번 포스팅 글에서는 타입스크립트 환경 파일의 구성 요소 설명에 대해서는 따로 다루지 않을 예정이다. 옵션의 의미가 궁금한 분들은 여기를 참고하여 읽어보면 좋을 것 같다. 설명을 간결하게 잘 해주셨다.
4. 서버 실행을 위한 파일 작성하기
src
디렉토리를 생성하고 그 안에 index.ts
라는 파일을 생성한다.
생성된 인덱스 파일 안에 다음과 같이 코드를 작성한다.
import express, { Request, Response, NextFunction } from 'express';
const app = express();
app.get('/', (req: Request, res: Response, next: NextFunction) => {
res.send('Hello Express with Typescript!');
});
app.listen(3000, () => {
console.log('Starting Server with 3000 port');
});
5. 서버 실행을 위한 packages.json 파일 수정하기
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
기존에 이렇게 작성되어 있던 부분을 다음과 같이 수정한다.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon --watch \"src/**/*.ts\" --exec \"ts-node\" src/index.ts"
},
위와 같이 수정하면 npm start
명령어를 통해서 서버를 실행할 수 있다.
6. 결과 확인하기
우리가 지정한 3000번 포트로 서버가 잘 실행된 것을 확인할 수 있다.
그리고 localhost:3000
주소로 들어가면 위와 같이 GET 메서드에서 지정해 준 응답 결과가 잘 나오는 것을 확인할 수 있다.
Author And Source
이 문제에 관하여([node.js] Typescript를 이용하여 Express 환경 구성하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@limsw/node.js-Typescript를-이용하여-Express-환경-구성하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)