Declare the type of variable associated with the store configuration

After setting up a pinia store using the setup store syntax as described in the documentation at , I encountered an issue while working with typescript and setup stores instead of option stores for my project.

The problem arises with type annotations for state variables:

export const useComponentsStore = defineStore('components', () => {
  ..
  const selectedComponents: ServerConfigComponent[] = ref([]);
  ..

This results in the following error message:

Type 'Ref<never[]>' is missing the following properties from type 'ServerConfigComponent[]': length, pop, push, concat, and 35 more.ts(2740)

Interestingly, this issue does not occur with computed (getters) variables.

typescriptvue.jspinia

Answer №1

Generic parameters are used to define the type of refs:

const components = ref<CustomComponent[]>([]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The module "react-leaflet" is showing a type error because it does not have a exported member named "useEventHandlers"

My Next.js application is built with TypeScript and React-Leaflet. Everything runs smoothly when I start my development server using npm run dev, no errors whatsoever. However, the problem arises when I attempt to build the project using npm run build. An ...

reactjstypescriptnext.jsreact-leaflet

Vue.js - display additional items in an array with matching titles

I am working with an array of objects, examples include: [{ title: 'foo' id: 1, name: 'anne' }, { title: 'example', id: 2, name: 'anne' }, { title: 'ex', id: 3, name: &a ...

arraysvue.js

Tips for achieving a slow scrolling effect similar to the one displayed on these websites

I've noticed smooth slow scrolling on various websites and have been searching for React or Vue plugins to achieve this effect. However, I am interested in learning how to implement it using vanilla JavaScript. Feel free to suggest plugins, libraries, ...

javascriptreactjsvue.jsscroll

Set up Laravel Mix to compile a specific Vue application whenever there are changes made to its component files

In my Laravel project, I have multiple Vue.js applications set up with the following directory structure: ├── public │ ├── js │ │ ├── app_the_first.js │ │ ├── app_the_second.js ├── resources │ ├── ...

laravelvue.jswebpacklaravel-mix

What could be causing the issue with the variable appearing as undefined in

My class has a property: public requestLoadPersonal: Personal[] = []; As well as a method: private filterByGender(selectedValue: any): void { console.log(this.requestLoadPersonal); this.requestLoadPersonal = this.requestLoadPersonal.filter( ...

javascripttypescript

Create a fake version of ElementRef and simulate the getBoundingClientRect() function

Looking to simulate ElementRef and access getBoundingClientRect() I experimented with the code below, but it didn't yield the expected results. const mockHostRef = { nativeElement: { getBoundingClientRect: {top: 10, left: 10} } } {pr ...

typescriptjestjs

The Angular Service code cannot be accessed

Currently, I am utilizing Local Storage in an Angular 5 Service by referencing https://github.com/cyrilletuzi/angular-async-local-storage. My goal is to retrieve data from storage initially. In case the value is not present, I intend to fetch data from fir ...

angulartypescriptfirebase-realtime-databaseionic3local-storage

Angular: ChangeDetection not being triggered for asynchronous processes specifically in versions greater than or equal to Chrome 64

Currently, I'm utilizing the ResizeObserver in Angular to monitor the size of an element. observer = new window.ResizeObserver(entries => { ... someComponent.width = width; }); observer.observe(target); Check out this working example ...

angulartypescriptangular2-changedetectionzonejs

React input delay handling during onChange event

Upon closer inspection, I've come across an issue that I had not previously noticed. I am unsure if there is a bug within my code or if the onChange function always behaves in this manner, but I am experiencing input delay and am uncertain on how to r ...

typescriptinputevent-handlingonchangeuse-state

Rotating display for showcasing various portfolios

I'm facing an issue with my portfolio images carousel using a map in Bootstrap. When I navigate from one portfolio (e.g. image 4) to another (which has only one image), the carousel shows up blank because the active carousel-item is at index 3 (image ...

javascriptreactjstypescriptbootstrap-5

Call a function within a stateless component in a React application

I have a question regarding my React component. I am attempting to call the function ButtonAppBar within my stateless component, but the TypeScript compiler is throwing an error stating '{' expected. I'm unsure whether I need to pass it to m ...

reactjstypescriptmaterial-ui

What is it about Typescript's "typeof function" that meets the Generic Condition of "extends (...args: any[]) => any"?

Consider the code snippet below: type Params<F extends (...args: any[]) => any> = F extends ((...args: infer A) => any) ? A : never; const fn00 = (name: string, age: number, single: boolean) => true type test07 = Params<typ ...

typescript

Is there a way to determine if a component has a binding on a directive?

I am in need of assistance regarding a directive named my-custom-directive. Here is how I am currently implementing it: <my-component v-model="things.value" v-bind:error="things.error" v-my-custom-directive> </my-component> Within ...

javascriptvue.jsvuejs2vue-component

Building SVG components in React with TypeScript and styling them using SCSS

I've been experimenting with using Webpack to import SVG files as components in React Typescript. However, I'm running into trouble when it comes to styling the SVGs with SCSS. I've tried targeting a custom attribute in my CSS selector, but ...

reactjstypescriptsvgwebpacksass

The downloaded zip file appears to be corrupt and cannot be opened

As a newcomer to TypeScript, I embarked on creating a simple function to download a zip file. This is the code I've managed to put together: import fs from 'fs'; import https from 'https'; export function handler(): void { https ...

node.jstypescriptzip

execute a rigorous compilation during the ng build angular process

I am currently working on a project using angular-cli and I have configured my package.json with the following scripts: "scripts": { "ng": "ng", "build": "ng build --base-href /test/", "prod": "ng build --prod --base-href /test/" } According to the ...

javascriptangulartypescriptnpmangular-cli

Double-executing methods in a component

I have encountered an issue while trying to filter existing Worklog objects and summarize the time spent on each one in my PeriodViewTable component. The problem I am facing involves duplicate method calls. To address this, I attempted to reset the value ...

htmlangulartypescript

How can I resolve the issue of using string values for items inside v-autocomplete, but needing them to be numbers in v-model?

I am working with a v-autocomplete component <v-autocomplete v-model="addressRegion" :items="selectLists.regions" item-value="key" item-text="value" ></v-autocomplete> The AddressRegion is curren ...

javascriptvue.jsvuetify.js

Prevent Vue.js from displaying 401 errors in the console when using axios

When encountering a 401 response status, I manage it using axios interceptors. In this case, I refresh the jwt token and resend the request. However, Axios or Vue.js still print the 401 response to the console. This is unexpected as I do not have any code ...

vue.jsvuejs2axios

Ways to automatically display the Save Changes prompt upon closing an Electron application

Currently, I am developing an Electron application. The user's progress is saved in a file within the app. I aim to implement the typical 'Save changes before closing' prompt when the user attempts to close the application without saving. A ...

macosvue.jselectronfile-managementelectron-vue