TypeScript SO question 41705559

41705559.ts

type Opt = { id: string, name: string }

interface MultiProps {
    isMultiple: true;
    options: Opt[];
    id: string[];
    onChange: (id: string[]) => void;
}

interface SingleProps {
    isMultiple: false;
    options: Opt[];
    id: string;
    onChange: (id: string) => void;
}

type SelectProps = MultiProps | SingleProps;

function Select(props: SelectProps) {
    if (props.isMultiple) {
        // works
        const { id, onChange } = props;
        onChange(id);
    } else {
        // fail
        const { id, onChange } = props;
        onChange(id); // error here
    }
}

let m: MultiProps = {
    isMultiple: true,
    options: [{ id: 'a', name: 'A' }],
    id: ['a'],
    onChange: null
};

let s: SingleProps = {
    isMultiple: false,
    options: [{ id: 'a', name: 'A' }],
    id: 'a',
    onChange: null
};

Select(m);
Select(s);

Click to run the code above.

That is because isMultiple can be undefined or null. In those cases it is no possible to infer the specific type of SelectProps.

Use this:

function Select(props: SelectProps) {
    if (props.isMultiple) {
        const { id, onChange } = props;
        onChange(id);
    } else if (props.isMultiple === false) {
        const { id, onChange } = props;
        onChange(id);
    }
}

Thanks! 🎉