How to Use TypeScript with Vue

Vue.js is already providing TypeScript support. The static type system can help prevent many potential runtime errors, especially as applications grow. For developing Vue applications with TypeScript, we strongly recommend using Visual Studio Code, which provides excellent out-of-the-box support for TypeScript.

If you are new to Vue.js, then check out my Vue.js Tutorial. So, we will use TypeScript as a Language, which 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 Vue.js locally.

Step 1: Install Vue.js.

Type the following.

vue init webpack vue-typescript-template

After installing, go into that folder. Next, we need to create the tsconfig.json file.

Step 2: Create the 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 a tsconfig.json file. It will set up the configurations for us. If you have worked on Angular before, you are familiar with that file.

Step 3: Install the TypeScript dependencies.

Go to your root and hit the following command.

npm install typescript ts-loader --save-dev
Note: If you find any error, 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 correctly, you can 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 the tsconfig.json file.

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

It will help us to remove the errors.

Our project already has 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 a Component decorator inside the vue component. Also, this syntax is almost familiar with Angular Component.

So now go to http://localhost:8080. You can see that it is working precisely fine. So you can use TypeScript decorator and class in the Vue.js application. So this is how you can integrate TypeScript with Vue js.

That’s it.

1 thought on “How to Use TypeScript with Vue”

Leave a Comment

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