Express Typescript使用 TypeScript 开发 Express 应用程序

nodemon

安装

用法

这篇文章最初发表在我的博客上。

最近我在研究 TypeScript。我问了一个关于 TypeScript 的问题。开发者们帮助了我。

在这篇文章中，我将向您展示如何使用 TypeScript 创建一个快速应用程序。

在你开始之前，我对我的语法错误感到非常抱歉。

Express 框架

如您所知，Express 是一个在服务器上运行的 NodeJS Web 框架。

依赖项的安装

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（例如 API 后端），则 public 和 views 文件夹不是必需的。项目将在 src 文件夹下开发。

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

controllers 文件夹包含路由控制器及其接口文件。interfaces 文件夹包含接口文件。middleware 文件夹包含我们的中间件。

让我们看看 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 上运行。

第二个是 controllers 参数。我们的控制器类将在这里使用 new 关键字。

最后一个是 middleWares。如果你正在使用 bodyParser 或者类似的插件，那么可以使用 middleWares。

我们的简单中间件（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)文件。该文件位于 views 文件夹下。

<!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方法。因为 boss（IControllerBase）需要它。

让我们启动应用程序

npm run dev

使用此命令，我们将能够运行我们的应用程序。我们的应用程序可以在上运行http://localhost:5000。

您还可以检查 posts 文件夹。在此项目中，您可以使用 TypeORM 或 Sequelize。

您可以在 GitHub 上找到该项目：https://github.com/aligoren/express-typescript-test

结论

我非常喜欢使用 TypeScript。在从事这项工作之前，我完全不知道 TypeScript 是如何工作的。

谢谢阅读。

鏂囩珷鏉ユ簮锛�https://dev.to/itachiuchiha/developing-an-express-application-using-typescript-3b1

Express Typescript 使用 TypeScript 开发 Express 应用程序 nodemon 安装 使用