TypeScript type assertion optimization guide as expected with React functional components
I'm not sure how to approach I've looked through the documentation and I'm still confused about I'm currently working with an scenario with type assertions in my React functional component that's written in TypeScript..... I have a component that receives props that could either be an object or an array, but I'm having trouble correctly narrowing down the type to access the properties without TypeScript throwing errors. Here’s how my component looks: ```tsx import React from 'react'; interface Item { id: number; name: string; } interface Props { data: Item | Item[]; } const MyComponent: React.FC<Props> = ({ data }) => { // Type assertion attempt const items = data as Item[]; return ( <ul> {items.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ); }; ``` When I pass an object instead of an array to the `data` prop, I'm getting this behavior: `TypeError: data.map is not a function`. I thought that by asserting `data` as `Item[]`, TypeScript would allow the mapping operation, but it seems like it’s not doing the check at runtime. I've tried using type guards to check the type of `data`, but it still doesn't work as I expected: ```tsx if (Array.isArray(data)) { const items = data; // This works fine } ``` However, I want to keep the code concise and still access `data` as an array when it's indeed an array. Is there a better way to handle this without running into run-time errors? Am I missing something crucial about type assertions in TypeScript, especially when dealing with props in React? Any help would be appreciated! I'd really appreciate any guidance on this. Is there a better approach? The project is a web app built with Typescript.