How to make TS make an inference on interface types

I have this object that I created into my React application.

type Props = {
message: MessageTypes | MessageImgTypes;
showTimeStamp: boolean;
}

Assuming that MessageTypes is the following :

interface MessageTypes {
text: string;
};

and that MessageImgTypes is the following :

interface MessageImgTypes {
text?: string;
textImg : string;
};

When I try to access textImg property of MessageImgTypes, I get an error telling me that :
Property 'textImg' does not exist on type 'MessageTypes | MessageImgTypes'
Though this is a union, so it should exist on the MessageImgType since I've declared it in there.
I thought about doing Narrowing to make 2 branches but typeof and instanceof do not apply on these interfaces.

The union means that message will be either MessageTypes or MessageImgTypes and since there is no 'textImg' in the MessageTypes, and thus you get the error.

There are several approaches that we can take.

1. Use the in operator:
   With the in operator we can check whether there is a key inside of the object, which will help the compiler to narrow the type:

if('textImg' in message) {
   message.textImg // no error
}

2. Discriminated unions
   The discriminated union is a union where each member has one common property with a unique value. Checking the value of that field will also narrow the type, but will require changes in the shape of the interfaces:

interface MessageTypes { text: string; type: 'one' };

interface MessageImgTypes { text?: string; textImg : string; type: 'two' };

if(message.type === 'two') {
   message.textImg // no error
}

3. Use a custom type guard:

const isMessageImgTypes = (arg: MessageTypes | MessageImgTypes): arg is MessageImgTypes => {
   return 'textImg' in arg;
}