'"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