TypeScript 如何定义交叉类型

生活里你肯定有过“拼接”东西的经历吧——比如用乐高积木把小房子和小汽车拼在一起，得到一个带小阳台的车；或者把手机壳和磁吸充电宝套在一块儿，变成能吸在墙上看剧的“懒人追剧套装”。TypeScript里的交叉类型，其实就是这么个“拼接类型”的工具。

举个例子，假设你做电商平台，需要同时获取用户的基础信息和收货地址。基础信息是“有姓名和手机号的人”，收货地址是“有地址和邮编的地方”。如果分开写两个类型，每次用的时候都要写全一堆属性，太麻烦了。交叉类型就能把这俩拼在一起，得到一个“既有姓名手机号，又有地址邮编”的新类型，刚好匹配你需要的完整信息。

先搞懂交叉类型的基本写法

TypeScript里用“&”符号来定义交叉类型，就像把两个类型用“和”连起来。刚才说的用户和地址的例子，用代码写出来是这样的：

`typescript

// 基础信息类型

type UserBasic = {

name: string;

phone: string;

};

// 收货地址类型

type Address = {

address: string;

zipCode: string;

};

// 交叉类型：把两个类型拼起来

type UserWithAddress = UserBasic & Address;

`

这么定义后，UserWithAddress就同时拥有UserBasic和Address的所有属性，少一个都不行。

用生活例子看交叉类型的实际用法

还是拿电商平台举例子，你做的收货表单需要填的内容，刚好对应这个交叉类型。如果有个接口返回的对象，刚好有name“张三”、phone“13xxxxxxxxx”、address“北京朝阳区”、zipCode“100000”，那它就完全符合UserWithAddress类型，TypeScript会自动帮你检查，少填了某一项就会报错。

再举个日常开发里的小场景：你要做一个“可点击的图片组件”，既要有普通图片的属性（比如src、alt），又要有按钮的点击属性（比如onClick）。用交叉类型就能把这两个属性拼在一起，不用重复写代码：

`typescript

// 图片类型

type ImageProps = {

src: string;

alt: string;

};

// 按钮点击类型

type Clickable = {

onClick: () => void;

};

// 可点击图片的交叉类型

type ClickableImage = ImageProps & Clickable;

`

这样写组件的时候，你只要给src、alt和onClick，就能生成符合要求的可点击图片，比分开写两个类型再合并要简洁多了。

交叉类型要注意的小细节

不是所有类型都能随便拼接，比如如果两个类型里有同名且类型不同的属性，交叉后这个属性的类型会变成never——也就是“永远不可能存在的值”，用的时候会直接报错。就像你没法同时是“18岁的成年人”和“15岁的未成年人”，这两个属性冲突的话，拼出来的类型就没有实际意义。

比如：

`typescript

type Adult = { age: 18 };

type Teen = { age: 15 };

type WrongType = Adult & Teen; // age的类型是never

`

这个WrongType类型里，age既要是18又要是15，根本不可能，所以用的时候TypeScript会提示错误，避免你写错。

交叉类型就是帮你“拼接需要的属性”的工具，不用每次都重新写所有属性，还能提前帮你检查属性冲突的问题。不管是做电商表单、UI组件还是其他开发场景，用好交叉类型都能让代码更简洁、更不容易出错。