TypeScript条件类型声明：仅box为true时可传FlexBoxType属性

你之前写的联合类型没有做到分支互斥：

• 基础类型FlexItemType本身自带可选的box?: boolean，和后面要求box: true的分支存在大量重叠
• 宽松的FlexItemType分支会自动兼容传入的任意属性（包括本该被限制的FlexBoxType属性），最终导致“没传box: true也能用FlexBox属性”的校验失效。

要实现严格的条件类型约束，需要把两个场景拆成完全不重叠的联合分支：

type FlexBoxType = {
  inline?: boolean;
  justifyContent?: string;
  alignItems?: string;
}

type FlexItemType = {
  box?: boolean;
  flex?: string | number;
  shrink?: string | number;
}

// 场景1：显式设置box为true，允许同时使用FlexItemType、FlexBoxType的全部合法属性
type EnabledBoxProps = {
  box: true;
} & Omit<FlexItemType, 'box'> & FlexBoxType;

// 场景2：未设置box/显式设置box为false，严格禁止传入所有FlexBoxType内的属性
type DisabledBoxProps = {
  box?: false;
} & Omit<FlexItemType, 'box'> & {
  [prop in keyof FlexBoxType]?: never;
};

// 最终的互斥联合类型
type FlexItemProps = EnabledBoxProps | DisabledBoxProps;

完全匹配你预期的行为：

• 调用flexItemStylesGenerator({ flex: 1 }) 正常通过，命中未开启box的合法分支
• 调用flexItemStylesGenerator({ justifyContent: 'space-between' }) 抛出类型错误：既缺少必填的box: true标记，又违反未开启box时的属性禁用规则
• 调用flexItemStylesGenerator({ flex: 1, justifyContent: 'space-between' }) 抛出类型错误：没有标记box: true时，FlexBoxType的属性会被TS明确拦截
• 函数内部做逻辑判断时，if(args.box)分支会自动收窄为开启box的类型，可正常访问FlexBoxType的所有属性；非box分支会自动过滤掉FlexBoxType的属性提示，不会出现多余的类型干扰。

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