获课：xingkeit.top/8974/

TS4 交叉类型实操：让 Vue 与 React 共用一套数据模型

在多框架共存的项目中，最让人头疼的不是语法差异，而是数据模型的重复定义。同一份业务数据，Vue 组件要一套接口，React 组件又要一套类型，改一个字段，两边都得动。TypeScript 交叉类型（&）恰好能从类型层面打通这堵墙。

交叉类型的本质：不是继承，是叠加

很多人把交叉类型和接口继承混为一谈。两者有本质区别：继承是层级扩展，子接口覆盖父接口；交叉类型是扁平合并，要求同名属性必须兼容，否则直接变为 never。

举个实际场景：你有一个基础用户类型包含姓名和年龄，又有一个员工类型包含工号和部门。用交叉类型合并后，得到的是一个同时拥有四个字段的完整类型。如果两个类型中都有 id，但一个是数字一个是字符串，编译器会直接报错——这种严格性在多框架共享时反而成了保护机制，避免 Vue 那边传数字、React 那边接收字符串导致的运行时崩溃。

多框架共用数据的三个实战场景

第一，统一接口响应类型。 前后端联调时，接口返回结构是固定的。用交叉类型把基础响应字段和业务字段叠加，Vue 的 axios 拦截器和 React 的 fetch 封装可以引用同一份类型定义，字段变更时只改一处。

第二，跨框架组件 props 约束。 Vue 组件用 props 接收数据，React 组件也用 props。把两套 props 约束用交叉类型合并成一个公共类型，再分别导出给两个框架使用，确保传入的数据结构完全一致。尤其在微前端场景下，主应用和子应用可能分别用 Vue 和 React，共享数据模型的意义更加突出。

第三，混合工具类型做精细控制。 TypeScript 内置的 Partial、Required、Pick 等工具类型本质上都是基于交叉类型实现的。比如更新用户时只需要传部分字段，用 Partial 把所有属性变为可选；创建用户时核心字段必填，用 Required 强制约束。这些工具类型在 Vue 和 React 中通用，不需要分别写逻辑。

避坑指南

交叉类型最大的陷阱是同名属性冲突。当两个类型存在同名字段但类型不同时，结果不是覆盖，而是变成 never。实际项目中，建议用 as const 锁定字面量类型，避免普通字符串被宽泛推断。另外，交叉类型只能做到编译时检查，运行时依然需要自己保证数据一致性——类型断言可以骗过编译器，但骗不过用户。

核心观点

交叉类型不是什么高级技巧，它解决的是一个非常具体的问题：如何让多个类型同时成立。在 Vue 与 React 共用数据的场景下，它比联合类型更合适——联合类型是"二选一"，交叉类型是"全都要"。掌握这一个符号，就能让两个框架的数据层真正互通，而不是各自为政。