如何在前端和后端项目之间共享TypeScript类型定义-原创手记-慕课网

关于项目引用、别名和共享仓库的替代方案

在现代 web 开发中，确保前后端的一致性至关重要，特别是在涉及 TypeScript 类型时。在前后端之间共享这些类型可以简化开发流程，减少错误并提高整体可维护性。本指南介绍了一种使用 rsync 和 nodemon 在前后端项目间共享 TypeScript 类型的有效方法。

问题点

在开发 web 应用时，前后端通常都需要使用相同的数据结构。在两个项目中重复定义类型会导致不一致和额外的维护工作。更好的做法是拥有类型定义的单一来源，并自动在各个项目之间共享这些类型。

解决办法

我们将使用 rsync 来复制类型定义文件（.types.ts）从一个项目到另一个项目，并用 nodemon 来监控变更并自动触发复制。

一步-by-一步实现:

1. 项目结构是怎么样的

假设你有两个独立项目：一个用于前端项目 (ui.project)，一个用于后端项目 (api.project)。这两个项目各自都有一个 src/domain 目录，包含 TypeScript 文件及类型定义文件（type definitions）。

以下是 API 项目的目录结构:
/api.project  
└── /src  
    └── /domain  
        ├── auth.ts  # 此目录包含身份验证相关的 TypeScript 文件
        └── auth.types.ts  # 此目录包含身份验证相关的 TypeScript 文件
以下是 UI 项目的目录结构:
/ui.project  
└── /src  
    └── /domain  
        ├── auth.ts  # 此目录包含身份验证相关的 TypeScript 文件
        └── auth.types.ts  # 此目录包含身份验证相关的 TypeScript 文件

对于这篇文章，我们将使用bun运行时环境。我们还需要使用nodemon、rsync和npm-run-all这些工具。

    bun add nodemon npm-run-all

大多数类似 UNIX 的系统都内置了 rsync，前端配置

2. 前端设置

在你的前端项目的 package.json 文件里，添加以下脚本命令：

{  
  "scripts": {  
    "dev:copy-types-to-api": "开发: 将类型复制到API",  
    "dev:watch:copy-types-to-api": "开发: 监视并将类型复制到API",  
    "dev:start": "开发: 启动",  
    "dev": "开发"  
  }  
}

3. 后端的配置

在你的后端项目的 package.json 文件中添加以下脚本：

{  
  "scripts": {  
    "dev:start": "bun src/server.ts", // 启动开发服务器: 启动服务器端代码
    "dev:copy-types-to-ui": "rsync -av --include='*/' --include='*.types.ts' --exclude='*' src/domain ../ui.project/api.types", // 复制类型到UI: 将类型文件从domain复制到UI项目
    "dev:watch:copy-types-to-ui": "bun nodemon --quiet --watch src/domain --ext ts --exec bun dev:copy-types-to-ui", // 监视并复制类型到UI: 当domain目录发生变化时，自动复制类型文件到UI项目
    "dev": "bun run-p dev:start dev:watch:copy-types-to-ui" // 开发模式: 同时启动服务器和监视复制类型文件的任务
  }  
}

4. 添加导入别名（alias）

为了方便在两个项目中导入共享类型，你可以在你的TypeScript配置文件（tsconfig.json）中设置导入别名。这允许你使用一致且清晰的路径来导入类型，无论这些类型起源于何处。

在前端项目的 tsconfig.json 文件中，更新它以包含从后端复制类型的别名

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@api-types/*": ["./api.types/*"]
    }
  }
}
// 这里的路径映射表示api.types文件夹中的类型定义

你现在可以直接在前端代码中从后端引入类型，就像这样：

// 导入认证类型 from '@api-types/auth.types';
import { AuthType } from '@api-types/auth.types';

在后端项目中

同样，更新你后端项目中的 tsconfig.json，包含从前端复制类型的别名配置。

{
  // 编译器选项
  "compilerOptions": {
    // 基准URL
    "baseUrl": "./",
    // 路径映射
    "paths": {
      // UI类型路径映射
      "@ui-types/*": ["./ui.types/*"]
    }
  }
}

现在你可以在后端代码中导入前端的类型。

    import { AuthType } from '@ui-types/auth.types';

它是怎么工作的:

复制类型：前端项目中的 dev:copy-types-to-api 脚本和后端项目中的 dev:copy-types-to-ui 脚本使用 rsync 将 *.types.ts 文件从一个项目复制到另一个项目中对应的目录。
监听更改情况：dev:watch:copy-types-to-api 和 dev:watch:copy-types-to-ui 脚本使用 nodemon 监听 src/domain 目录中的更改情况。一旦发现更改，相应的复制脚本就会自动运行。
同时运行这两个进程：两个项目的 dev 脚本使用 run-p 同时运行开发服务器 (dev:start) 和监听进程。run-p 是 npm-run-all 包里的一个工具。

结尾

通过在你的 tsconfig.json 中添加导入别名，你可以使导入语句更简洁并使代码更易读。这结合自动化的类型共享功能，确保了前后端项目中类型定义一致、开发流程平滑高效。

最初发布于2024年6月30日。https://krimlabs.com

栈学 🎓

感谢你读到最后，下面要说几句话，在你走之前：

请给作者鼓掌并关注他！👏
关注我们哦 X | LinkedIn | YouTube | Discord
看来看看我们的其他平台吧：In Plain English | CoFeed | Differ
更多内容请访问我们的官网 Stackademic.com