TypeScript中能否对联合类型进行条件解构？

你定义了包含互斥属性分支的联合类型 AnimationContainerProps，想要一次性解构所有可能的属性，但TypeScript会因为部分属性并非在所有分支都存在而报错。以下是几种可行的解决方法：

方法一：直接使用类型断言 #

通过断言将 props 转为包含所有可选属性的类型，让TypeScript允许解构所有可能的属性，不存在的属性会自动变为 undefined，和JavaScript的行为一致：

type AnimationContainerProps = { hidingTimeoutMs: number } & (
    | {
        displayingClass: string;
        hidingClass: string;
      }
    | {
        displayingInlineStyle: string;
        hidingInlineStyle: string;
      }
  );

// 解构时添加类型断言
const { hidingTimeoutMs, displayingClass, hidingClass, displayingInlineStyle, hidingInlineStyle } = props as AnimationContainerProps & {
  displayingClass?: string;
  hidingClass?: string;
  displayingInlineStyle?: string;
  hidingInlineStyle?: string;
};

方法二：定义辅助解构类型 #

提前声明一个包含所有可选属性的辅助类型，后续解构时直接使用这个类型断言，代码会更整洁：

// 基础属性类型
type AnimationBaseProps = { hidingTimeoutMs: number };
// 类名分支类型
type AnimationWithClasses = AnimationBaseProps & {
  displayingClass: string;
  hidingClass: string;
};
// 内联样式分支类型
type AnimationWithStyles = AnimationBaseProps & {
  displayingInlineStyle: string;
  hidingInlineStyle: string;
};
// 原始联合类型
type AnimationContainerProps = AnimationWithClasses | AnimationWithStyles;
// 用于解构的辅助类型：所有互斥属性设为可选
type AnimationDestructurableProps = AnimationBaseProps & {
  displayingClass?: string;
  hidingClass?: string;
  displayingInlineStyle?: string;
  hidingInlineStyle?: string;
};

// 使用辅助类型解构
const { hidingTimeoutMs, displayingClass, hidingClass, displayingInlineStyle, hidingInlineStyle } = props as AnimationDestructurableProps;

注意事项 #

• 解构后记得在使用这些属性时做判断（比如 if (displayingClass)），避免因为 undefined 引发的问题。
• 不要使用非空断言（!）强制告诉TypeScript属性存在，这会误导类型检查，实际运行时不存在的属性依然是 undefined，容易引发bug。

内容的提问来源于stack exchange，提问作者César Rodriguez