使用Prisma类型结合React Hook Form时出现CPU占用过高问题

不少开发者都碰到过这个问题——Prisma自动生成的CompanyCreateInput这类输入类型包含大量嵌套、可选及关联类型的推导逻辑，TypeScript在处理这类复杂泛型时，容易出现性能瓶颈，导致VSCode的TS服务器CPU占用飙升。

问题重现 #

使用Company模型作为useForm的泛型参数时，代码正常运行：

import { Prisma, Company } from '@prisma/client'  

const {
  register,
  handleSubmit,
} = useForm<Company>();

但改用Prisma.CompanyCreateInput后，VSCode的TypeScript服务器瞬间占满CPU：

import { Prisma, Company } from '@prisma/client'  

const {
  register,
  handleSubmit,
} = useForm<Prisma.CompanyCreateInput>();

可行的解决方案 #

• 手动定义简化的表单输入类型
  只保留表单实际需要的字段，避免加载Prisma生成的复杂类型：

  // 自定义简化版输入类型
  type CompanyFormInput = {
    name: string;
    address?: string;
    phone?: string;
    // 其他表单用到的字段
  };
  
  const { register, handleSubmit } = useForm<CompanyFormInput>();
  

• 用Pick/Omit筛选必要字段
  从CompanyCreateInput中只提取表单需要的字段，减少类型复杂度：

  const { register, handleSubmit } = useForm<
    Pick<Prisma.CompanyCreateInput, 'name' | 'email' | 'address'>
  >();
  

• 优化VSCode的TypeScript服务器配置
  在VSCode的settings.json中添加以下配置，减少TS服务器的处理压力：

  "typescript.tsserver.watchOptions": {
    "watchDirectory": "dynamicPriorityPolling",
    "excludeDirectories": ["node_modules/.prisma"]
  }
  

• 更新依赖版本
  尝试升级Prisma和react-hook-form到最新稳定版，部分版本兼容性问题可能会导致类型推导性能下降。

内容的提问来源于stack exchange，提问作者Pierre Olivier Tran