React Native中带冲突属性的TypeScript联合类型无法正常收窄类型怎么解决？

问题根因 #

你遇到的类型报错本质是TypeScript控制流分析的限制：当你把联合类型的inputType和剩余属性props解构为两个独立变量后，TS无法建立两者的类型关联——也就是你判断inputType === 'input'时，不会自动联动把props窄化为对应接口的属性类型，因此会触发属性不兼容的报错。

方案1：直接基于完整props对象做条件判断（推荐） #

这种方式不用加任何额外的类型代码，完全依赖TS原生的控制流分析就能正确窄化类型，是维护成本最低的实现：

const Input: React.FC<IInputProps | IMaskedInputProps | ICurrencyInputProps> = (props) => {
    // 公共组件逻辑
    return (
        <>
        {/* 公共外层UI */}
        {
            props.inputType === 'input' 
                ? <TextInput {...props}/> 
                : props.inputType === 'masked' 
                ? <MaskedTextInput {...props}/>
                : <CurrencyInput {...props}/>
        }
        {/* 公共外层UI */}
        </>
    )
};

如果后续要新增更多输入类型，用switch写法可读性更好：

const Input: React.FC<IInputProps | IMaskedInputProps | ICurrencyInputProps> = (props) => {
  // 公共组件逻辑
  const renderInput = () => {
    switch(props.inputType) {
      case 'input': return <TextInput {...props} />
      case 'masked': return <MaskedTextInput {...props} />
      case 'currency': return <CurrencyInput {...props} />
    }
  }

  return (
    <>
      {/* 公共外层UI */}
      {renderInput()}
      {/* 公共外层UI */}
    </>
  )
}

方案2：自定义类型守卫保留解构写法 #

如果你的业务逻辑需要提前把inputType解构出来单独处理，可以写一个通用类型守卫来建立inputType和props的类型关联，类型守卫只需要定义一次，后续新增输入类型维护成本很低：

type AllInputProps = IInputProps | IMaskedInputProps | ICurrencyInputProps

function isInputType<T extends AllInputProps['inputType']>(
  inputType: string,
  expectedType: T
): inputType is T {
  return inputType === expectedType
}

// 组件内使用
const Input: React.FC<AllInputProps> = ({
    inputType,
    ...props
}) => {
    // 公共组件逻辑
    return (
        <>
        {/* 公共外层UI */}
        { isInputType(inputType, 'input') && <TextInput {...(props as Extract<AllInputProps, { inputType: 'input' }>)} /> }
        { isInputType(inputType, 'masked') && <MaskedTextInput {...(props as Extract<AllInputProps, { inputType: 'masked' }>)} /> }
        { isInputType(inputType, 'currency') && <CurrencyInput {...(props as Extract<AllInputProps, { inputType: 'currency' }>)} /> }
        {/* 公共外层UI */}
        </>
    )
};

以上两种方案都不需要使用any类型，也不需要在UI层添加额外的属性校验逻辑，完全保留了TS的类型检查能力。

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