How to add props in Vuejs component using TypeScript

Props / properties area meant to display initial values on component and also meant to parent – child communication. So how to add a props Vuejs TS class component ?

Props in TS class

TypeScript allow us to separate Props from class, by extending and create a Prop object. I recommend this method.

  • Create props object by extending Vue class
  • Use the object to create our component class
  <div>{{ }}</div>

const nameProp= Vue.extend({
  props: {
    name: {
      type: String,
export default class NewComponent extends nameProp {
  version : 1.0
  conole.log('some text')  

<style lang="scss" scoped></style>


Lets import and use the component, place it in your template and specify the props value.

import New from "@/components/New.vue";

 <New name='Vue'/>
  components: {    

The following vue posts may help you

Published by


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: Logo

You are commenting using your 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.