Using Typescript with Vue.js: Defining string array type for @Prop

How can I properly set the type attribute of the @Prop decorator to be Array<string>? Is it feasible?

I can only seem to set it as Array without including string as shown below:

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  @Prop({ type: Array, default: [] }) private readonly myProperty!: string[];
}
</script>

Every attempt to change it to Array<string> or even string[] results in the following error message:

Argument of type '{ type: boolean; default: never[]; }' is not assignable 
to parameter of type 'PropOptions<any> | Constructor | Constructor[] | undefined'.

Types of property 'type' are incompatible. Type 'boolean' is not assignable to type 
'(new (...args: string[]) => Function) | (() => any) | (new (...args: never[]) => any) | Prop<any>[] | undefined'.

This error message adds further confusion: why is the type suddenly being recognized as boolean?

Answer №1

By including the type assertion as PropType<string[]>, you can address this issue effectively:

<script lang="ts">
import { PropType } from "vue"
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  @Prop({
    type: Array as PropType<string[]>, // utilizing PropType
    default: () => [] // using a factory function
  }) private readonly myProperty!: string[];
}
</script>

Refer to documentation for more information on the @Prop annotation.

It's worth noting that default Arrays and Objects should be returned from factory functions always (source). This practice helps prevent instances from sharing properties inadvertently across multiple components.

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

What's the best way to replicate a specific effect across multiple fields using just a single eye button?

Hey everyone, I've been experimenting with creating an eye button effect. I was able to implement one with the following code: const [password, setPassword] = useState('') const [show, setShow] = useState(false) <RecoveryGroup> ...

Typescript: The type 'Observable<{}>' cannot be assigned to the type 'Observable'

I'm encountering an issue with the Observable type, any thoughts on how to resolve it? import { PostModel } from '../model/postModel'; import { Subject } from 'rxjs/Subject'; import { Observable } from 'rxjs/Observable&ap ...

Testing Vue with Jest - Unable to test the window.scrollTo function

Is there a way to improve test coverage for a simple scroll to element function using getBoundingClientRect and window.scrollTo? Currently, the Jest tests only provide 100% branch coverage, with all other areas at 0. Function that needs testing: export de ...

How can I retrieve a Vuex data property from another Vuex data property?

In order to make color variables easily accessible throughout my Vue app, I have stored them in an array named "colors[]" within the Vuex store. This method works well when accessing the colors within component methods or inline styles. Now, I am storing ...

Exploring how to traverse a <router-outlet> within its container

I am attempting to switch the active component within a from its parent. After observing how Ionic achieves this, I believe it should resemble the following (simplified): @Component({ template: '<router-outlet></router-outlet>' } ...

Bring in dynamic Pinia store and Vue component that rely on a particular reference

Currently, I am in the process of developing an application using Quasa V2 framework, vue, vite, pinia, and format. One of the components in my app is basicList.vue, which retrieves its control attributes and properties from a pinia store named oTable. By ...

Craft a unique typings file tailored to your needs

After recently creating my first published npm package named "Foo", I encountered some difficulties while trying to consume it in a TypeScript project. The tutorials on how to declare modules with custom typings were not clear enough for me. Here are the k ...

Is there a way to use HTML and CSS to switch the style of a dynamic decimal number to either Roman numerals or Katakana characters within a specified HTML element, such as a tag, div

I've searched everywhere but only found guides on list styling and counter styling in CSS that didn't work out. So, for example, I have a number inside an HTML tag that is changed dynamically using Vue Watch. I want to display the number in upper ...

Can you embed a VueJs Component using jquery?

I have a complex application where I previously utilized jQuery to dynamically change views: $(function(){ $(".changeview").bind("click",function(){ $.post(linkAction,phpData,function(data){ $('#loa ...

Eliminate the "Potential 'undefined' Object" error without resorting to non-null assertion or optional chaining

Below is the code snippet I am working with: export type ConditionalItemType = [ { condition: string }, { [key: string]: FormItemDataType } ]; export type ConditionalItemDataType = ConditionalItemType[]; export type FormItemDataType = { required: bo ...

extract objects from an array of objects based on a specified array

Within my JSON array, I have data structured like this: const data = [ { "uniqueId": 1233, "serviceTags": [ { "Id": 11602, "tagId": "FRRRR", "missingRequired&quo ...

"Embracing Micro-frontends: Building dynamic web applications using a variety of frontend

I am currently facing a software architecture dilemma. My extensive monolithic web application is built using PHP and backbone js, but I am eager to integrate a new front-end framework like react/vue. The question arises about the best approach to tackle t ...

Encountering an error while setting up a Vue app in WebStorm on a Mac. npm is throwing

I'm currently in the process of setting up a Vue App using WebStorm on my Mac. However, when I try to run the npm run dev command, I encounter the following error: npm ERR! missing script: dev Below is a snippet from my package.json file: "versio ...

Having difficulty storing duplicate requests that are crucial for various services/components

Currently, I am tackling a project that involves displaying multiple sets of data to the user. Each set requires several requests to be made to the backend. Specifically, for the UserDetails dataset, I must query the getUser and getSigns endpoints. However ...

Ways to specify the type signature for objects that incorporate a fresh method

My understanding is that in TypeScript, we use new() to structurally type a class constructor. But how do we type an object that includes a new method, for example: const k = { new() { return '123' } } ...

VueJS does not refresh other components in the application

I am working with two components. Let's start with Component 1: <template> <div> <div class="form-group"> <label for="group">Category</label> <select name="category" v-model="category" @change="setCategory(ca ...

I need help figuring out how to navigate between different pages in my Vue-cli app that has multiple pages configured

After following the guide on https://cli.vuejs.org/config/#pages, I successfully configured vue-cli3 to build a multiple page application. My project consists of 2 static pages, and I set up the vue.config.js file as shown below. However, when running the ...

When trying to access an array within a nested reactive form group, a linting error was encountered

I'm currently working on a method to delete rows from a dynamic form, but I am struggling to target the array. The structure of my form group is as follows: this.piForm = this.fb.group({ milestoneSaveModel: this.fb.group({ milestonesToCr ...

Remove the color options from the Material UI theme

Can certain color types be excluded from the MUI palette in MUI v5? For example, can background and error colors be removed, allowing only colors defined in a custom theme file to be used? I attempted using 'never' but it did not provide a solut ...

Attempting to locate a method to update information post-editing or deletion in angular

Are there any methods similar to notifyDataSetChange() in Android Studio, or functions with similar capabilities? ...