Using type annotations of a store Atom in Vue

[gkatsanos]

// using nanostores, create a store for the shortlist
import { logger } from "@nanostores/logger"
import { atom, action } from "nanostores"

interface ShortlistItem {
  productId: string
  productName: string
  productImage?: string
  productPrice?: string
  productUrl?: string
}

export const $shortlist = atom<ShortlistItem[]>([])

Trying to use ShortlistItem in my Vue component throws a type error:

<script setup lang="ts">
import type { ShortlistItem } from "@store/shortlist.ts"
import { useStore } from "@nanostores/vue"
import {
  $shortlist,
  loadItemsFromLocalStorage,
  removeItem,
} from "@store/shortlist.ts"

const data: ShortlistItem[] = useStore($shortlist)

Type 'Readonly<Ref<readonly { readonly productId: string; readonly productName: string; readonly productImage?: string; readonly productPrice?: string; readonly productUrl?: string; }[]>>' is missing the following properties from type 'ShortlistItem[]': length, pop, push, concat, and 35 more.

My guess is I need to build an interface e.g. ShortListItems that shows the only property of it is ShortlistItem ?

an example in the docs about how to consume types defined in nanostores would be great! <3

[euaaaio]

You don't need to explicitly declare types inside the component. They should come from useStore(…) automatically.

[gkatsanos]

When I remove the type annotation, I get property doesn't exist on type errors:

<div class="item-info text-base text-blue-100">
            {{
              item.productName
                ? item.companyName
                : "Address here"
            }}
          </div>

Property 'companyName' does not exist on type '{ readonly productId: string; readonly productName: string; readonly productImage?: string; readonly productPrice?: string; readonly productUrl?: string; }'.

[gkatsanos]

which is because my actual property was missing 🤦
<3 thank you !

[euaaaio]

which is because my actual property was missing 🤦
<3 thank you !

Yeah, that's exactly what I was gonna say.
Anyway, I'm glad I was helpful. Feel free to write us if you have any other problems.

[gkatsanos]

not sure if its related, but I cant get to make a precommit CLI hook to TypeCheck the vue files in this .astro project. I'm not sure what to try. https://www.npmjs.com/package/tsc-files didnt error