TypeScript 是一种强类型编程语言,它扩展了 JavaScript 的功能。它提供了一系列功能,可帮助您使用 Node.js 和 Express 开发可扩展的应用程序。
与 JavaScript 相比,TypeScript 的关键优势之一是它提供了类型类,使编写更可预测、更可维护的代码变得更加容易。此外,TypeScript 还提供了类型安全性,确保您的代码不会出现运行时错误,并能在开发早期更容易地发现缺陷。该语言还配备了重构工具和自动完成功能,从而改善了开发人员的体验。
此外,Node.js 和 Express 可为任何规模的应用程序提供出色的性能。在 TypeScript 中使用类还有助于组织和结构,进一步提高可扩展性。有了这些工具,您就可以构建稳健且可扩展的应用程序,以应对不断增长的需求。
本文演示了如何使用 TypeScript 通过单个端点设置 Express 应用程序。然后,它将介绍如何将应用程序部署到应用程序托管服务器。
如何创建 Express 服务器
要学习本教程,请确保您的计算机上安装了 Node.js 和 npm。设置 Express 服务器:
- 使用下面的代码创建一个目录:
mkdir sample_app && cd sample_app
- 运行此命令在目录中初始化 Node.js 应用程序:
npm init -y
命令中的
-y
标志接受创建 package.json 文件时的默认提示,该文件由以下代码填充:Explain
{ "name": "sample_app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
- 接下来,在刚刚创建的目录中安装用于添加基本功能的
express
和用于环境变量管理的 dotenv,运行此命令:npm i express dotenv
- 在 sample_app 目录根目录下创建 .env 文件,并在其中填入以下变量。
PORT=3000
- 创建一个 express 应用程序,当用户访问
http://localhost:3000
时,该程序会响应Hello World
文本。const express = require("express"); const dotenv = require("dotenv"); // configures dotenv to work in your application dotenv.config(); const app = express(); const PORT = process.env.PORT; app.get("/", (request, response) => { response.status(200).send("Hello World"); }); app.listen(PORT, () => { console.log("Server running at PORT: ", PORT); }).on("error", (error) => { // gracefully handle error throw new Error(error.message); })
dotenv.config()
使用 .env 文件中定义的变量填充 Node 应用程序的进程环境(process.env
)。 - 运行此命令启动 Node.js 应用程序:
node index.js
在浏览器上访问 http://localhost:3000,检查应用程序是否正常运行。您应该会得到与此类似的响应。
在 Express 应用程序中启用 TypeScript
按照以下步骤在 Express 应用程序中使用 TypeScript:
- 运行此命令安装 TypeScript:
npm i -D typescript
通过
-D
选项,npm 可以将软件包安装为开发依赖包。你可以在开发阶段使用该选项安装的软件包。 - DefinitelyTyped GitHub 仓库是 TypeScript 社区的优势之一。它存储了各种 npm 软件包的类型定义文档。DefinitelyTyped 是 TypeScript 开发人员不可或缺的工具。DefinitelyTyped 是 TypeScript 开发人员不可或缺的工具,它能让开发人员编写更简洁、更高效的代码,并降低出错的可能性。您可以通过运行此命令安装
express
和dotenv
的类型定义:npm install -D @types/express @types/dotenv
- 要初始化 TypeScript,请运行此命令。
npx tsc --init
生成的 tsconfig.json 文件指出了你的 TypeScript 应用程序的根目录。它提供了定义 TypeScript 编译器工作方式的
config
选项。它包括一系列禁用或启用的配置选项,并附有注释解释每个选项。 - 在
config
对象中添加outDir
属性,以定义输出目录。{ "compilerOptions": { // … "outDir": "./dist" // … } }
如何创建 TypeScript 服务器
要创建 TypeScript 服务器,请将 .js
扩展名更改为 .ts
并使用这些类型定义更新代码:
import express, { Request, Response } from "express"; import dotenv from "dotenv"; // configures dotenv to work in your application dotenv.config(); const app = express(); const PORT = process.env.PORT; app.get("/", (request: Request, response: Response) => { response.status(200).send("Hello World"); }); app.listen(PORT, () => { console.log("Server running at PORT: ", PORT); }).on("error", (error) => { // gracefully handle error throw new Error(error.message); });
要使用编译器软件包并将 TypeScript 文件编译成 JavaScript,请在应用程序的根目录下运行以下命令。
npx tsc
然后运行命令启动应用程序。
node dist/index.js
在浏览器上访问 http://localhost:3000 时,会得到 “Hello World” 的响应。
如何将 TypeScript 服务器部署到线上
现在,您已经准备好将应用程序部署到 Web 上了。您可以将应用程序部署到许多平台。
在将应用程序推送到 Git 仓库之前,使用 TypeScript 并将编译好的 JavaScript 文件提交到 Git 并不可取。在 package.json 文件中包含一个 start
脚本。
{ // … "script": { "start": "npx tsc && node dist/index.js", } // … }
此外,在应用程序的根目录中创建 .gitignore 文件,并包含 node_modules 和 .env 以防止将这些文件推送到 Git 提供者。
设置好仓库后,请按照以下步骤将应用程序部署到线上(以 Kinsta 为例):
存储库设置完成后,请按照以下步骤将应用程序部署到 Kinsta:
- 登录或创建账户,查看 MyKinsta 面板。
- 使用 Git 提供商授权 Kinsta。
- 单击左侧边栏上的 “Applications“,然后单击 “Add application“。
- 选择要部署的版本库和分支。
- 为应用程序指定一个唯一的名称,并选择 Data center location。
- 使用所有默认配置。MyKinsta 使用
npm start
作为部署应用程序的入口点。如果您想使用其他命令,可以在 MyKinsta 中调整运行时进程。 - 单击 Create application。
部署完成后,MyKinsta 会提供一个 URL 以公开访问您的应用程序部署。您可以访问该页面,确认是否显示 “Hello World”。
小结
本指南演示了如何使用 TypeScript 开发和设置 Express 应用程序,并使用线上服务器部署应用程序。TypeScript 拥有 JavaScript 所没有的额外功能(包括类型类、类型安全、重构工具和自动完成),可帮助您构建可扩展的应用程序并在开发过程中捕捉错误。
您过去使用过 TypeScript 吗?您对在 Express 服务器上使用它有什么看法?
评论留言