TypeScript 3＋Express＋Node.js

第一步、安装需要的配置

首先，我们将使用node包管理器（npm）来为我们的应用程序安装依赖项。

Npm与Node.js一起安装。

如果您还没有安装Node.js，可以通过homebrew程序完成。

安装Homebrew并更新它：

然后使用brew install命令安装node

第二步、创建项目

接下来，让我们使用npm init命令创建一个新项目。

在回答提示后，您将在项目文件夹中有一个新的package.json文件。

我们也添加一些自定义脚本。

首先，添加开发脚本。

这将使用nodemon模块来监视对快速Web应用程序的源文件的任何更改。

如果文件更改，那么我们将重新启动服务器。

接下来，添加grunt脚本。

这只是调用grunt任务运行器。

我们将在本教程后面安装它。

最后，添加启动脚本。

这将使用node来执行bin/www文件。

如果您使用的是Linux或Mac，则package.json文件应如下所示：

如果您使用的是Windows，则package.json文件应如下所示：

请注意Windows用户对dev脚本的微小更改。

第三步、安装Express

下一步是安装Express依赖项。

我在我的npm install命令中包含了--save标志，以便将依赖项保存在package.json文件中。

请注意，这还会在项目中生成新的node_modules文件夹。

如果您使用Git，则应将此文件夹添加到.gitignore文件中。

第四步、启动脚本的配置

接下来我们需要创建我们的启动脚本。

如果您还记得，我们在package.json文件的scripts配置中指定了一个start属性。

我将其值设置为："node ./bin/www"。

所以，让我们在：bin/www创建一个空文件

以下是www文件的完整内容：

这有点长。所以，让我打破这一点并解释每个部分。

首先，我们有node shebang来执行这个脚本。如果您使用的是Windows，只需将此文件重命名为www.js，node将根据文件扩展名执行此操作。

然后我们通过“use strict”命令启用严格模式。

然后我需要一些依赖。首先，我将在：dist/server.js中有一个模块（文件）。我们还没有创建这个，所以不要担心。然后我们需要express和http模块。

首先，我确定将http服务器绑定到的端口，并监听。这将首先检查PORT环境变量，然后默认为8080。

我还使用了由Google Cloud Platform团队提供的normalizePort()函数。我从他们的示例应用程序中借用了这些。

接下来，我将使用bootstrap()老启动我的应用程序。在创建Server类之后，这将更有意义。

然后我为HTTP服务器设置端口。

最后我们创建了http服务器，传入我们的express app。

在这部分中，我将指定我们的http服务器将侦听的端口，然后我附加一些事件处理程序。

我正在听error和listening事件。

在创建应用程序期间发生错误时将触发错误事件。

当http服务器启动并正在侦听指定端口时，将触发侦听事件。

第五步、安装TypeScript 和 Grunt

接下来，使用npm install命令安装TypeScript：

我将使用Grunt任务运行器来编译TypeScript源代码。

使用npm安装grunt：

现在我们安装了grunt，让我们安装一些任务运行器：

grunt-contrib-copy任务运行器将./public和./views目录中的文件复制到./dist目录中

我们将使用grunt-ts任务来编译TypeScript源代码。

我们将使用grunt-contrib-watch来监视对TypeScript源文件的任何更改。

当一个文件更新（或保存）文件后，我想重新编译我的应用程序。

结合我们之前在package.json文件中创建的dev脚本，我们将能够轻松地对TypeScript源进行更改，然后立即在浏览器中查看更改。

第六步、创建gruntfile.js

下一步是配置Grunt来编译我们的TypeScript源代码。

首先，在应用程序根目录中创建gruntfile.js文件。

在您喜欢的编辑器中打开gruntfile.js文件。我使用Visual Studio Code。gruntfile.js文件内容如下

以下是gruntfile.js的说明：

使用exports对象，我们将导出一个将由grunt任务运行器调用的函数。这是非常标准的。它有一个名为grunt的参数。

遵循最佳实践我正在启用严格模式。

