讲师中心 微信公众号
AI工具推荐 视频效率加速

如何使用 Node.js 和 Express 设置 TypeScript

阿丽吖_3182

阿丽吖_3182

发布时间:2024-12-31 10:42:43

|

1166人浏览过

|

来源于blog.logrocket.com

原创

使用 Node.js 和 Express 通过 TypeScript 创建服务器是使用 JavaScript 的一个很好的替代方案,因为它可以更轻松地管理复杂的应用程序,并且在您需要与分布式开发团队协作时提供帮助。

如何使用 Node.js 和 Express 设置 TypeScript

使用 Node.js 和 Express 通过 TypeScript 创建服务器是一个很好的选择 使用 JavaScript 的替代方案,因为它更易于管理 复杂的应用程序,当您需要与 分布式开发团队。

TypeScript 具有以下优势:

  • 提高静态类型时的代码强度和清晰度
  • 增强协作和项目可扩展性
  • 高级工具
  • IDE 支持
  • 广泛兼容性

所有这些优点使 TypeScript 成为获得更流畅的开发体验的绝佳选择,尤其是在不断发展的项目中。

在本文中,我们将探索一种对初学者友好的方式配置 Express 应用程序中的 TypeScript,以及了解 随之而来的基本限制。为了跟随,你应该 拥有:

  • 本地开发环境中安装了 Node.js ≥ v18.x
  • 可以使用 npm、pnpm 或 Yarn 等包管理器
  • 基本熟悉使用 Node.js 和 Express

查看 GitHub 存储库以获取源代码;主分支有 TypeScript 项目,JavaScript 分支有 JavaScript 版本。

创建 package.json 文件

首先在本地开发中创建一个新目录 环境,并在其中使用 npm 的初始化命令创建 package.json 文件。如果您使用 npm 以外的包管理器,请考虑遵守该特定包管理器提供的 init 命令:

mkdir ts-node-expresscd ts-node-express/npm init -y

以这种方式初始化 package.json 文件时, --yes 或 -y flag 使用 npm 配置的默认设置,绕过 反复询问项目细节。生成的 package.json 文件可能类似于下图所示的文件:

Default Package.JSON File

因为我们应用程序的入口点将是 src/index.js,我们将在接下来的部分中讨论,您应该将 package.json 文件中的 main 字段从 index.js 更新为src/index.js:

{
  "name": "ts-node-express",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  ...}

使用 Express 创建一个最小的服务器

初始化 package.json 文件后,将 Express 和 DotEnv 包添加到项目中。在终端窗口中,运行以下命令,其中 npm i 是 npm install 的别名:

npm i express dotenv

DotEnv 包用于从 .env 读取环境变量 文件。而不是直接硬编码特定于环境的变量 到应用程序中,将它们全部包含在此文件中,并利用 DotEnv 包来管理它们。

例如,要指定服务器的端口号,请在项目目录的根目录中创建一个名为 .env 的文件。在此文件中,为 PORT 定义一个环境变量,并将其值设置为 3000。将来可以根据需要考虑在此文件中添加更多特定于环境的变量:

# Add all of the environmental variables here instead of # embedding them directly in the app and utilize them # with the `DotEnv` package.PORT=3000

然后,创建一个名为 src 的目录项目的根目录来组织我们的应用程序源文件。添加一个名为index.js的新文件,并使用以下代码填充它,包括之前定义的环境变量:

// src/index.jsconst express = require('express');const dotenv = require('dotenv');dotenv.config();const app = express();const port = process.env.PORT;app.get('/', (req, res) => {
  res.send('Express   TypeScript Server');});app.listen(port, () => {
  console.log(`[server]: Server is running at http://localhost:${port}`);});

上面的代码涵盖了设置最小的基本步骤 使用纯 JavaScript 的 Express 服务器。如需更详细的解释, 请参阅此代码段的记录版本。

要启动服务器,请在终端中执行命令node src/index.js。这将执行我们刚刚添加到 index.js 文件中的代码,并应启动一个新服务器,如下所示:

Setting Up Express Server

GitLab Hackathon
GitLab Hackathon

规划和执行公平的GitLab黑客松参与,包括季度黑客松和Transcend黑客松,分析规则,筛选符合条件的issue和MR,并跟踪进度。

下载

Express 服务器现已启动并运行,提供基础的 在 Node.js 上使用 Express 进行开发的设置。接下来,我们来增强它 在下一节中合并 TypeScript。

安装 TypeScript

我们将首先安装 TypeScript 作为开发依赖项。此外,我们将为 Express 和 Node.js 安装 @types 声明包,它们以声明文件的形式提供类型定义。

