export type CatInfo = { type: 'Cat'; subType: string; };
export type DogInfo = { type: 'Dog'; };
export type AnimalInfo = CatInfo | DogInfo;

function AnimalComponent(info: AnimalInfo):React.ReactElement<AnimalInfo> {
    return ...;
}

function getProps(): AnimalInfo {
    // this may be from server or whatever ...
    return { type: 'Cat', subType: 'Large' };
}

var props:AnimalInfo = getProps();
var component = <AnimalComponent {...props} />
//                               ^^^^^^^^^^
// 'Type '{ type: "Cat" | "Dog"; }' is not assignable to type '(IntrinsicAttributes & CatInfo) | (IntrinsicAttributes & DogInfo)'.
//   Type '{ type: "Cat" | "Dog"; }' is not assignable to type 'IntrinsicAttributes & DogInfo'.
//     Type '{ type: "Cat" | "Dog"; }' is not assignable to type 'DogInfo'.
//       Types of property 'type' are incompatible.
//         Type '"Cat" | "Dog"' is not assignable to type '"Dog"'.
//           Type '"Cat"' is not assignable to type '"Dog"'.'

var props2:AnimalInfo = { type: 'Cat', subType: 'Large' };
var component2 = <AnimalComponent {...props2} />
//                                ^^^^^^^^^^^
//                                No error here ...