Setting an array as the default value for props in Vue using the composition API and TypeScript

Question

Setting an array as the default value for props in Vue using the composition API and TypeScript

Incorporating Vue 3 along with the composition API and TypeScript, I am facing an issue setting default values for props defined through an interface. When attempting to set a default value of [] for one of the props, I encounter a TypeScript error. How can I successfully 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 (see below)
  productUrl: "",
});

The error message reads:

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

Additionally, it states:

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

typescript vue-composition-api

Answer 1

Answer №1

It is recommended to use factory functions to return defaults for object or array props. This information can be found in the Vue documentation section on prop validation

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

Answer 2

It is recommended to use factory functions to return defaults for object or array props. This information can be found in the Vue documentation section on prop validation

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

Answer 3

Answer №2

To implement a function that returns an empty array, follow this code:

<script setup lang="ts">

interface DataModel {

  name: string;
  items: any[];
  url: any;
}

const data = withDefaults(defineData<DataModel>(), {
  name: "",
  items: ()=>[], 
  url: "",
});

Using the standard syntax:

const data =defineData({
  items:{
      type:Array,
      required:true,
      default:()=>[]
    }
})

Answer 4

To implement a function that returns an empty array, follow this code:

<script setup lang="ts">

interface DataModel {

  name: string;
  items: any[];
  url: any;
}

const data = withDefaults(defineData<DataModel>(), {
  name: "",
  items: ()=>[], 
  url: "",
});

Using the standard syntax:

const data =defineData({
  items:{
      type:Array,
      required:true,
      default:()=>[]
    }
})

Setting an array as the default value for props in Vue using the composition API and TypeScript

Answer №1

Answer №2

Similar questions

An easy guide on utilizing ngSwitch for datatype selection in Angular

Efficiently Measuring the Visibility Area of DetailsList in Fluent UI

Disregard the opossum circuit breaker's HTTP 404 Error

Unsubscribing EventListener during ngOnDestroy

Make sure all scenarios are accounted for in TypeScript union type switching

Combining String Literal Types with a regular string type

Enhancing JavaScript with TypeScript: implementing functional mixins

What could be causing this error when running nodemon in an Angular TS file?

Generating Components Dynamically in Angular 4 Based on User-Defined Input

Is Typescript the Ultimate Replacement for propTypes in React Development?

Warning: Unhandled promise rejection detected

Conceal the header on signup and login pages using Material UI

Instructions on transferring information from the app.component to its child components

Tips for creating consecutive HTTP API requests in Angular 2

Can a unique intrinsic type be created from scratch?

What are the repercussions of labeling a function, TypeScript interface, or TypeScript type with export but never actually importing it? Is this considered poor practice or is there a potential consequence?

Angular utilizes ZoneAwarePromise rather than a plain String output

What is the recommended data type for the component prop of a Vuelidate field?

Compiling TypeScript on save disrupts AngularJS functionality in Visual Studio 2017

An object in typescript has the potential to be undefined