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

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.