How to add interface as props in Vuejs

This is another TypeScript post for Vuejs users. We had seen how to add props in TS, if you miss those, use the following links

[display posts include_excerpt=true id=5278,5285]

Interface

Interface is like structure for Object. We can declare custom types in our project as Interfaces which can be organized in a file and folder (best practice).

Here is our sample Interface, this will hold value for Task

//types/index.ts
export interface Task{
    id: number,
    title: string,
    isdone: boolean
}

Defining props as custom type

Using props as Object Vue let us use Interface as Type. We can’t do it directly, instead Vue provide PropType. Let me show

import Vue, { PropType } from "vue";
import { Task } from "@/Types";

const editProp = Vue.extend({
  props: {
    task: {
      type: Object as PropType<Task>,
    },
  },
});
export default class EditDialog extends editProp {
...
}

Using the PropType we specify the Interface/Type and that should work.

The following vue posts may help you

• How reactivity works in Vuejs - How to use reactive feature in Vuejs
• Create a desktop version of Quasar-Vue app using Electron - How to build desktop version of Quasar Vue app using Electron
• Create PolarArea chart component in Vue - How to Create a PolarArea Chart component in Vue using vue-chartjs module
• Create Radar component in Vue - How to Create a Radar Chart component in Vue using vue-chartjs module
• Create Horizontal Bar chart component in Vue - How to Create a HoruzotalBar Chart component in Vue using vue-chartjs module
• Create Scatter chart component in Vue - How to Create a scatter Chart component in Vue using vue-chartjs module
• Create Bubble chart component in Vue - How to Create a bubble Chart component in Vue using vue-chartjs module
• Quasar UI framework for Vue - About Quasar Vuejs UI framework and How to create and run Vuejs app with Quasar CLI tool
• Component with same name in Vuejs - How to dealing with component has same name in Vuejs
• Create Pie chart component in Vue - How to Create a Pie Chart component in Vue using vue-chartjs module