👀 Views: 22 💬 Answers: 1 📅 Created: 2025-06-16

typescript react generics

This might be a silly question, but I'm relatively new to this, so bear with me. I've been banging my head against this for hours. I'm working with a frustrating scenario with TypeScript's generic type constraints in a React functional component. I have a component that accepts a generic type, but TypeScript seems to be struggling with inferring the correct type when I'm trying to spread props into a child component. Here's a simplified version of my code: ```typescript import React from 'react'; type MyComponentProps<T> = { data: T; onClick: (item: T) => void; }; const MyComponent = <T extends unknown>({ data, onClick }: MyComponentProps<T>): JSX.Element => { const handleClick = () => { onClick(data); }; return <button onClick={handleClick}>Click me</button>; }; type ChildProps = { id: number; name: string; }; const Child = (props: ChildProps) => <div>{props.name}</div>; const Parent = () => { const item = { id: 1, name: 'Test' }; return <MyComponent data={item} onClick={(item) => console.log(item.id)} />; }; ``` In the `Parent` component, I'm passing an object with `id` and `name` properties to `MyComponent`. However, when I try to use that data in my `Child` component, TypeScript produces an behavior saying `Property 'id' is missing in type 'T' but required in type 'ChildProps'.` My goal is to make sure that the `data` prop passed to `MyComponent` can also be used in the `Child` component without losing type safety. I've tried adjusting the generic constraints, like changing `<T extends ChildProps>` in the `MyComponent` definition, but that leads to a type behavior in the `Parent` component when I try to pass an object that doesn't match `ChildProps` exactly. I also played around with using `React.FC` and `React.PropsWithChildren`, but that didn't resolve the scenario either. How can I maintain type safety while allowing `MyComponent` to accept various shapes of data, while still ensuring that I can pass that data down to child components without errors? Any insights on how to structure this properly would be greatly appreciated! I'm working on a application that needs to handle this. What am I doing wrong? My development environment is Linux. I'm using Typescript LTS in this project. Any ideas how to fix this?