如何在React前端与Node.js后端间同步TypeScript类型？

针对React前端+Node.js后端重复编写TS类型、同步易出错的问题，有几种实用方案可以解决：

1. 搭建Monorepo共享类型包 #

这是大型项目最推荐的方案，能彻底解决类型同步问题：

• 用pnpm/npm workspaces或Lerna搭建Monorepo结构，单独创建一个shared-types子项目
• 在shared-types中编写所有需要跨端共享的类型，比如：

  // shared-types/src/index.ts
  export interface DadJokes {
    id: string;
    joke: string;
  }
  

• 前端和后端项目通过本地依赖引入该包，比如在package.json中添加：

  "@your-project/shared-types": "workspace:*"
  

• 后续修改类型只需在shared-types中调整，前后端项目安装依赖后即可同步更新，完全避免重复编写和拼写错误。

2. 直接共享类型文件（小型项目适用） #

如果项目规模不大，无需复杂的Monorepo结构，可以直接共享类型文件：

• 在项目根目录创建shared/types文件夹，存放所有共享类型定义
• 前端和后端通过相对路径导入类型，比如：
  • 后端Node.js代码：import { DadJokes } from '../shared/types'
  • 前端React代码：import { DadJokes } from '../../shared/types'
• 确保前后端的tsconfig.json中include字段包含这个共享目录，比如：

  {
    "include": ["src/**/*", "../shared/**/*"]
  }
  

3. 通过代码生成同步类型（API场景适配） #

如果后端提供REST/GraphQL API，可以通过自动化工具生成前端类型：

• REST接口：使用ts-json-schema-generator将后端TS类型转换为JSON Schema，再用json-schema-to-typescript生成前端TS类型；也可以直接将后端的类型文件作为前端的类型依赖（同一代码库下）
• GraphQL接口：借助@graphql-codegen/cli工具，根据GraphQL Schema自动生成前后端的TS类型。只要Schema更新，运行生成脚本即可同步所有相关类型，完全消除手动同步的误差。

内容的提问来源于stack exchange，提问作者Jerry Seigle