Extended interfaces with union type is throwing "property does not exist on type" error. How to fix this?

Issue

As shown in below screenshots, I have a base interface and i have extended it to create 2 new interfaces with extra fields.

I have aggregated these together as a union type ChordShapes

When accessing the field variant I get the error as shown in 3rd screenshot.

How to fix this ?

Solution

Looks like TypeScript is preventing me from potentially accessing variant on IChordShape, which wouldn't exist. The following changes by using in solved the issue :

if("variant" in rawShape && rawShape["variant"] === "inversion"){}

This is to make sure that the property variant does exist before accessing it

OR

Amend IChordShape to include variant: string; and keep more specific type for variant in the extending interfaces so that accessing rawShape["variant"] doesn't error out.

Answered By - Prabhu