如何用Type类型扩展TS接口？组件互斥Props复用方案咨询

报错原因 #

TypeScript的interface只能继承对象类型（比如另一个接口）或成员静态可知的交叉类型，无法直接继承联合类型PossibleColorsTypes，这就是你遇到报错的核心原因。

解决方案 #

方案1：将组件Props改为类型别名，用交叉类型组合互斥逻辑

把原来的interface Props改成类型别名，通过交叉类型将互斥的PossibleColorsTypes和组件其他属性合并：

interface PossibleColors1 {
    color?: AllColorsTypes // 预设颜色列表
    customColor?: never
}

interface PossibleColors2 {
    color?: never
    customColor?: CustomColorTypes // 自定义颜色类型
}

type PossibleColorsTypes = PossibleColors1 | PossibleColors2

// 用类型别名+交叉类型替代接口扩展
type Props = PossibleColorsTypes & {
    // 这里添加组件的其他属性，示例：
    size?: 'small' | 'medium' | 'large'
    onClick?: () => void
}

方案2：封装通用互斥类型工具，实现全局复用

如果多个组件都需要互斥Props逻辑，可以封装一个通用工具类型，避免重复编写PossibleColors1、PossibleColors2这类代码：

// 通用互斥类型工具：让两个对象类型的属性互相排斥
type MutuallyExclusive<T, U> = 
    (T & Record<Exclude<keyof U, keyof T>, never>) | 
    (U & Record<Exclude<keyof T, keyof U>, never>)

// 直接用工具类型定义颜色互斥逻辑
type PossibleColorsTypes = MutuallyExclusive<
    { color?: AllColorsTypes },
    { customColor?: CustomColorTypes }
>

// 组件Props依然用交叉类型组合
type Props = PossibleColorsTypes & {
    size?: 'small' | 'medium' | 'large'
    onClick?: () => void
}

说明 #

• 类型别名（type）支持联合、交叉类型的任意组合，完美适配互斥Props的场景；而接口（interface）受限于继承规则，无法直接实现这种需求。
• 通用工具MutuallyExclusive可以复用在任何需要互斥属性的组件中，只需传入两个包含互斥属性的对象类型即可。

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