Angular 6应用与API服务器共享类型定义的合理项目结构咨询

我来给你梳理下在Angular 6应用和API服务器之间共享类型定义的最优方案，同时解答你提出的三个疑问：

核心思路 #

我们的目标是让Hero这类类型定义只维护一份，同时保证客户端和服务端都能安全引用，避免重复编码和类型不一致的问题。下面逐个分析你的问题：

1. 是否应将服务器置于Angular应用的子目录中？ #

绝对不推荐这种做法。虽然初期搭建时省了点事，但长期来看会把客户端和服务端的职责混在一起，带来很多麻烦：

• 两者的依赖、构建流程完全不同，放在同一个目录下容易出现依赖冲突；
• 后续独立部署时（比如Angular部署到CDN，API服务器部署到云服务器），拆分起来会非常麻烦；
• 代码结构混乱，不利于团队成员分工维护（前端和后端开发人员可能需要各自修改不同的部分，混在一起容易误操作）。

2. 是否应先构建服务器应用，再从Angular应用中引用其源码？ #

这种方式也不可取。服务端源码里包含大量业务逻辑、数据库操作、中间件等无关代码，客户端引用的话会引入不必要的依赖，而且类型定义和服务端业务代码耦合度太高——一旦服务端调整了目录结构或者修改了非类型代码，客户端的引用路径可能直接失效，维护成本直线上升。另外，构建后的服务端代码通常是编译后的JS文件，客户端引用类型定义会非常不方便。

3. 是否应构建第三个Models项目，将所有定义写入其中并进行引用？ #

这是最推荐的解决方案，也是行业内的通用做法。具体操作如下：

• 创建一个独立的共享类型库（比如命名为shared-models），这个库只存放需要在两端共享的TypeScript接口、类型别名、枚举等，不需要任何运行时代码；
• 配置这个库的tsconfig.json，开启declaration: true，确保编译后生成类型声明文件；
• 把Hero这类共享定义放在库中，比如src/hero.model.ts：

  export interface Hero {
    id: number;
    name: string;
    // 其他需要的属性
  }
  

• 在Angular应用和API服务器项目中，通过本地路径引用这个共享库（如果是团队协作，可以把库发布到私有npm仓库，方便大家安装引用）；
• 客户端使用示例：

  import { Hero } from 'shared-models';
  this.httpService.get<Hero[]>(apiUrl + '/heroes');
  

• 服务端使用示例：

  import { Hero } from 'shared-models';
  app.get('/heroes', async (req, res) => {
    const heroes: Hero[] = await db.Heroes.findAll<Hero>();
    res.status(200).send(heroes);
  });
  

这种方案的优势非常明显：

• 类型定义单一数据源，修改一次就能同步到两端，彻底避免类型不一致的问题；
• 客户端和服务端完全解耦，各自的开发、构建、部署流程不受影响；
• 共享库专注于类型，体积小，不会引入任何冗余代码。

额外小建议 #

如果团队规模不大，不想单独维护一个npm包，可以用Git子模块的方式把共享库引入到两个项目中，或者用yarn link/npm link进行本地开发调试，上线时把共享库的类型代码打包进各自的项目即可。

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