Using the officially supported vue-class-component (https://github.com/vuejs/vue-class-component) library, we can actually write Vue components using TypeScript classes, which will be more familiar to you now that we've played with Angular.

The vue-class-component library provides an @Component decorator that you can add to your classes to transform them into Vue components. For this to work, you need to set the experimentalDecorators option to true in your tsconfig.json file.

Here is an example of what an SFC looks like when written using TypeScript:

<template> 
    <div class="hello"> 
        <h1>{{ message }}</h1> 
        <p> 
            <span>Count:</span> {{ count }} 
        </p> 
        <p> 
            <span>Computed property:</span> {{ someComputedProperty }} 
        </p> 
        <p> 
            <span>Event listener:</span> <input type="button" 
            @click="onClickHandler($event)" value="Click me!" /> 
        </p> 
        <p> 
            <span>Increment counter and emit an event:</span> <input 
            type="button" @click="incrementCount()" value="Click me!" 
            /> 
        </p> 
    </div> 
</template> 
 
<script lang="ts"> 
    import {Component, Emit, Prop, Vue} from 'vue-property-decorator'; 
 
    @Component({}) 
    export default class ExampleSFC extends Vue { 
        // Property 
        @Prop({ 
            default: 'default message', 
            required: false, 
        }) 
        private message!: string; 
 
        // Data property 
        private count: number = 0; 
 
        // Lifecycle hook 
        public mounted() { 
            // alert('The ExampleSFC component has just
           // been mounted');  
        } 
 
        // Computed property 
        public get someComputedProperty() { 
            return 123; 
        } 
 
        // Event handler 
        public onClickHandler(event: MouseEvent) { 
            alert(`The button was clicked. Event: ${event}`); 
        } 
 
        // Event emitter 
        @Emit('count-increased') // if not specified, then the method 
        name is used and changed to kebab case 
        public incrementCount() { 
            this.count += 1; 
            return this.count; // this value will be emitted 
        } 
    } 
</script> 
 
<!-- "scoped" below means that the styles of this component won't leak out and will only apply to this component --> 
<style scoped> 
    h1 { 
        margin: 40px 0 0; 
    } 
</style> 

Here is how this example component can be used in the example application (the src/App.vue file):

<template> 
    <div id="app"> 
        <ExampleSFC message="Custom message" v-on:count-
        increased="onCountIncreased($event)" /> 
    </div> 
</template> 
 
<script lang="ts"> 
    import {Component, Vue} from 'vue-property-decorator'; 
    import ExampleSFC from './components/ExampleSFC.vue'; 
 
    @Component({ 
        components: { 
            ExampleSFC, 
        }, 
    }) 
    export default class App extends Vue { 
        public onCountIncreased(event: any) { 
            alert(`New count: ${event}`); 
        } 
    } 
</script> 
 
<style> 
</style> 

The following are some things to take note of from the preceding example:

• The TypeScript code is placed within a script block starting with <script lang="ts">.
• The component is declared with an @Component decorator, which is provided by the vue-property-decorator library (the CLI has added this for us).
• The properties are declared by adding the @Prop decorator to class fields.
• The @Prop decorator is also provided by vue-property-decorator.
• Properties that are not decorated with @Prop are part of the component's data.
• Component methods are declared as class members: incrementCount() { ...​ }.
• Computed properties are declared using property accessors: get computedMsg(...​).
• Lifecycle hooks are declared as class members: mounted() { ...​ }.
• Event handlers are simple class member functions that accept the event as a parameter: onClickHandler(...​) { ...​ }.
• Methods that emit events can be annotated with @Emit, which takes the return value of the function and emits it using $emit.
• The event name can be specified in @Emit. If no name is specified through the decorator, then the method's name will be used instead (in kebab-case).
• Component dependencies are declared within the @Component declaration (you can see this in the App.vue file).

You can find the complete source code for this example in this book's samples, under Chapter09/05-vue-ts.

This is quite nice already, but we can do better.