然后我们调用grunt.initConfig()方法并传入我们的配置对象。

在我们的配置对象中，我们指定每个任务

第一项任务是复制。此任务将复制./public和./views目录中的文件。

接下来的任务是ts。此任务将TypeScript源代码编译为可由Node.js执行的JavaScript。已编译的JavaScript代码将输出到./dist目录。

第三项任务是观察。此任务将监视对TypeScript源文件（.ts）以及视图模板文件（.pug）的任何更改。

如果一切正常，您应该能够执行grunt命令

你应该看到这样的事情：

第七步、安装中间件

在我们创建server.ts模块之前，我们需要安装一些更多的依赖项。

我在此示例Express应用程序中使用以下中间件：

body-parser[https://github.com/expressjs/body-parser]

cookie-parser[https://github.com/expressjs/cookie-parser]

morgan[https://github.com/expressjs/morgan]

errorhandler[https://github.com/expressjs/errorhandler]

method-override[https://github.com/expressjs/method-override]

您可以使用上面的链接阅读有关这些内容的更多信息。让我们继续，通过npm安装这些：

我们还需要为这些模块安装TypeScript声明文件。

在TypeScript 3之前，您必须使用名为Typings的开源项目。

现在不再是这种情况，因为TypeScript 3极大地改进了对第三方模块声明（或头文件）的支持。

让我们使用npmjs.org上的@ types/repository安装TypeScript声明文件：

第八步、创建Server类

首先，为TypeScript代码创建一个src目录，然后创建一个新的server.ts文件。

我们准备好在Node.js上使用Express启动我们的新HTTP服务器。

在我们这样做之前，我们需要创建我们的Server类。

这个类将配置我们的express Web application，会涉及到REST API和routes的类。下面是定义我们的Server类的server.ts文件的开头：

让我们深入研究Server.ts模块（文件）中的Server类。

导入

首先，我们导入我们以前安装的中间件和必要的模块。

body-parser中间件将JSON有效负载数据解析为可在我们的express应用程序中使用的req.body对象。

cookie-parser中间件类似于body-parser，因为它解析用户的cookie数据并在req.cookies对象中使用它。

然后我们导入express模块。这是express框架。

我正在使用morgan HTTP logger 中间件。这应该只在开发期间使用。

然后我导入path模块。我将使用它来为config()方法中的public和views目录设置路径目录。

errorhandler 中间件将在开发期间处理错误。同样，这不应该用于生产。相反，您需要记录错误，然后向用户显示错误指示。

最后，我使用method-override中间件。您可能不需要这个，但在REST API配置中使用"PUT"和"DELETE"HTTP谓词时需要这样做。

Server类

接下来，我们创建一个名为Server的新类。

我们的类有一个名为app的公共变量。

请注意，我们的应用程序是express.Application类型。

在Server类中，我有一个名为bootstrap()的静态方法。

这在我们的www启动脚本中调用。

它只是创建Server类的新实例并返回它。

constructor函数

在constructor()函数中，我通过创建一个新的express应用程序来设置app属性的值。

然后我调用Server类中定义的一些方法来配置我的应用程序并创建我的应用程序的REST API和HTTP路由。

现在这些都是空的。

此时您可能想要测试一下。

虽然我们还没有配置HTTP服务器，但我们应该能够使用grunt编译我们的TypeScript：

您应该看到编译成功完成的指示：

第九步、配置Server

下一步是在我们的Server类中实现config()方法：

关于config()方法的一些注意事项：

首先，我在/public设置静态路径。位于./public文件夹中的任何文件都可以公开访问（duh）。

接下来，我配置了pug模板引擎。我们将在一分钟内完成安装。我们所有的pug模板文件都位于./views目录中。

然后我们添加morgan logger中间件。

然后我们添加了body-parser中间件来解析JSON以及查询字符串。

然后我们添加cookie-parser中间件。

然后我们添加方法覆盖中间件。

最后，我们添加一些代码来捕获404错误以及任何应用程序异常。

如上所述，我们正在使用pug(哈巴狗)模板引擎。

但是，在我们使用它之前，我们需要通过npm安装它：

我们还应该创建public和views目录：

这是我们的目录结构应该是这样的：

现在我们的服务器已配置，我们应该能够编译我们的TypeScript源代码并启动node HTTP服务器：

然后，您应该看到该node正在运行：

现在启动浏览器并转到http//localhost:8080。

如果一切正常，您应该在浏览器中看到以下消息：

这是因为我们还没有定义任何route。

让我们继续。

第十步、创建BaseRoute类

现在我们的服务器已配置并运行，我们已准备好开始构建我们的Web应用程序的路由。

但是，你可能会问自己route是什么。

好吧，根据Express文档：

Routing refers to determining how an application responds to a client request to a particular endpoint, which is a URI (or path) and a specific HTTP request method (GET, POST, and so on).

首先，让我们创建一个带有两个新文件的./src/routes目录：route.ts和index.ts。

route.ts模块将导出BaseRoute类。

所有路由类都将扩展BaseRoute。

让我们来看看route.ts的内容。

BaseRoute目前相当薄。但是，这将作为一种在我的应用程序中实现身份验证的方法，以及所有路由可能需要的许多其他功能。

我有一个标题字符串变量，它将保存路径的标题。

作为示例，BaseRoute当前存储特定路由所必需的脚本数组。可能还希望在BaseRoute中定义所有路径都需要的脚本。这只是一部分特性在BaseRoute中实现的一个示例，该功能将可用于所有路由。

此外，BaseRoute类有一个render()方法。这将在我们的扩展类中的每个路由方法中调用。这为我们提供了一种方法来渲染视图，并定义了常见的本地模板变量。

在此示例中，我将BASE_URL，脚本和标题设置到每个视图中。

第十一步、创建IndexRoute类

路由定义通过以下方式定义：

METHOD是适当的HTTP动词，例如get或post。该方法应为小写。PATH是请求的URI路径。并且，HANDLER是在路线匹配时执行的功能。index.ts模块将导出IndexRoute类。

我们来看看index.ts的内容。

我们来看看IndexRoute类：

首先，我们从express模块导入NextFunction，Request，Response和Router类。

我还从routes模块导入BaseRoute类。

create()静态方法创建所有将在类中定义的路由。在这个例子中，我只定义了一个路由。但是，您可能会为应用程序的部分定义多个路由。例如，UsersRoute类可能具有/users/signin/users/signup等的路由。

constructor()函数只是调用BaseRoute的构造函数。

index()函数将呈现我们的模板。在我们渲染模板之前，我们设置一个自定义标题，并定义一个名为options的对象，其中包含将在我们的模板中可用的属性和值。在这个例子中，我设置一个名为message的本地模板变量，其中包含一个简单的字符串。我将在index.pug模板中输出。

第十二步、定义routes

现在我们已经创建了第一个路由的shell，我们需要在Server类中定义它。

但是，在我们定义路由之前，让我们首先通过以下方式在server.ts模块中导入我们的IndexRoute类：

然后，让我们在server.ts模块中实现routes()方法：

在routes()方法中，我们创建了express.Router()实例。

然后，我们调用静态IndexRoute.create()方法并传入路由器实例。

最后，我们将路由器中间件添加到我们的应用程序中。

第十三步、创建Template

现在我们已经创建并定义了路由，我们需要创建必要的模板。

在这个例子中，我将在views目录中创建一个index.pug文件。

这是我的示例index.pug文件的样子：

第十四步、启动服务

我们完成了。我们为使用TypeScript源代码中的Express开发应用程序奠定了坚实的基础。下一步是编译并启动服务器。

现在启动浏览器并转到http://localhost:8080。

如果一切正常，您应该在浏览器中看到以下消息：

第十五步、安装nodemon

如果你想启动我的node服务器来监视源代码的任何变化（在开发中），那么我建议你使用nodemon

然后我们可以运行我们在package.json中定义的自定义开发脚本来启动我们的应用程序使用nodemon：

如果本文对你有帮助？请分享给更多人