从联合类型提取boolean时为何提示无法赋值给true？

问题场景 #

这是一个源自Material-UI的通用TypeScript类型问题，代码示例如下：

import * as React from "react";
import InputUnstyled, { InputUnstyledProps } from "@mui/base/InputUnstyled";

const CustomInput = ({
  multiline,
  ...props
}: InputUnstyledProps): JSX.Element => {
  // 报错：Types of property 'multiline' are incompatible. Type 'boolean' is not assignable to type 'true'
  return <InputUnstyled multiline={multiline} {...props} />;
};

export default function UnstyledInputBasic() {
  return <CustomInput multiline={false} />;
}

核心类型逻辑 #

InputUnstyledProps是联合类型，结构大致为：

(SingleLineInputUnstyledProps | MultiLineInputUnstyledProps) & UseInputParameters & { /* 其他输入框属性 */ }

其中两个子类型互斥：

• SingleLineInputUnstyledProps 将multiline固定为字面量类型false
• MultiLineInputUnstyledProps 将multiline固定为字面量类型true

这种设计符合HTML逻辑（单行/多行输入框的属性互斥），但也带来了联合类型的类型推断限制。

你的理解误区 #

你错误地将InputUnstyledProps当成了包含multiline: boolean的单一对象类型，但实际上它是两个属性强关联的子类型的联合。当你解构multiline并单独传递时，破坏了TypeScript对联合类型的类型窄化能力——原本multiline和其他属性（比如rows/maxRows）的关联关系被打散，TypeScript无法确定当前传递的multiline和剩余props是否属于同一个子类型，因此抛出类型不兼容错误。

解决方案 #

要解决这个问题，核心是保留联合类型的属性关联性，以下是两种可行方案：

方案1：泛型传递完整props #

直接通过泛型约束保留props的原始联合类型，让TypeScript自行推断关联性：

import * as React from "react";
import InputUnstyled, { InputUnstyledProps } from "@mui/base/InputUnstyled";

const CustomInput = <T extends InputUnstyledProps>(props: T): JSX.Element => {
  return <InputUnstyled {...props} />;
};

export default function UnstyledInputBasic() {
  return <CustomInput multiline={false} />;
}

方案2：类型守卫分支处理 #

如果需要自定义逻辑，用类型守卫明确区分两个子类型，在分支内安全解构和处理：

import * as React from "react";
import InputUnstyled, { InputUnstyledProps } from "@mui/base/InputUnstyled";

const CustomInput = (props: InputUnstyledProps): JSX.Element => {
  if (props.multiline) {
    // 此处TypeScript确认当前是MultiLine类型，可安全处理多行属性
    const { multiline, ...rest } = props;
    return <InputUnstyled multiline={multiline} maxRows={12} {...rest} />;
  } else {
    // 此处TypeScript确认当前是SingleLine类型
    const { multiline, ...rest } = props;
    return <InputUnstyled multiline={multiline} type="text" {...rest} />;
  }
};

export default function UnstyledInputBasic() {
  return <CustomInput multiline={false} />;
}

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