迹忆客 专注技术分享

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

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

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

最近,我不得不创建一个功能,将一些数据存储在 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 在使用驼峰式大小写时似乎无法访问我们的自定义标头?我不知道,但如果你这样做,请随时在这里评论为什么,我们都可以从你的回答中受益。

本站文章均为原创或翻译,转载请发邮件至 1244347461@qq.com 进行申请,未经许可,禁止转载。经作者同意之后,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

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

热门文章

教程更新

热门标签

扫码一下
查看教程更方便