TS class component in Vuejs

TypeScript is a modern typed language which is a superset of vanilla JavaScript. For easy development TS is a great tool . Let’s learn how to build a Vue component using TS.

JS and TS

One of the important difference between a JS component and TS component is that how the , data, computed and methods are organized.


The data ( ) is replaced in TS class by regular variables, arrays etc.


As we know methods hold functions and event handlers, in TS class it is just functions.


Remember computed ? the reactive functions which automatically computed ? In TS class component it becomes get and set methods.

Here is a sample TS class component

  <div>{{ this.name }}</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>

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:

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.