迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

如何使用 Express 和 TypeScript 创建自定义标头

作者:迹忆客 最近更新:2023/01/08 浏览次数:

最近,我不得不创建一个功能,将一些数据存储在 PostgreSQL 数据库中。 一旦完成了所有事情,或者至少完成了最小的功能,则必须为自己的端点添加某种基本身份验证。 没什么新鲜的,我们只是在这里使用一个自定义的标准头,“密钥”,它会告诉我们哪个客户端正在执行请求。

你可能会认为这很容易,但我花了将近 5 个小时的研究才弄清楚如何实现它。 所以写下这篇文章。 我们开工吧!

假设大家对 Node.js、Express、TypeScript 等有所了解。 那么需要做的第一件事是创建一个从 Express 的 Request 接口扩展而来的 CustomRequest 接口,如下所示:

import { Request } from 'express'

interface CustomRequest extends Request {}

export { CustomRequest }

到目前为止,一切都很好。 此时,我们可以添加任意数量的属性,但它们必须是可选的(使用 ? 运算符),例如:

import { Request } from 'express'

interface CustomRequest extends Request {
  myAwesomeProperty?: number
}

export { CustomRequest }

通过这样做,将能够访问 myAwesomeProperty 作为请求对象的属性。 现在你可能认为下一步是创建一个名为 headers 的属性并将其定义为 ob。

import { Request } from 'express'

interface CustomRequest extends Request {
  enterpriseID?: number
  headers      : {
    customHeader?: string
  }
}

export { CustomRequest }

如果使用上面的代码并尝试从标头中访问 customHeader 属性,则我们的编译器将会出现一个巨大的错误,例如:

No overload matches this call. (...)
Types of property 'headers' are incompatible.
Property 'customHeader' is missing in type 'IncomingHttpHeaders' but required in type '{ customHeader: string; }'.ts(2769)

像往常一样,这是一个非常复杂且难以理解的错误,但我们可以解决它。我们可能会注意到这里重要的是 IncomingHttpHeaders 类型和我们的 customHeader 属性。如果你检查Request的定义,你会注意到它是从core.Request接口继承而来的,而这个接口又是从http.IncomingMessage类扩展而来的,并且这个类有一个名为headers的属性,它的类型是IncomingHttpHeaders(来自httpmodule )。我们找到了!

所以现在我们知道标头来自某种类型,但我们不能在 TypeScript 中扩展类型,对吧?好吧,从严格意义上讲,这可能是正确的,但是有一种方法可以在 TypeScript 中“扩展”类型。做到这一点的方法是使用交集,当我们相交两个或多个类型时,我们使用 & 运算符从它们创建一个新类型。因此,我们的下一步将从 http 导入 IncomingHttpHeaders 并将其与我们的自定义标头相交。

import { IncomingHttpHeaders } from 'http'
import { Request } from 'express'

interface CustomRequest extends Request {
  myAwesomeProperty?: number
  headers           : IncomingHttpHeaders & {
    customHeader?: string
  }
}

export { CustomRequest }

到这就结束了吗?并不是。如果将本文留在此处,那么可能会遇到与我相同的错误 — 每当我尝试访问我的 customHeader 时,我都会得到未定义的结果,完全没有明显的原因。如果没有任何解释,大家可能无法访问新的自定义标头。但是有一个解决方案!只需将 customHeader 属性更改为 custom-header 或 Custom-Header 就可以了,现在通过使用方括号 (req.headers['custom-header']),我们将能够访问自己的标题。

为什么我们必须这样做?为什么 Express 在使用驼峰式大小写时似乎无法访问我们的自定义标头?我不知道,但如果你这样做,请随时在这里评论为什么,我们都可以从你的回答中受益。

相关文章

在 TypeScript 中声明一个 ES6 Map

发布时间:2023/03/05 浏览次数:181 分类:WEB前端

本篇文章将指导我们使用编码示例在 TypeScript 中定义 ES6 Map。 这解释了什么是 ES6 Map及其用途。 让我们首先看看 ES6 是什么以及为什么使用它们。 ES6 Map 在 ES6 之前,我们使用对象通过将

如何在 TypeScript 中合并对象

发布时间:2023/02/20 浏览次数:217 分类:编程语言

使用扩展语法 ... 合并 TypeScript 中的对象,例如 const obj3 = { ...obj1, ...obj2} 。 最终对象的类型将被成功推断,因此尝试添加或删除属性会导致类型检查器显示错误。 const obj1 = { name : 迹忆

如何在 TypeScript 中对数组进行排序

发布时间:2023/02/15 浏览次数:196 分类:编程语言

在 TypeScript 中对 Numbers 数组进行排序 使用 sort() 方法对 TypeScript 中的数组进行排序,例如 numArray.sort((a, b) = a - b) 。 sort 方法采用定义排序顺序的函数作为参数。 在对数值数组进行排序

如何在 TypeScript 中扩展类型

发布时间:2023/02/15 浏览次数:230 分类:编程语言

在 TypeScript 中扩展类型 使用交集类型来扩展 TypeScript 中的类型,例如 type TypeB = TypeA {age: number;} 。交集类型使用 符号定义,用于组合现有对象类型。 我们可以根据需要多次使用 运算符

TypeScript 中如何创建 Date 日期对象

发布时间:2023/02/14 浏览次数:219 分类:编程语言

使用 Date 类型在 TypeScript 中键入 Date 对象,例如 const date: Date = new Date() 。 Date() 构造函数返回一个类型为 Date 的对象。 该接口定义了 Date 对象上所有内置方法的类型。 // ?️ const da

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便