如何将Prisma自动生成的TypeScript类型共享给前端应用使用?
Prisma自动生成类型共享给前端的落地实现方案
下面是3种经过实践验证的可行方案,可以根据你们的项目架构选择:
方案1:手动重导出后打包共享
适合所有架构的项目,操作门槛最低:
- 在后端Prisma项目中新建一个类型导出文件,比如
src/types/prisma-exports.ts,按需导出需要共享的类型:
// 从Prisma自动生成的客户端中导出类型,不会引入任何运行时代码 export type { User, Post, Comment, Prisma } from '@prisma/client' // 可以按需导出特定CRUD操作的入参类型 export type CreateUserParams = Prisma.UserCreateInput export type UpdateUserParams = Prisma.UserUpdateInput // 可以对原始类型做脱敏处理再导出,避免暴露后端敏感字段 export type PublicUser = Omit<User, 'passwordHash' | 'internalUserId'>
- 用
tsc、tsup等工具把上述文件编译为独立的.d.ts类型包,要么发布到公司内部npm源,要么通过npm link、pnpm workspace等方式在Monorepo内直接给前端项目依赖引用。
方案2:配置Prisma生成器直接输出到公共目录
适合Monorepo架构的项目,全程自动化不需要额外操作:
- 在
prisma/schema.prisma配置文件中新增自定义生成器,指定输出路径为Monorepo内的公共类型包目录:
generator client { provider = "prisma-client-js" } // 新增类型导出生成器,执行generate后自动输出类型到指定位置 generator sharedTypes { provider = "prisma-export-types" // 替换为你的公共类型包路径,前端项目可以直接引用该路径下的类型 output = "../packages/common/src/types/prisma" }
- 每次修改Prisma Schema后执行
npx prisma generate,最新的类型会自动同步到公共目录,前端直接导入使用即可。
方案3:脚本自动同步类型到独立前端仓库
适合前后端分仓、没有内部npm源的场景:
写一个简单的Node脚本,每次执行prisma generate之后自动触发:
- 读取
node_modules/.prisma/client/index.d.ts文件内容 - 剔除Prisma内部运行时相关的类型定义,只保留业务DTO和操作类型
- 自动推送到前端仓库的指定类型目录,或者通过git submodule同步
核心注意点
- 不要把完整的
@prisma/client包安装到前端项目,会引入大量后端专用的运行时代码,仅需要共享纯类型定义文件即可 - 所有导出给前端的类型建议做一次校验,剔除密码、内部标识等敏感字段,避免业务信息泄露
内容的提问来源于stack exchange,提问作者Xen_mar
相关产品推荐
相关产品推荐

