How to set array as default value on props (Vue composition api + Typescript)

Question

With Vue 3 (composition api) + Typescript , I am trying to set default values on the props after defining them with an interface. I get a typescript error when I try to set default value [] on one of the props. How can I set a default empty array?

<script setup lang="ts">

interface IProps {

  title: string;
  things: any[];
  productUrl: any;
}

const props = withDefaults(defineProps<IProps>(), {
  title: "",
  things: [],            //<-- error (se below)
  productUrl: "",
});

The error:

Type 'never[]' is not assignable to type '(props: Readonly<IProps>) => any[]'.

It also says:

The expected type comes from property 'things' which is declared here on type 
'InferDefaults<Readonly<IProps>>'

yoduh · Accepted Answer · 2022-09-17 17:53:58Z

19

Object or array prop defaults must be returned from a factory function. The Vue docs mention this under prop validation

const props = withDefaults(defineProps<IProps>(), {
  title: "",
  things: () => [],
  productUrl: "",
});

answered Sep 17, 2022 at 17:53

yoduh

15.5k2 gold badges23 silver badges36 bronze badges

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

1 Comment

Richard de Wit Over a year ago

You can also use things: Array since that is also a function that returns an empty/new array

Boussadjra Brahim · Accepted Answer · 2022-09-19 05:24:52Z

4

You should return the empty array using a function :

<script setup lang="ts">

interface IProps {

  title: string;
  things: any[];
  productUrl: any;
}

const props = withDefaults(defineProps<IProps>(), {
  title: "",
  things: ()=>[], 
  productUrl: "",
});

For the standard syntax :

const props =defineProps({
  things:{
      type:Array,
      required:true,
      default:()=>[]
    }
})

answered Sep 19, 2022 at 5:24

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Collectives™ on Stack Overflow

How to set array as default value on props (Vue composition api + Typescript)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related