type Soccer = { ball: string }
type Basketball = { jump: string }
type Data = Soccer[] | Basketball[]
if ('ball' in data[index]) { // type guard not effective here.
<MyComponent something={data[index]} /> // data: Soccer[] | Basketball[]
}
const resultObj = data[index] // storing indexed element into variable.
if ('ball' in resultObj)
<MyComponent resultObj={resultObj} /> // works with variable
if (data)
<MyComponent resultObj={data[index]} /> // does not work with index.
I am perplexed by how assigning data[index] to a variable resolved the type narrowing issue.
I anticipated that 'ball' in data[index] would function, but it did not..