【详细教程】教你如何使用Node + Express + Typescript开发一个应用(一)

简介: Express是nodejs开发中普遍使用的一个框架,下面要谈的是如何结合Typescript去使用。

Express是nodejs开发中普遍使用的一个框架,下面要谈的是如何结合Typescript去使用。

目标


我们的目标是能够使用Typescript快速开发我们的应用程序,而最终我们的应用程序却是编译为原始的JavaScript代码,以由nodejs运行时来执行。


初始化设置


首要的是我们要创建一个目录名为express-typescript-app来存放我们的项目代码:

mkdir express-typescript-app
cd express-typescript-app

为了实现我们的目标,首先我们需要区分哪些是线上程序依赖项,哪些是开发依赖项,这样可以确保最终编译的代码都是有用的。

在这个教程中,将使用yarn命令作为程序包管理器,当然npm也是一样可以的。


生产环境依赖


express作为程序的主体框架,在生产环境中是必不可少的,需要安装

yarn add express

这样当前目录下就生成了一个package.json 文件,里面暂时只有一个依赖

开发环境依赖项


在开发环境中我们将要使用Typescript编写代码。所以我们需要安装typescript。另外也需要安装node和express的类型声明。安装的时候带上- D参数来确保它是开发依赖。

yarn add -D typescript @types/express @types/node

安装好之后,还有一点值得注意,我们并不想每次代码更改之后还需要手动去执行编译才生效。这样体验太不好了!所以我们需要额外添加几个依赖:

  • ts-node: 这个安装包是为了不用编译直接运行typescript代码,这个对本地开发太有必要了
  • nodemon:这个安装包在程序代码变更之后自动监听然后重启开发服务。搭配ts-node模块就可以做到编写代码及时生效。

因此这两个依赖都是在开发的时候需要的,而不需编译进生产环境的。

yarn add -D ts-node nodemon


配置我们的程序运行起来


配置Typescript文件

为我们将要用的typescript设置配置文件,创建tsconfig.json文件

touch tsconfig.json

现在让我们给配置文件添加编译相关的配置参数:

  • module: "commonjs" — 如果使用过node的都知道,这个作为编译代码时将被编译到最终代码是必不可少的。
  • esModuleInterop: true — 这个选项允许我们默认导出的时候使用*代替导出的内容。
  • target: "es6" — 不同于前端代码,我们需要控制运行环境,得确保使用的node版本能正确识别ES6语法。
  • rootDir: "./" — 设置代码的根目录为当前目录。
  • outDir: "./build" — 最终将Typescript代码编译成执行的Javascript代码目录。
  • strict: true — 允许严格类型检查。

最终tsconfig.json文件内容如下:

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "rootDir": "./",
    "outDir": "./build",
    "strict": true
  }
}


配置package.json脚本

目前还没有 package.json文件的scripts项,我们需要添加几个脚本:第一个是start启动开发模式,另一个是 build打包线上环境代码的命令。

启动开发模式我们需要执行nodemon index.ts,而打包生产代码,我们已经在tsconfig.json中给出了所有需要的信息,所以我们只需要执行tsc命令。

此刻下面是你package.json文件中所有的内容,也可能由于我们创建项目的时间不一样,导致依赖的版本号不一样。

{
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.11",
    "@types/node": "^14.14.22",
    "nodemon": "^2.0.7",
    "ts-node": "^9.1.1",
    "typescript": "^4.1.3"
  }
}


Git配置

如果使用git来管理代码,还需要添加.gitignore文件来忽视node_modules目录和build目录

touch .gitignore

添加忽视的内容

node_modules
build

至此,所有的安装过程已经结束,比单纯的无Typescript版本可能稍微复杂点。



目录
相关文章
|
4天前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
19 1
|
4天前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
25 4
|
5天前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
10天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第40天】在这篇文章中,我们将一起探索Node.js的奥秘,从基础概念到实际应用,逐步揭示如何利用Node.js构建高效、可扩展的后端服务。通过实际案例分析,我们将了解Node.js在现代Web开发中的应用,以及如何克服常见的开发挑战。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供宝贵的见解和实用的技巧,帮助你在Node.js的道路上更进一步。
21 4
|
14天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第36天】本文将引导您探索Node.js的世界,通过实际案例揭示其背后的原理和实践方法。从基础的安装到高级的异步处理,我们将一起构建一个简单的后端服务,并讨论如何优化性能。无论您是新手还是有经验的开发者,这篇文章都将为您提供新的视角和深入的理解。
|
19天前
|
Web App开发 存储 JavaScript
深入浅出Node.js后端开发
【10月更文挑战第31天】本文将引导你进入Node.js的奇妙世界,探索其如何革新后端开发。通过浅显易懂的语言和实际代码示例,我们将一起学习Node.js的核心概念、搭建开发环境,以及实现一个简单但完整的Web应用。无论你是编程新手还是希望拓展技术的开发者,这篇文章都将为你打开一扇通往高效后端开发的大门。
|
17天前
|
Web App开发 JavaScript 前端开发
探索后端开发:Node.js与Express的完美结合
【10月更文挑战第33天】本文将带领读者深入了解Node.js和Express的强强联手,通过实际案例揭示它们如何简化后端开发流程,提升应用性能。我们将一起探索这两个技术的核心概念、优势以及它们如何共同作用于现代Web开发中。准备好,让我们一起开启这场技术之旅!
32 0
|
17天前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实践
【10月更文挑战第33天】在数字化时代的浪潮中,后端服务的效率和可靠性成为企业竞争的关键。本文将深入探讨如何利用Node.js和Express框架构建高效且易于维护的后端服务。通过实践案例和代码示例,我们将揭示这一组合如何简化开发流程、优化性能,并提升用户体验。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的见解和实用技巧。
|
19天前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的融合之道
【10月更文挑战第31天】在追求快速、灵活和高效的后端开发领域,Node.js与Express框架的结合如同咖啡遇见了奶油——完美融合。本文将带你探索这一组合如何让后端服务搭建变得既轻松又充满乐趣,同时确保你的应用能够以光速运行。
24 0
|
1月前
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
下一篇
无影云桌面