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



目录
相关文章
|
9天前
|
Rust JavaScript 前端开发
Node.js 添加对 TypeScript 的实验性支持
Node.js 添加对 TypeScript 的实验性支持
|
21天前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实战指南
【9月更文挑战第6天】在数字化时代的潮流中,后端开发作为支撑现代Web和移动应用的核心,其重要性不言而喻。本文将深入浅出地介绍如何使用Node.js及其流行的框架Express来搭建一个高效、可扩展的后端服务。通过具体的代码示例和实践技巧,我们将探索如何利用这两个强大的工具提升开发效率和应用性能。无论你是后端开发的新手还是希望提高现有项目质量的老手,这篇文章都将为你提供有价值的见解和指导。
|
1月前
|
JavaScript 前端开发 中间件
构建高效后端服务:Node.js与Express框架的完美搭档
【8月更文挑战第28天】在追求高性能、可扩展和易维护的后端开发领域,Node.js和Express框架的组合提供了一种轻量级且灵活的解决方案。本文将深入探讨如何利用这一组合打造高效的后端服务,并通过实际代码示例展示其实现过程。
|
29天前
|
存储 JavaScript NoSQL
构建高效Web应用:使用Node.js和Express框架
【8月更文挑战第30天】本文将引导你了解如何使用Node.js和Express框架快速搭建一个高效的Web应用。通过实际的代码示例,我们将展示如何创建一个简单的API服务,并讨论如何利用中间件来增强应用功能。无论你是新手还是有经验的开发者,这篇文章都将为你提供有价值的见解。
|
4天前
|
前端开发 JavaScript 安全
node登陆接口权限配置cookie-parser、express-session
本文介绍了在Node.js中使用express-session和cookie-parser实现登录接口的权限配置,包括验证码接口的生成和自定义中间件的创建,用于验证用户权限。
12 0
node登陆接口权限配置cookie-parser、express-session
|
4天前
|
JavaScript 前端开发
vue配合axios连接express搭建的node服务器接口_简单案例
文章介绍了如何使用Express框架搭建一个简单的Node服务器,并使用Vue结合Axios进行前端开发和接口调用,同时讨论了开发过程中遇到的跨域问题及其解决方案。
10 0
vue配合axios连接express搭建的node服务器接口_简单案例
|
9天前
|
缓存 监控 JavaScript
构建高效后端服务:Node.js与Express框架的完美结合
【9月更文挑战第18天】在数字化时代的浪潮中,后端服务的效率和稳定性成为了企业竞争力的关键。本文将深入探讨如何使用Node.js和Express框架来构建一个既高效又稳定的后端服务,同时通过实际代码示例,展示如何优化性能并确保服务的高可用性。
|
16天前
|
Web App开发 缓存 JavaScript
构建高效后端服务:Node.js与Express框架的完美结合
【9月更文挑战第11天】本文将引导开发者探索如何利用Node.js和Express框架搭建一个高效的后端服务。文章不仅深入讲解了这两个工具的核心概念,还通过实际示例展示了它们的强大功能和易用性。读者将学会如何处理HTTP请求、设计RESTful API以及优化应用性能。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的知识,帮助你在后端开发领域更进一步。
|
30天前
|
JavaScript 前端开发 安全
[译] 使用 TypeScript 开发 React Hooks
[译] 使用 TypeScript 开发 React Hooks
|
1月前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的深度整合
【8月更文挑战第27天】 在现代Web开发中,后端服务的高效性至关重要。本文深入探讨了如何利用Node.js的非阻塞I/O特性和Express框架的简洁性来打造高性能的后端服务。我们将通过具体案例,展示如何在不牺牲代码可读性和可维护性的前提下,实现高效的请求处理和服务端逻辑。文章旨在为开发者提供一个清晰的指导,帮助他们在构建后端服务时做出更明智的技术选择。