Start using Typescript in Vue. The easy way.

Start using Typescript in Vue. The easy way.

If you program in JavaScript probably somebody told you about the advantages of using Typescript or you thought about start using it.

As you can see in this chart, more than 50% Javascript developers are using Typescript

Source: https://2019.stateofjs.com/javascript-flavors/

Start to use a new technology, new paradigm, new framework or anything could be hard and challenging, this is why is important start integrating new technologies avoiding friction with previous one. Today I’ll try to show you the easiest way to start using Typescript in your Vue projects.

In case of Typescript we “just” will add a layer over Javascript then I’ll try to explain easier way to use Typescript with Vue even in existing projects.

Before start, you should know Typescript using benefits. You have thousands blog’s post talking about that:

Most repeated benefit is “types”. Javascript is a weakly typed language (variables and consts have types, but you can not set its type. Only by means of value)

Prerequisites

I assume you are using vue-cli. You must be sure you are using version 4.0.0+

Step 1: Adding Typescript

First step is add Typescript using vue-cli

vue add typescript

Vue cli starts to add typescript package and necessary dependencies. Also create and update configuration files like tsconfig.json, It needs ask you some questions to configure properly.

Let view each question in detail and the “correct” answer.

? Use class-style component syntax? (Y/n)

If you want start to use class-style component syntax you should answer “yes”. You can answer “no” and you can not use it, but anything else changes.

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

“Yes”. You were probably already using it.

The next two questions are the most important

? Convert all .js files to .ts? (Y/n)

⚠️ You must answer “No” to avoid Vue cli rename all your files to .ts. If you do that you will have to refactor all your project files to Typescript

? Allow .js files to be compiled? (y/N)

⚠️ You must answer “Yes”. It’s the same as, in tsconfig.json, set the value allowJs to true. If you don’t anwser “yes” you will receive a lot of error messages, because the typescript transpiler tries to transpilate .js

Step 2

No step 2. You just added Typescript support to your project and everything should work fine as usual.

Writing your first Vue component in typescript

When you write a Vue component in Javascript, you probably write something similar to:

<template>
 ....
</template>
<script>
export default {
  props: ....,
  data () ....,
  methods: ....
}
</script>

To write a Vue compoment using Typescript you need to set the scripting language using the attribute lang in the script tag. Also, as Typescript needs to infer types, you must define your components with Vue.component or Vue.extend (I prefer second one)

Then our component look like:

<template>
 ....
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: ....,
  data () ....,
  methods: ....
})
</script>

🎉 Done! You have your first Typescript Vue component.

The point is you can start using Typescript and keep your previous code. You don’t need to rewrite all components, or you can do step by step.

I recommend you to read Vue documentation about Typescript support

In future blog posts I show how use multiple mixins in Typescript and other tips about typescript