AppDividend
Latest Code Tutorials

How to use TypeScript with Vue js

2,675

Get real time updates directly on you device, subscribe now.

How to use TypeScript with Vue js is the today’s leading topic. Vue.js is already providing typescript support. You can check out this link. The static type system can help prevent many potential runtime errors, especially as applications grow. If you are new to vue.js then check out my Vuejs Tutorial With Example  So we will use TypeScript as a Language, and it compiles into JavaScript. First, we need to install Vue.js. Go to the terminal and hit the following command.

TypeScript with Vue js

We will start this example by installing the Vue.js in the local.

Step 1: Install the Vue.js.

Type the following.

vue init webpack vue-typescript-template

After installing, go into that folder. We need to create tsconfig.json file.

Step 2: Create tsconfig.json file.

{
  "compilerOptions": {
    "lib": ["dom", "es5", "es2015"],
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true
  }
}

To run typescript in our file, we need to create tsconfig.json file. It will set up the configurations for us. If you have worked on Angular before then, you are familiar with that file.

Step 3: Install TypeScript dependencies.

Go to your root and hit the following command.

npm install typescript ts-loader --save-dev
Note: If you find any error then Install ts-loader 3.5.0 if you’re not using webpack 4. 

Now, we need to configure the build  >>  webpack.base.conf.js file. Just add the following code.

module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: "ts-loader",
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },
    ...

In there, rename the entry to .ts and add it to the extensions.

...
entry: {
  app: './src/main.ts'
},
...
resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
...

Now, Add es-module: true to build/vue-loader.conf.js.

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  esModule: true,
  ...

Step 4: Start the server.

Type the command to start the server.

npm run dev

If you have done all the configurations correct then you can able to run the project.

Step 5: Write class based  components.

First we need to install the following packages to declare class based components.

npm install vue-class-component vue-property-decorator --save-dev

Now, we need to add two properties inside tsconfig.json file.

"experimentalDecorators": true,
"allowJs": true,

It will help us to remove the errors.

Now, in our project there is already one component called HelloWorld.vue component. I am now writing this whole component in class based syntax.

<template>
  <div>
    <p>Class based component</p>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'

@Component({
  components: { HelloWorld }
})
export default class HelloWorld extends Vue {

}
</script>

You can see here, I have used Component decorator inside vue component. Also this syntax is almost familiar with Angular Component. So now go to the http://localhost:8080. You can see that it is working exactly fine. So you can use TypeScript decorator and class in the Vue.js application. This is how you can integrate TypeScript with Vue js.

Leave A Reply

Your email address will not be published.

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