Recently, I encountered a peculiar situation that left me puzzled as I scoured the internet and documentation for answers but found none.
Let's delve into the following scenario:
interface A {
foo: string;
bar: string;
}
interface B extends A {
baz: string;
}
export type C = B | A;
In my environment, utilizing type C mentioned above seems to default to type A, even when it is explicitly specified elsewhere. This has led me to question whether this behavior stems from the TypeScript compiler or the IDE favoring the base interface (A in this instance).
Consider the following code snippet as an example:
const fooBar = (props: C) => {
const {
foo, // valid
bar, // valid
baz // IDE displays an error as 'baz' is not recognized in 'A'
} = props // requires casting with "as B"
return(
{baz ? baz : ""} // display 'baz' if it exists
);
}