Vue 2 with typescript multiple types for the props

Question

I have a simple prop in my Vue.js component in which I want to pass either a boolean or an array.

The problem is that when I do:

props: {
  checked: {
    type: [Boolean, Array],
    default: false,
  },
},

I will have to face the problems an unknow[] array will give me.

And if I do something like this:

props: {
  checked: {
    type: [Boolean, Array as PropType<string[] | number[]>],
    default: false,
  },
},

It will completely break my component. What am I doing wrong?

Thank you in advance for any help my bros.

That seems like a Vue bug. A workaround is to do: type: Object as PropType<boolean | string[] | number[]>. That downside to that is you lose runtime prop validation of Boolean during dev, but the TypeScript compiler errors should help. — tony19
– tony19, Commented Jul 12, 2022 at 20:27
@tony19 That worked. If you take the time to make an answer I'll accept it — jogarcia
– jogarcia, Commented Jul 19, 2022 at 0:42

tony19 · Accepted Answer · 2022-07-19 03:59:27Z

1

That seems like a Vue bug.

A workaround is to do:

props: {
  checked: {
    type: Object as PropType<boolean | string[] | number[]>,
  },
},

The downside to this is you lose runtime prop validation of Boolean during dev, but the TypeScript compiler would emit an error if you used an invalid type (something other than a boolean, string[], or number[]).

edited Jul 19, 2022 at 3:59

answered Jul 19, 2022 at 1:17

tony19

140k23 gold badges281 silver badges354 bronze badges

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

Comments

DOUBLE P · Accepted Answer · 2022-07-19 03:56:40Z

0

I think so " Boolean | Array ",It should not be an array

answered Jul 19, 2022 at 3:56

DOUBLE P

1

2 Comments

tony19 Over a year ago

The type field of Vue props supports multiple constructors in an array.

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Vue 2 with typescript multiple types for the props

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related