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

  • Z时代
  • 2024-01-10
  • 分类：综合

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

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

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

import { Request } from'express'
interface CustomRequestextendsRequest {}
export { CustomRequest }

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

import { Request } from'express'
interface CustomRequestextendsRequest {
  myAwesomeProperty?: number
}
export { CustomRequest }

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

import { Request } from'express'
interface CustomRequestextendsRequest {
  enterpriseID?: number
  headers      : {
    customHeader?: string
  }
}
export { CustomRequest }

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

No overload matches this call. (...)
Types of property 'headers' are incompatible.
Property 'customHeader' is missing intype'IncomingHttpHeaders' but required intype'{ 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 CustomRequestextendsRequest {
  myAwesomeProperty?: number
  headers           : IncomingHttpHeaders & {
    customHeader?: string
  }
}
export { CustomRequest }

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

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

本文转载自：迹忆客（https://www.jiyik.com）

以上是 如何使用 Express 和 TypeScript 创建自定义标头 的全部内容， 来源链接： utcz.com/z/290320.html

回到顶部