Express Typescript TypeScript를 사용하여 Express 애플리케이션 개발

이 게시물은 첫 번째published on my blog 입니다.

최근에는 TypeScript 작업을 하고 있었습니다. TypeScript에 대한 질문입니다. 개발자 사용자가 저를 도왔습니다.

이 게시물에서는 TypeScript를 사용하여 익스프레스 애플리케이션을 만드는 방법을 보여 드리겠습니다.

시작하기 전에 문법 실수에 대해 정말 죄송합니다.

익스프레스 프레임워크

아시다시피 Express는 서버에서 작동하는 NodeJS 웹 프레임워크입니다.

종속성 설치

npm i express pug ts-node typescript @types/express @types/node

이것들은 의존성입니다.

package.json 및 tsconfig.json 파일 편집

package.json의 스크립트 섹션은 다음과 같습니다.

"scripts": {
    "dev": "ts-node src/server.ts",
    "start": "ts-node dist/server.js",
    "build": "tsc -p ."
}

npm run dev 명령을 사용하여 이 애플리케이션의 개발 버전을 실행할 수 있습니다.

내 tsconfig.json 파일은 다음과 같습니다.

{
    "compilerOptions": {
        "sourceMap": true,
        "target": "es6",
        "module": "commonjs",
        "outDir": "./dist",
        "baseUrl": "./src"
    },
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

프로젝트 구조

이것이 우리의 프로젝트 구조입니다.

- dist
- node_modules
- public
- src
- views
package.json
tsconfig.json

그건 그렇고, 프로젝트에 UI가 필요하지 않다면 public 및 views 폴더는 필요하지 않습니다. (예: API 백엔드). 프로젝트는 src 폴더 아래에 개발됩니다.

- controllers
- interfaces
- middleware
app.ts
server.ts

컨트롤러 폴더에는 경로 컨트롤러와 해당 인터페이스 파일이 있습니다. 인터페이스 폴더에는 인터페이스 파일이 있습니다. 미들웨어 폴더에는 미들웨어가 있습니다.

app.ts 및 server.ts 파일을 살펴보겠습니다.

애플리케이션 파일 src/(app.ts)

내 응용 프로그램 파일은 다음과 같습니다.

import * as express from 'express'
import { Application } from 'express'

class App {
    public app: Application
    public port: number

    constructor(appInit: { port: number; middleWares: any; controllers: any; }) {
        this.app = express()
        this.port = appInit.port

        this.middlewares(appInit.middleWares)
        this.routes(appInit.controllers)
        this.assets()
        this.template()
    }

    private middlewares(middleWares: { forEach: (arg0: (middleWare: any) => void) => void; }) {
        middleWares.forEach(middleWare => {
            this.app.use(middleWare)
        })
    }

    private routes(controllers: { forEach: (arg0: (controller: any) => void) => void; }) {
        controllers.forEach(controller => {
            this.app.use('/', controller.router)
        })
    }

    private assets() {
        this.app.use(express.static('public'))
        this.app.use(express.static('views'))
    }

    private template() {
        this.app.set('view engine', 'pug')
    }

    public listen() {
        this.app.listen(this.port, () => {
            console.log(`App listening on the http://localhost:${this.port}`)
        })
    }
}

export default App

보시다시피 생성자는 세 개의 매개변수를 필요로 합니다. 이 논리에서는 포트 및 컨트롤러 매개변수가 필요하지만 확신할 수 없었습니다. 또한 프로젝트에서 UI를 사용하는 경우를 대비하여 자산과 템플릿을 초기화했습니다.

서버 파일 src/(server.ts)

내 서버 파일은 다음과 같습니다.

import App from './app'

import * as bodyParser from 'body-parser'
import loggerMiddleware from './middleware/logger'

import PostsController from './controllers/posts/posts.controller'
import HomeController from './controllers/home/home.controller'

const app = new App({
    port: 5000,
    controllers: [
        new HomeController(),
        new PostsController()
    ],
    middleWares: [
        bodyParser.json(),
        bodyParser.urlencoded({ extended: true }),
        loggerMiddleware
    ]
})

app.listen()

이 파일에서 App 클래스를 가져왔습니다. 세 개의 매개변수를 전달했습니다. 첫 번째 포트 번호입니다. 우리 앱은 포트 5000에서 실행됩니다.

두 번째는 컨트롤러 매개변수입니다. 컨트롤러 클래스는 new 키워드와 함께 여기에 있습니다.

그리고 마지막 미들웨어. bodyParser 또는 유사한 플러그인을 사용하는 경우 middleWare를 사용할 수 있습니다.

간단한 미들웨어(middleware/logger.ts)

import { Request, Response } from 'express'

const loggerMiddleware = (req: Request, resp: Response, next) => {

    console.log('Request logged:', req.method, req.path)
    next()
}

export default loggerMiddleware

이것은 간단한 HTTP 로거입니다. HTTP 동사와 해당 경로를 보여줍니다.

IControlerBase(인터페이스/IControllerBase.interface.ts)

모든 컨트롤러가 이 인터페이스를 구현해야 한다고 생각했습니다.

interface IControllerBase {
    initRoutes(): any
}

export default IControllerBase

첫 번째 컨트롤러(controllers/home.controller.ts)

HomeController는 그렇게 될 것입니다.

import * as express from 'express'
import { Request, Response } from 'express'
import IControllerBase from 'interfaces/IControllerBase.interface'

class HomeController implements IControllerBase {
    public path = '/'
    public router = express.Router()

    constructor() {
        this.initRoutes()
    }

    public initRoutes() {
        this.router.get('/', this.index)
    }

    index = (req: Request, res: Response) => {

        const users = [
            {
                id: 1,
                name: 'Ali'
            },
            {
                id: 2,
                name: 'Can'
            },
            {
                id: 3,
                name: 'Ahmet'
            }
        ]

        res.render('home/index', { users })
    }
}

export default HomeController

IControllerBase를 구현했습니다. 따라서 우리는 그 규칙을 따라야 합니다. 이 예제 컨트롤러 파일에서는 데이터베이스 서버의 데이터가 있다고 가정합니다. 이 데이터를 (home/index.pug) 파일로 보냈습니다. 이 파일은 보기 폴더 아래에 있습니다.

<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        meta(http-equiv="X-UA-Compatible", content="ie=edge")
        title Document
    body
        each user, index in users
            h2(onclick=`alert(${index})`)= user.name

이것은 우리의 pug 파일입니다. initRoutes 메서드도 구현했습니다. 상사(IControllerBase)가 그것을 원하기 때문입니다.

앱을 시작하자

npm run dev

이 명령으로 애플리케이션을 실행할 수 있습니다. 우리의 응용 프로그램은 http://localhost:5000 에서 작동합니다.



게시물 폴더도 확인할 수 있습니다. 이 프로젝트에서는 TypeORM 또는 Sequelize를 사용할 수 있습니다.

GitHub에서 이 프로젝트를 찾을 수 있습니다. https://github.com/aligoren/express-typescript-test

결론

저는 TypeScript를 사용하는 것을 정말 좋아했습니다. 이 작업을 하기 전에는 TypeScript가 어떻게 작동하는지 전혀 몰랐습니다.

읽어 주셔서 감사합니다.