Unlock the Power of Vue and TypeScript

Getting Started with Vue and TypeScript

As a frontend developer, you know how crucial it is to choose the right tools for your project. Vue, a lightweight and progressive frontend framework, has become increasingly popular among developers. With the release of Vue 3, the framework now offers improved support for TypeScript, making it easier to build robust and maintainable applications.

Adding TypeScript to a Vue Project

To set up a new Vue project with TypeScript, use the code below and select the “Manually select features” option. Configure it with the following settings:

vue create my-app
cd my-app
vue add typescript

Once the project is set up, run it to test it. Open localhost:8080 or the URL shown in your console, and you should see your app running successfully.

Using defineComponent

defineComponent provides decorators from the Vue library, allowing you to define Vue components with full TypeScript support. To use defineComponent, open App.vue from the src folder and add the following code:

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return {};
  },
  template: '

',
});

Data Properties, Props, and Computed Properties

In TypeScript, you can declare data properties as class variables. To use props, you can use the props decorator. Computed properties can be used to write simple template logic, like manipulating or concatenating data.

import { defineComponent, ref, computed } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    return {
      count,
      doubleCount,
    };
  },
  template: '

',
});

Methods, Watchers, and emit

Methods in TypeScript have an optional access modifier. Watchers are written differently than in JavaScript, using the Watch decorator. To emit a method from a child component to a parent component, use the emit decorator.

import { defineComponent, ref, watch, emit } from 'vue';

export default defineComponent({
  setup(props, { emit }) {
    const count = ref(0);

    watch(count, (newValue) => {
      console.log(`Count changed to ${newValue}`);
    });

    function increment() {
      count.value++;
      emit('increment', count.value);
    }

    return {
      count,
      increment,
    };
  },
  template: '

',
});

Using Vuex with TypeScript

Vuex is the official state management library used in most Vue applications. To store the state, create a file called types.ts in the store folder. Then, create an index.ts file to initialize Vuex and register the module.

// store/types.ts
export interface State {
  count: number;
}

// store/index.ts
import { createStore } from 'vuex';
import { State } from './types';

const store = createStore({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});

export default store;

Lifecycle Hooks and Mixins

A Vue component has eight lifecycle hooks, including created and mounted. To create mixins in TypeScript, create a mixin file that contains the data you want to share with other components. Import the mixin file and write it as follows:

// mixin.ts
export default {
  data() {
    return {
      sharedData: 'Hello from mixin!',
    };
  },
  created() {
    console.log('Mixin created!');
  },
};

// App.vue
import { defineComponent } from 'vue';
import mixin from './mixin';

export default defineComponent({
  mixins: [mixin],
  setup() {
    return {};
  },
  template: '

',
});

The Future of Vue and TypeScript

With Vue 3, you can now create robust and maintainable applications using TypeScript. By following this tutorial, you’ll be able to get your Vue app up and running in TypeScript with features like defineComponent, data, props, computed properties, methods, and watchers.