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