Add TypeScript to Vue or Nuxt in 3 Easy Steps

Add TypeScript to Vue or Nuxt in 3 Easy Steps

Using TypeScript in Nuxt or Vue can be so complex. I only want to do type checking! Nothing more. It took me so long to find out how to enable type checking in Nuxt, so I will share what I discovered (and you can apply these findings in Vue too).

Step 1: Change the script language

It should have been obvious. In the initial web days, we had to set the script tag’s language to JavaScript explicitly. JavaScript was not the default language in the early days. Since then, the browser now assumes the script tag is always JavaScript.

To enable TypeScript in the .vue page, change the script language.

<script lang="ts">
const myVar: string = 'hello'
</script>

We can now use TypeScript. Simple.

Step 2: Create an interface for the data object

TypeScript is very good at catching errors. You mess with the types, you get an error. We should, therefore, define what the data object should look like.

<script lang="ts">
interface Data {
  var1: boolean;
}
export default {
  data(): Data {
    var1: true,
  }
}
</script>

Now, any time we update the data dynamically or update our code, we will have type checking.

Step 3: Create an interface for This

Vue pages allow us to use the this variable to access Nuxt/Vue properties and the data properties. We should define an interface to allow the use this of our functions.

<script lang="ts">
interface Data {
  var1: boolean;
}
interface This extends Data {
  [key: string]: any;
}
export default {
  data(): Data {
    var1: true,
  },
  created(this: This) {
    this.var1 = false;
  }
}
</script>

We can now use this in Vue lifecycle hooks such as created. Since this has so many properties, we needed to add a generic key definition to account for all the other properties.

(Optional) Step 4: Create an interface for the methods object

If we have methods, we can choose to make sure they accept the correct input and output types.

<script lang="ts">
interface Data {
  var1: boolean;
}
interface Methods {
  onCreated(): void
}
interface This extends Data, Methods {
  [key: string]: any;
}
export default {
  data(): Data {
    var1: true,
  },
  created(this: This) {
    this.var1 = false;
    console.log(this.onCreated(true))
  },
  methods: <Methods>{
    onCreated(this: This, val: boolean): string {
      return `my val = ${val}`
    }
  }
}
</script>

The methods get added to this and that is why we extended the This interface.

Conclusion

I assumed you already have the tsconfig.json and all the other necessary items to add the proper TypeScript npm packages to keep this post short and simple. The approach I described is non-conventional, but it keeps TypeScript simple in your Vue pages. Furthermore, the recommended Nuxt and Vue approaches do not show you how to type check the data and methods objects.

I hope you found this post useful.

Before you go

About the author


Originally published on Medium.com

Photo by Photos Hobby on Unsplash

Did you find this article valuable?

Support Miguel A. Calles MBA by becoming a sponsor. Any amount is appreciated!