TypeError following Typescript example in docs

[lmac-1]

I'm trying to build a ShoppingCart component which shows information about the cart items in a project built with NextJS and Typescript. I was using the code example in the Getting Started with Typescript section of the documentation and I'm getting a Typescript error using the same code. Here's the code that I'm using:

I built a CartEntry component using the CartEntry function in the code example:

import {
  CartActions,
  CartEntry as ICartEntry,
  formatCurrencyString,
} from "use-shopping-cart/core";

export default function CartEntry({
  entry,
  removeItem,
}: {
  entry: ICartEntry;
  removeItem: CartActions["removeItem"];
}) {
  return (
    // my component
  );
}

And I used this section of code from the Cart function in the doc example in my ShoppingCart component:

  const { removeItem, cartDetails } = useShoppingCart()

const cartEntries = Object.values(cartDetails ?? {}).map((entry) => (
    <CartEntry key={entry.id} entry={entry} removeItem={removeItem} />
  ))

and I'm getting the following type error on removeItem

(property) removeItem: (id: string) => RemoveItemAction
Type '(id: string) => undefined' is not assignable to type '(id: string) => RemoveItemAction'.
  Type 'undefined' is not assignable to type 'RemoveItemAction'.ts(2322)
CartEntry.tsx(12, 3): The expected type comes from property 'removeItem' which is declared here on type 'IntrinsicAttributes & { entry: CartEntry; removeItem: (id: string) => RemoveItemAction; }'

My GitHub repo if you want to take a further look: https://github.com/lmac-1/use-shopping-cart-practice

I'm still kind of new to Typescript too so maybe I'm missing something obvious but I think I've followed everything in the code example provided in the docs.

Raised as an issue as it was a bit long to type out on Discord 😅 hope that it's okay! Thank you.

[lmac-1]

The code mentioned is in the typescript-error branch in this repo https://github.com/lmac-1/use-shopping-cart-practice/tree/typescript-error

[lmac-1]

I fixed the code by changing the type of the removeItem prop in my CartEntry component.

I changed it from removeItem: CartActions["removeItem"]; to removeItem: (id: string) => undefined;

export default function CartEntry({
  entry,
  removeItem,
}: {
  entry: ICartEntry;
  removeItem: (id: string) => undefined;
}) { ... }

So I'm not sure if the docs should be updated, or if the CartActions["removeItem"] type should be updated to avoid TypeScript errors in the future

[dayhaysoos]

Whoa thanks for pointing this out. We do have an example repo:

https://github.com/dayhaysoos/use-shopping-cart/tree/master/examples/typescript-usage

Not sure why that's happening, I know that when you use the serverless utils it's a bit different to import, but I was never aware of an issue with the core functions. Remove item should definitely just work, it's not supposed to be undefined.

Gonna look into this when I get a chance, again, I appreciate you opening the issue!

[lmac-1]

To clarify: the remove item function still works, it's just that using removeItem: CartActions["removeItem"]; caused a TypeError for my application.

[dayhaysoos]

Hey @lmac-1, I'm taking a look at the repo you gave me. Not sure what's going on, still!

[dayhaysoos]

I'm gonna close this because I honestly could not duplicate .-. Lemme know if I really re-open