'"Argument of type 'string' is not assignable to parameter of type never" in the parameter of the function call to get a value from an object key
I need to render a list of products from the data stored in an object with a react router v6. I typed the object and created the typed function to get the value of a key following what is taught in this github answer. This eliminated the previous error of Argument of type 'string' is not assignable to parameter of type 'never' ts(2345), but a new error appeared: Argument of type 'string' is not assignable to parameter of type ' never' ts(2345), which is pointed to the slug parameter of the getKeyValue call in the constant in the line const shoe = getKeyValue(slug)(shoes);.
const shoes: { [key: string]: { name: string; img: string } } = {
'air-jordan-3-valor-blue': {
name: 'VALOUR BLUE',
img: 'https://secure-images.nike.com/is/image/DotCom/CT8532_104_A_PREM?$SNKRS_COVER_WD$&align=0,1',
},
'jordan-mars-270-london': {
name: 'JORDAN MARS 270 LONDON',
img: 'https://secure-images.nike.com/is/image/DotCom/CV3042_001_A_PREM?$SNKRS_COVER_WD$&align=0,1',
},
'air-jordan-1-zoom-racer-blue': {
name: 'RACER BLUE',
img: 'https://secure-images.nike.com/is/image/DotCom/CK6637_104_A_PREM?$SNKRS_COVER_WD$&align=0,1',
},
};
const getKeyValue =
<T extends object, U extends keyof T>(key: U) =>
(obj: T): T[U] =>
obj[key];
function LaunchIndex() {
return (
<ul>
{Object.entries(shoes).map(([slug, { name, img }]) => (
<li key={slug}>
<Link to={`/launch/products/${slug}`}>
<h2>{name}</h2>
<img src={img} alt={name} />
</Link>
</li>
))}
</ul>
);
}
function LaunchShoe() {
const { slug } = useParams();
const shoe = getKeyValue(slug)(shoes); // error here
if (!shoe) {
return <h2>Not found!</h2>;
}
const { name, img } = shoe;
return (
<div>
<h2>{name}</h2>
<img src={img} alt={name} />
</div>
);
}
To resolve this error I followed what is in this github answer, I changed the line to const shoe = getKeyValue(slug as never)(shoes);. So it worked, the application worked as expected, but I can't understand what's happening...
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
