Typescript如何合并两个带type区分的interface并实现属性互斥校验？

你需要使用 TypeScript 的**可辨识联合（Discriminated Union）**类型实现这个需求，type 字段就是这个联合类型的「可辨识标签」，TypeScript 会根据你传入的 type 值自动推导当前允许使用的属性，同时会禁止出现不符合当前类型的额外属性。

完整实现代码 #

interface LanguageSet {
    type: 'CHANGE_LANGUAGE'
    language: 'ko-KR' | 'en-US'
}

interface TitleSet {
    type: 'CHANGE_TITLE'
    title: string
}

// 合并为联合类型即可满足要求
type UpdateAction = LanguageSet | TitleSet

效果验证 #

直接赋值时 TypeScript 会自动做属性校验：

// 合法：type 匹配对应属性
const action1: UpdateAction = {
    type: 'CHANGE_LANGUAGE',
    language: 'en-US'
}

// 合法：type 匹配对应属性
const action2: UpdateAction = {
    type: 'CHANGE_TITLE',
    title: '首页'
}

// 报错：type 为 CHANGE_LANGUAGE 时不允许出现 title 属性
const action3: UpdateAction = {
    type: 'CHANGE_LANGUAGE',
    language: 'ko-KR',
    title: '测试' // TS 会在此处抛出错误
}

// 报错：type 为 CHANGE_TITLE 时不允许出现 language 属性
const action4: UpdateAction = {
    type: 'CHANGE_TITLE',
    title: '测试',
    language: 'en-US' // TS 会在此处抛出错误
}

在分支逻辑中使用时也可以自动做类型收窄：

function handleAction(action: UpdateAction) {
    switch(action.type) {
        case 'CHANGE_LANGUAGE':
            // 此处可安全访问 action.language，访问 action.title 会直接报错
            console.log(action.language)
            break
        case 'CHANGE_TITLE':
            // 此处可安全访问 action.title，访问 action.language 会直接报错
            console.log(action.title)
            break
    }
}

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