Extending CartItems Type

[monarcode]

Bug Report Checklist

• I have tried restarting my IDE and the issue persists.
• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Expected

Getting wrong type / autocomplete suggestions for CartItems

// my type def
interface ViewListing { id: string; user_id: number; listing_category_id: string; listing_sub_category_id?: any; service_offering: string; description: string; listing_images: string[]; minimum_offer: string; slug: string; status: string; size: string; vehicle_id: number; country_id: string; listing_type: string; created_at: string; updated_at: string; }

Actual

// default type def
interface CartItems {
cartQuantity?: number;
imagesrc?: string;
inStock?: boolean;
name: string;
price?: number;
productId: number | string | undefined;
quantity: number;
}

Additional Info

Running on:

Nextjs app router
Cart v1.1.1

How can i overwrite or extend the default types for CartItems? the default defaults do not match the items i am saving to cart

[mcnaveen]

Hi @monarcode Can you try this?

You can extend the CartItems interface.

interface CustomCartItems extends CartItems {
  id: string;
  user_id: number;
  listing_category_id: string;
  listing_sub_category_id?: any;
  service_offering: string;
  description: string;
  listing_images: string[];
  minimum_offer: string;
  slug: string;
  status: string;
  size: string;
  vehicle_id: number;
  country_id: string;
  listing_type: string;
  created_at: string;
  updated_at: string;
}

Then just use CustomCartItems as your Type.

Please let me know how it goes. Happy to help.

[monarcode]

Hi @monarcode Can you try this?

You can extend the CartItems interface.

interface CustomCartItems extends CartItems {
  id: string;
  user_id: number;
  listing_category_id: string;
  listing_sub_category_id?: any;
  service_offering: string;
  description: string;
  listing_images: string[];
  minimum_offer: string;
  slug: string;
  status: string;
  size: string;
  vehicle_id: number;
  country_id: string;
  listing_type: string;
  created_at: string;
  updated_at: string;
}

Then just use CustomCartItems as your Type.

Please let me know how it goes. Happy to help.

Thank you for your response, i was able to get proper type hints by doing something similar

interface Custom extends CartItems {
  ...
}

const cart = withSSR(useCart, (state) => state);
const Items = cart?.cartItems as Custom[];

but i'm not sure if this is the best approach, i was thinking of extending the type of CartItems via a d.ts file, but not sure how i can achieve that..any recommendations?

[mcnaveen]

Ah. You can do that.

// custom.d.ts

interface CustomCartItems extends CartItems {
  id: string;
  user_id: number;
  listing_category_id: string;
  listing_sub_category_id?: any;
  service_offering: string;
  description: string;
  listing_images: string[];
  minimum_offer: string;
  slug: string;
  status: string;
  size: string;
  vehicle_id: number;
  country_id: string;
  listing_type: string;
  created_at: string;
  updated_at: string;
}

Then in the main file.

import { useCart, withSSR } from "cart";
import { CustomCartItems } from './custom';

const cart = withSSR(useCart, (state) => state);
const items = cart?.cartItems as CustomCartItems[];

[mcnaveen]

Hi, @monarcode Since this is not an issue, I'll be moving this to Discussion. Feel free to follow up if needed.

Thanks for understanding 😄