如何将新属性添加到NextRequest类型

Question

我正在创建一个中间件；name"；属性设置为NextRequest，此属性将用于API 的其他部分

import { NextRequest, NextResponse } from 'next/server'
export function middleware(req: NextRequest) {
req.name = 'Foo'
NextResponse.next()
}

我收到这个错误Property 'name' does not exist on type 'NextRequest'

另一种选择是创建一个扩展NextRequest的接口，但我必须导入所有想要访问"请求"的文件；name"；属性

import { NextRequest, NextResponse } from 'next/server'
interface CustomRequest extends NextRequest {
name: string
}
export function middleware(req: CustomRequest) {
req.name = 'Foo'
NextResponse.next()
}

有什么方法可以将此属性添加到NextRequest全局类型中吗？

Answer 1

显示我是如何根据julialves的评论解决问题的

---

创建.d.ts文件，可以使用任何名称

// global.d.ts
import { NextRequest as OriginalNextRequest } from 'next/server'
declare global {
declare interface NextRequest extends OriginalNextRequest {
name: string
}
}

有必要：

• extends OriginalNextRequest显示下一的所有NextRequest类型

• 重命名NextRequest导入，否则在扩展NextRequest时，typescript会认为NextRequest是您正在创建的接口，并且只会在自动完成中显示name

导入修改后的NextRequest

// tsconfig.json
"paths": {
"*": ["*.d.ts"]
}

如果.d.ts文件在文件夹中

"paths": {
"*": ["types/*.d.ts"]
}

现在打字脚本没有显示错误，说name在NextRequest中不存在

import { NextResponse } from 'next/server'
export function middleware(req: NextRequest) {
req.name = 'Foo'
NextResponse.next()
}

注意：不要从next导入NextRequest，否则全局类型将被导入的NextRequest替换

import { NextRequest, NextResponse } from 'next/server'
export function middleware(req: NextRequest) {
req.name = 'Foo' // error
NextResponse.next()
}

如果您想从下一步开始使用NextRequest，请重命名导入