声明文件,通常用 .d.ts 表示 扩展,作为概述结构的预定义模块 TypeScript 编译器存在的 JavaScript 值或类型。 这些声明文件可用于最初编写的库 使用 JavaScript,而不是 TypeScript。

DefinitelyTyped GitHub 存储库 维护 TypeScript 类型定义以便在 Node.js 中直接使用 其他 JavaScript 项目,让您省去定义这些项目的精力 从头开始的类型。合并类型或声明文件 特定的库或模块,查找以 @types 命名空间开头的包。

启动终端并使用以下命令安装上述包:

npm i -D typescript @types/express @types/node

-D 或 -- dev, flag 指示包管理器将这些库安装为开发依赖项。

安装这些包将向 package.json 文件添加一个新的 devDependency 对象,其中包含版本每个包的详细信息,如下所示:

{
  ...
  "devDependencies": {
    "@types/express": "^5.0.0",
    "@types/node": "^22.7.4",
    "typescript": "^5.6.2"
  },
  ...}

生成 TypeScript 配置文件:tsconfig.json

每个 TypeScript 项目都使用配置文件来管理各种项目设置。 tsconfig.json 文件,用作 TypeScript 配置文件,概述了这些 默认选项并提供修改或自定义的灵活性 编译器设置以满足您的需求。

tsconfig.json 文件通常放置在项目的根目录下。要生成此文件,请使用以下 tsc 命令,启动 TypeScript 编译器:

npx tsc --init

执行此命令后,您会注意到 tsconfig.json 文件是在项目目录的根目录下创建的。这个文件 包含默认编译器选项,如下图所示:

Tsconfig.JSON File

打开 tsconfig.json 文件时,您会注意到其他几个注释掉的编译器选项。在所有这些选项中,compilerOptions 是必须指定的必填字段。以下是 compilerOptions 字段中所有默认选项的摘要:

  • target:启用编译器将输出的目标 JavaScript 版本的规范
  • module: 便于在编译时使用模块管理器 JavaScript 代码。 CommonJS 受支持,并且是 Node.js 中的标准
  • strict:切换严格类型检查协议
  • esModuleInterop:启用将 ES6 模块编译为 CommonJS 模块
  • skipLibCheck:当设置为 true 时,绕过默认库声明的类型检查files
  • forceConsistentCasingInFileNames:设置为 true 时,强制区分大小写的文件命名

您需要启用的一个关键选项是 outDir,它确定编译输出的目标目录。在 tsconfig.json 文件中找到此选项并取消注释。

默认情况下,此选项的值设置为项目的根目录。将其更改为 dist,如下所示:

{
  "compilerOptions": {
    ...
    "outDir": "./dist"
    ...
  }}

虽然可能还有其他配置选项可以添加到 TypeScript 编译器,上面的选项是基本规范 可以帮助您入门。

您现在应该将 package.json 文件中的 main 字段更新为 dist/index.js,因为 TypeScript 代码将从 src 目录编译到 dist。

热门AI工具

更多
Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

252

2026.02.13

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

460

2026.02.25

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

311

2026.03.13

TypeScript 全栈开发进阶指南
TypeScript 全栈开发进阶指南

面向有 JavaScript 基础的开发者,深入讲解 TypeScript 的类型系统与全栈开发实践。

226

2026.06.03

TypeScript Node.js 全栈工程化与Monorepo架构实践
TypeScript Node.js 全栈工程化与Monorepo架构实践

本专题围绕 TypeScript 在 Node.js 全栈开发中的工程化实践展开,系统讲解 Monorepo 架构设计、包管理策略、模块复用机制以及服务端与前端统一类型系统的构建方法。通过真实项目案例,帮助开发者提升大型全栈项目的可维护性与协作效率。

458

2026.06.16

什么是分布式
什么是分布式

分布式是一种计算和数据处理的方式,将计算任务或数据分散到多个计算机或节点中进行处理。本专题为大家提供分布式相关的文章、下载、课程内容,供大家免费下载体验。

1893

2023.08.11

分布式和微服务的区别
分布式和微服务的区别

分布式和微服务的区别在定义和概念、设计思想、粒度和复杂性、服务边界和自治性、技术栈和部署方式等。本专题为大家提供分布式和微服务相关的文章、下载、课程内容,供大家免费下载体验。

2514

2023.10.07

json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

1955

2023.08.07

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

20

2026.09.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.5万人学习

TypeScript——十天技能课堂
TypeScript——十天技能课堂

共21课时 | 1.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn