如何用TypeScript为Next.js端点添加类型定义？

方法1：在API端点中定义返回类型并导出给前端使用 #

在你的API文件中，利用NextApiResponse的泛型参数明确返回数据类型，同时导出该类型供前端复用（可以直接复用Prisma等ORM生成的类型，无需手动写接口）：

// pages/api/myEndpoint.ts
import type { NextApiRequest, NextApiResponse } from 'next'
import { PrismaClient } from '@prisma/client'

// 直接复用Prisma查询的返回类型，无需手动定义接口
type MyResponseData = Awaited<ReturnType<typeof prisma.yourModel.findMany>>

const getHandler = async (
  req: NextApiRequest,
  res: NextApiResponse<MyResponseData>, // 指定响应的泛型类型
  prisma: PrismaClient
) => {
  const data = await prisma.yourModel.findMany()
  res.status(200).json(data)
}

export default getHandler

// 导出类型给前端使用
export type { MyResponseData }

前端请求时，导入该类型并传递给axios.get的泛型参数：

import type { MyResponseData } from '../pages/api/myEndpoint'
import { useQuery } from '@tanstack/react-query'
import axios from 'axios'

const { data: myData } = useQuery(['myKey'], async () => {
  // 给axios指定返回数据类型
  const response = await axios.get<MyResponseData>('/api/myEndpoint')
  return response.data
})
// 此时myData的类型为 MyResponseData | undefined

方法2：使用API契约工具自动同步类型 #

如果项目规模较大，不想手动维护前后端类型同步，可以使用ts-rest这类工具：通过定义统一的API契约，自动生成前端请求函数和后端处理函数的类型，彻底避免重复定义。

方法3：App Router Route Handlers的类型提取（Next.js 13+） #

如果你使用App Router的Route Handlers，可以直接从处理函数的返回值中提取类型：

// app/api/myEndpoint/route.ts
import { PrismaClient } from '@prisma/client'

export async function GET() {
  const prisma = new PrismaClient()
  const data = await prisma.yourModel.findMany()
  return Response.json(data)
}

// 从GET函数的返回值中提取响应数据类型
export type MyResponseData = Awaited<ReturnType<typeof GET>> extends Response<infer T> ? T : never

前端使用方式和方法1一致，导入MyResponseData并传递给axios即可。

内容的提问来源于stack exchange，提问作者Philipp Lehmann