【详细教程】教你如何使用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版本可能稍微复杂点。



目录
相关文章
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
899 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
JavaScript 前端开发 数据可视化
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
1091 2
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
|
人工智能 监控 JavaScript
HarmonyOS5云服务技术分享--ArkTS开发Node环境
本文详细讲解了在HarmonyOS(ArkTS API 9及以上)中使用云函数的开发技巧,结合Node.js和HTTP触发器,从零开始手把手教学。内容涵盖核心能力、开发流程(配置到部署)、高阶优化及常见问题解决,并提供实际应用场景示例。助你快速掌握Serverless开发,提升效率,探索跨端协作与AI集成等未来方向。
|
存储 人工智能 开发框架
Eliza:TypeScript 版开源 AI Agent 开发框架,快速搭建智能、个性的 Agents 系统
Eliza 是一个开源的多代理模拟框架,支持多平台连接、多模型集成,能够快速构建智能、高效的AI系统。
2000 8
Eliza:TypeScript 版开源 AI Agent 开发框架,快速搭建智能、个性的 Agents 系统
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
491 10
|
传感器 JavaScript 前端开发
利用TypeScript提升代码质量和开发效率
TypeScript作为JavaScript的超集,通过引入静态类型系统和面向对象特性,显著提升了代码质量和开发效率。本文介绍了TypeScript的基本概念、优势及最佳实践,包括基础类型注解、接口与类的使用、类型推断、高级类型、装饰器应用及现代工具的集成,帮助开发者构建更健壮的应用程序。
|
Web App开发 JavaScript 前端开发
Node.js开发
Node.js开发
366 13
|
存储 JavaScript 前端开发
深入浅出Node.js后端开发
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将以Node.js为例,深入探讨其背后的哲学思想、核心特性以及在实际项目中的应用,旨在为读者揭示Node.js如何优雅地处理高并发请求,并通过实践案例加深理解。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和思考。
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
在这篇文章中,我们将一起探索Node.js的奇妙世界。无论你是刚接触后端开发的新手,还是希望深化理解的老手,这篇文章都适合你。我们将从基础概念开始,逐步深入到实际应用,最后通过一个代码示例来巩固所学知识。让我们一起开启这段旅程吧!