根据 props 显示不同的组件：TypeError

Question

I am currently trying to create a type safe implementation of an component that takes its props and displays different components depending on its props.

I have tried a number of different approaches but no matter what, I get TypeErrors.

My current approach is this:

import React from 'react';

interface Props<brand, type> {
    identification: {
        brand: brand,
        type: type
    };
    id: number;
}

type Comp1Props = Props<'one', 'a'>;

const Comp1:React.FC<Comp1Props> = props => <div>{JSON.stringify(props)}</div>;

type Comp2Props = Props<'one', 'b'>;

const Comp2:React.FC<Comp2Props> = props => <div>{JSON.stringify(props)}</div>;

type Comp3Props = Props<'two', 'b'>;

const Comp3:React.FC<Comp3Props> = props => <div>{JSON.stringify(props)}</div>;

type AllComps = Comp1Props | Comp2Props | Comp3Props;

const Panel:React.FC<AllComps> = (props) => {
    const { brand, type } = props.identification;
    if( brand === 'one' ){
        if (type === 'a') {
            return <Comp1 {...props} />; // TypeError
        }
        if (type === 'b') {
            return <Comp2 {...props} />; // TypeError
        }
    }
    if( brand === 'two' ){
        if (type === 'b') {
            return <Comp3 {...props} />; // TypeError
        }
    }
    return <div />;
};

const Display: React.FC<AllComps> = (props) => (
    <Panel {...props} />
)

export default Display;

I get following Error Message:

Type '{ identification: { brand: "one"; type: "a"; }; id: number; } | { identification: { brand: "one"; type: "b"; }; id: number; } | { identification: { brand: "two"; type: "b"; }; id: number; }' is not assignable to type 'IntrinsicAttributes & Comp1Props'.
  Type '{ identification: { brand: "one"; type: "b"; }; id: number; }' is not assignable to type 'Comp1Props'.
    The types of 'identification.type' are incompatible between these types.
      Type '"b"' is not assignable to type '"a"'.ts(2322)

I am bumping my heads against a wall for hours now, not finding a sufficient solution to make a concept like this possible and type safe, I guess I am having some fundamental misunderstanding here.

I would really appreciate all information that possibly leads me to a solution for this kind of Problem. I can't imagine I am the first one who tries to create a 'switch-component' with more than one switch-prop.

Thanks a lot!

Answer 1

Destructuring messes up with typescript

Try:

const Panel:React.FC<AllComps> = (props) => {
    if( props.identification.brand === 'one' ){
        if (props.identificationtype === 'a') {
            return <Comp1 {...props} />;
        }
        if (props.identification.type === 'b') {
            return <Comp2 {...props} />;
        }
    }
    if( props.identification.brand === 'two' ){
        if (props.identification.type === 'b') {
            return <Comp3 {...props} />;
        }
    }
    return <div />;
};