大型MERN项目中前后端TypeScript类型共享与管理方案咨询

方案1：根目录创建独立共享类型包（推荐） #

这是最规范、可扩展的长期维护方案：

• 步骤1：在项目根目录新建shared-types文件夹并初始化npm包

  mkdir shared-types && cd shared-types
  npm init -y
  

  修改package.json配置类型与入口：

  {
    "name": "shared-types",
    "version": "1.0.0",
    "main": "src/index.ts",
    "types": "src/index.ts",
    "type": "module"
  }
  

  若用TypeScript，需安装typescript并配置tsconfig.json，确保类型能被正确识别。

• 步骤2：迁移并维护共享类型
  将所有基于Mongo Schema的类型（如用户、订单）移到shared-types/src/models目录，示例：

  // shared-types/src/models/User.ts
  import type { Types } from 'mongoose'
  
  export interface User {
    _id: Types.ObjectId
    username: string
    email: string
    avatar?: string
    createdAt: Date
    updatedAt: Date
  }
  

  在src/index.ts统一导出所有类型，简化其他项目的引用：

  export * from './models/User'
  export * from './models/Order'
  

• 步骤3：在各子项目中安装本地依赖
  分别进入backend、client、master、manager目录执行：

  npm install ../shared-types
  

  之后即可在任意项目中直接导入共享类型：

  // backend路由文件
  import { User } from 'shared-types'
  
  // React前端组件
  import { User } from 'shared-types'
  

• 优势：类型修改仅需在shared-types操作一次，所有依赖项目自动同步；后续可扩展为私有npm包，适配多团队协作场景。

方案2：根目录公共类型文件夹+TS路径映射（轻量方案） #

不想维护独立npm包时，可通过TypeScript路径映射直接引用根目录类型：

• 步骤1：根目录新建shared-types文件夹，存放所有共享类型（结构同方案1）

• 步骤2：配置各项目的路径映射
  在每个子项目的tsconfig.json中添加路径配置：

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@shared/*": ["../shared-types/*"]
      }
    }
  }
  

  Vite前端项目需额外在vite.config.ts配置别名，确保Vite识别路径：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    resolve: {
      alias: {
        '@shared': '../shared-types'
      }
    }
  })
  

  后端Express项目若用TS，需安装tsconfig-paths并修改启动脚本：

  "start": "ts-node -r tsconfig-paths/register src/index.ts"
  

• 步骤3：直接引用共享类型
  在各项目中通过别名导入：

  import { User } from '@shared/models/User'
  

• 优势：无需维护独立npm包，配置简单；适合小型项目或快速迭代场景。

进阶优化：Schema与TS类型自动同步 #

用@typegoose/typegoose库从TS类自动生成Mongo Schema，彻底避免Schema与类型不一致：

• 安装依赖（在shared-types或backend中）：

  npm install @typegoose/typegoose mongoose
  npm install -D typescript @types/mongoose
  

• 定义TS类并生成Schema：

  // shared-types/src/models/User.ts
  import { prop, getModelForClass } from '@typegoose/typegoose'
  
  export class User {
    @prop({ required: true, unique: true })
    public email!: string
  
    @prop({ required: true })
    public username!: string
  
    @prop()
    public avatar?: string
  
    @prop({ default: Date.now })
    public createdAt!: Date
  
    @prop({ default: Date.now })
    public updatedAt!: Date
  }
  
  // 导出供backend使用的Model
  export const UserModel = getModelForClass(User)
  

  backend直接用UserModel操作数据库，前端导入User类作为类型，实现Schema与类型的完全统一。

内容的提问来源于stack exchange，提问作者Mohammed Mehdi