TypeScript区分联合类型改造后类型报错的解决方法求助

原始类型定义 #

type TFormFieldFileProps = {
    componentProps: TFileUploaderProps;
    select?: never;
    checkbox?: never;
    file: true;
};

type TFormFieldSelectProps = {
    componentProps: TCustomSelectProps;
    select: true;
    checkbox?: never;
    file?: never;
};

type TFormFieldCheckboxProps = {
    componentProps: TCustomCheckboxProps;
    select?: never;
    checkbox: true;
    file?: never;
};

type TFormFieldInputProps = {
    componentProps: TCustomInputProps;
    select?: never;
    checkbox?: never;
    file?: never;
};

export type TFormFieldProps = { boxProps?: BoxProps } & (
    | TFormFieldCheckboxProps
    | TFormFieldInputProps
    | TFormFieldSelectProps
    | TFormFieldFileProps
);

改造后的类型（移除componentProps） #

type TFormFieldFileProps = TFileUploaderProps & {
    select?: never;
    checkbox?: never;
    file: true;
};

type TFormFieldSelectProps = TCustomSelectProps & {
    select: true;
    checkbox?: never;
    file?: never;
};

type TFormFieldCheckboxProps = TCustomCheckboxProps & {
    select?: never;
    checkbox: true;
    file?: never;
};

type TFormFieldInputProps = TCustomInputProps & {
    select?: never;
    checkbox?: never;
    file?: never;
};

export type TFormFieldProps = { boxProps?: BoxProps } & (
    | TFormFieldCheckboxProps
    | TFormFieldInputProps
    | TFormFieldSelectProps
    | TFormFieldFileProps
);

改造后出现的类型错误 #

const FormField = (props: TFormFieldProps) => {
    const { select, checkbox, file, boxProps, ...rest } = props;

    return (
        <Box
            {...boxProps}
            sx={{ '& > *': { width: 1 } }}
        >
            {select ? (
                // 错误：缺少TFormFieldCheckboxProps中的某些属性
                <CustomSelect {...rest} />
            ) : checkbox ? (
                // 错误：缺少TFormFieldInputProps中的某些属性
                <CustomCheckbox {...rest} />
            ) : file ? (
                // 错误：缺少...中的某些属性
                <FileUploader {...rest} />
            ) : (
                // 错误：缺少...中的某些属性
                <CustomInput {...rest} />
            )}
        </Box>
    );
};

问题分析与解决方案 #

报错核心是TypeScript无法通过select/checkbox/file的条件判断，自动将解构后的rest类型缩小到对应组件的props类型——因为解构后rest的类型是所有组件props的交集，而非当前分支的专属类型，导致类型不匹配。以下是几种无需重复编写属性的解决方法：

方案1：使用类型守卫函数 #

定义针对每个分支的类型守卫，保留完整props的类型关联，避免解构丢失类型信息：

function isSelectProps(props: TFormFieldProps): props is TFormFieldSelectProps {
    return props.select === true;
}

function isCheckboxProps(props: TFormFieldProps): props is TFormFieldCheckboxProps {
    return props.checkbox === true;
}

function isFileProps(props: TFormFieldProps): props is TFormFieldFileProps {
    return props.file === true;
}

const FormField = (props: TFormFieldProps) => {
    const { boxProps } = props;

    return (
        <Box
            {...boxProps}
            sx={{ '& > *': { width: 1 } }}
        >
            {isSelectProps(props) ? (
                <CustomSelect {...props} />
            ) : isCheckboxProps(props) ? (
                <CustomCheckbox {...props} />
            ) : isFileProps(props) ? (
                <FileUploader {...props} />
            ) : (
                <CustomInput {...props} />
            )}
        </Box>
    );
};

React会自动忽略组件未使用的select/checkbox/file标识字段，无需额外处理。

方案2：用映射类型简化类型定义（可选优化） #

如果想减少重复的分支类型代码，可以用映射类型统一生成：

type FormFieldType = 'select' | 'checkbox' | 'file' | 'input';

type FormFieldComponentPropsMap = {
    select: TCustomSelectProps;
    checkbox: TCustomCheckboxProps;
    file: TFileUploaderProps;
    input: TCustomInputProps;
};

type TFormFieldProps<T extends FormFieldType = FormFieldType> = { boxProps?: BoxProps } & (
    { [K in T]: true } & FormFieldComponentPropsMap[T] & {
        [P in Exclude<FormFieldType, T>]?: never;
    }
)[T];

// 组件逻辑仍可使用方案1的类型守卫实现

这种方式无需重复编写每个分支的标识字段，同时保持类型严谨性。

方案3：手动类型断言（简单直接但需谨慎） #

如果不想编写类型守卫，可在分支中手动断言rest的类型：

const FormField = (props: TFormFieldProps) => {
    const { select, checkbox, file, boxProps, ...rest } = props;

    return (
        <Box
            {...boxProps}
            sx={{ '& > *': { width: 1 } }}
        >
            {select ? (
                <CustomSelect {...rest as TCustomSelectProps} />
            ) : checkbox ? (
                <CustomCheckbox {...rest as TCustomCheckboxProps} />
            ) : file ? (
                <FileUploader {...rest as TFileUploaderProps} />
            ) : (
                <CustomInput {...rest as TCustomInputProps} />
            )}
        </Box>
    );
};

注意：该方式会跳过TypeScript的类型检查，需确保条件判断的绝对准确性，否则可能引入运行时错误。

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