TypeScript中React组件可选属性关联类型推断问题

问题背景 #

我有一个React组件：

const Faq = ({ shortVersion, data }: FaqProps) => { }

其类型定义如下：

type FaqProps =
  | {
      shortVersion: true;
      data: ShortFaqData[];
    }
  | {
      shortVersion: false;
      data: ExtendedFaqData[];
    };

当前该定义可正常工作，例如：

const testDataShort: ShortFaqData[]
const testDataExtended: ExtendedFaqData[]
<Faq shortVersion={false} data={testDataExtended} />
<Faq shortVersion data={testDataShort} />

但我希望shortVersion无需传入false，即该属性为可选属性。尝试了两种定义方式，传入shortVersion时正常，但不传入时IDE无法正确提示data的类型：

第一种尝试：

type FaqProps =
  | {
      shortVersion: true;
      data: ShortFaqData[];
    }
  | {
      shortVersion?: false;
      data: ExtendedFaqData[];
    };

第二种尝试：

type FaqProps =
  | {
      shortVersion: true;
      data: ShortFaqData[];
    }
  | {
      shortVersion: false | undefined;
      data: ExtendedFaqData[];
    };

解决方案 #

可以通过在默认分支中完全省略shortVersion字段的方式，让TypeScript明确识别“未传入shortVersion”对应的类型分支，从而实现IDE的准确提示：

写法一：明确标记字段不存在 #

type FaqProps =
  | {
      shortVersion: true;
      data: ShortFaqData[];
    }
  | {
      shortVersion?: never; // 标记该分支下shortVersion不存在或为never类型
      data: ExtendedFaqData[];
    };

写法二：直接省略字段（更简洁） #

type FaqProps =
  | {
      shortVersion: true;
      data: ShortFaqData[];
    }
  | {
      data: ExtendedFaqData[];
    };

组件内部默认值补充 #

为了保证组件逻辑的一致性，可以给shortVersion设置默认值：

const Faq = ({ shortVersion = false, data }: FaqProps) => {
  // 组件业务逻辑
};

这样实现后：

• 不传入shortVersion时，IDE会自动匹配到第二个分支，提示data应为ExtendedFaqData[]
• 传入shortVersion={true}时，匹配第一个分支，提示data应为ShortFaqData[]
• 无需手动传入shortVersion={false}，完全满足需求

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