Vue3 / Typescript define an property of Array(string)

Question

I have a property on a component that worked in JavaScript, but have problems with Typescript:

props: {
   keep_open: {
     type: Array,
     default: () => [],
   }
}

This definition doesn't fail here, but later in the code:

let keepOpen: Array<string> = [this.data.popupId];
this.keep_open.forEach((id) => {
   keepOpen.push(id);
});

The id from Keep_Open is type undefined and will not push into KeepOpen.

How do I fix this, either in the later code or in the definition of the properties?

Houssem · Accepted Answer · 2022-01-30 19:21:10Z

5

as mentionedin the vue documentation you should use PropType from vue, so it should be something like

type: Array as PropType<string[]>

And as good practice ,don't change value of a props inside a composant , emit an event and the owner of the props should update it.

answered Jan 30, 2022 at 19:21

Houssem

1,0728 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

I'm not changing the value of the property, I'm copying it into a common element. But that works, thanks.

you pushed an item in the array and this is a change , otherwise you can vote vote/make it as response , because it's worked for you ! thank you !

It is a different variable in reactive data. Perhaps I don't need to do this and can use it directly tho. I will review that.

MikeT · Accepted Answer · 2025-06-03 15:44:27Z

0

The Alternative Syntax for this is

type: Array as ()=>string[]

which tells vue the array constructor will return an array of the specified type

answered Jun 3 at 15:44

MikeT

5,5103 gold badges30 silver badges44 bronze badges