TypeScript如何为同一实体正确定义多类型解决属性访问报错

该TS2339报错由类型关联缺失导致收窄失败引发：

• 你当前定义的Section类型中，type字段和full字段的类型声明互相独立，TypeScript 不会因为你判断了section.type === "headerMedia"，就自动将section.full的类型收窄为SectionHeaderMedia，它仍然认为full可能是SectionSingle | SectionTitle | SectionHeaderMedia三者中的任意一种。
• 给full添加?可选标记仅能处理full值为undefined的场景，无法解决「联合类型中部分成员不存在目标属性」的问题，因此报错不会消失。

方案1：重构为可辨识联合类型（推荐，符合TS最佳实践） #

将Section定义为不同业务场景子类型的联合，让type字段作为类型辨识的标记，TS可以根据该字段自动收窄对应属性的类型，从根源避免类型不匹配问题：

// 定义不同type对应的完整子类型结构
type SectionSingle = {
    type: "single";
    full?: {
        type: "text" | "media";
        content: any;
    }
}

type SectionDouble = {
    type: "double";
    // 可根据实际业务补充double场景下的属性定义
}

type SectionTitle = {
    type: "title";
    full?: {
        title: string;
    }
}

type SectionHeaderMedia = {
    type: "headerMedia";
    full?: {
        link: string;
        alt: string;
    }
}

// Section为所有子类型的联合
export type Section = SectionSingle | SectionDouble | SectionTitle | SectionHeaderMedia;

var section: Section = {
    type: "headerMedia",
    full: {
        link: "/somelink",
        alt: "some alt text"
    }
}

// 此时TS可自动识别type为headerMedia时full的结构，仅需要给可选的full加可选链即可
const cond = section.type === "headerMedia" ? `${section.full?.link}` : null

console.log(cond)

方案2：手动类型断言（快速修复，适合临时场景） #

如果暂时不想调整原有类型定义，可以在访问属性时手动指定full的类型，跳过TS的校验：

const cond = section.type === "headerMedia" ? `${(section.full as SectionHeaderMedia).link}` : null

注意：该方案需要你自行保证逻辑正确性，即section.type === "headerMedia"时full一定符合SectionHeaderMedia结构，否则可能引发运行时错误。

方案3：属性存在性校验（无侵入兼容） #

不需要修改原有类型定义，在判断外层type的基础上增加full的属性存在校验，触发TS的自动类型收窄，同时兼容运行时异常场景：

const cond = section.type === "headerMedia" && section.full && 'link' in section.full ? `${section.full.link}` : null

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