Making friends out of TypeScript and Vue Developers
Here at Ionic, we’re big fans of TypeScript. Back when we were working on Ionic Framework 2.0, we made the move to go all in on TypeScript and haven’t looked back. When we shipped Ionic React, we made sure it used TypeScript out of the box and wrote about how to use TypeScript in a React app. Now with Ionic Vue, we’ve made the same choice to go all in on TypeScript and ship all our starter Vue projects with it. But we started to notice something interesting with the Vue Community: a bit of hesitation and in some cases a full on rejection of TypeScript. What’s the deal?
I did a very scientific poll and asked Vue developers if they were using Vue 3 and not using TypeScript, what was the reason. Thanks to all who replied!
Of the replies I got, the most common trend was that folks thought TypeScript was:
- Too much work to configure
- Didn’t “feel” like a good match
- Just not for them
Now personal preference is one thing, but there are some technical assumptions being made that might be a result of bad experiences with older releases of TypeScript. So let’s actually look at what working with TypeScript in Vue project actually is like and the benefits you get by pairing Vue with TypeScript.
Types, what are they anyways?
Before we dive into the Vue parts, let’s just set a baseline. TypeScript is a superset of JavaScript that provides types. So any valid JavaScript is also valid TypeScript. For instance, if we have this bit of code:
const items = [0, 1, 2, 3]
We could load this in a JavaScript or TypeScript file without any issues. Where it gets fun is when you start to add the type information to this. We could add a type annotation that just tells TypeScript what kind of variable items is.
const items: number[] = [0, 1, 2, 3]
This is telling TypeScript that items is an Array (the [] part) and that it can only accept numbers. Why do we need this? Doesn’t JavaScript already understand this type of information?
JavaScript already has a loose sense of types, but it’s not strict. Meaning that we could have our variable accept anything; strings, objects, other arrays, etc. The problem here is that when we start to build out our apps, having things be this dynamic can lead to various runtime errors or just general confusion about what kind of data we’re working with.
But by utilizing types, we can make sure that we’re writing safe apps and can understand our code (even months later). To make this adoption event more approachable, TypeScript will auto-infer the types for us, so we often don’t even need to supply types if we’re setting the value right away. So our array example from before can drop the type annotation and be closer to regular JavaScript.
The basic types we deal with are number, strings, boolean, [](array), and {} (object). With these base types, we can provide TypeScript with all the information it needs to fully understand our code. There’s a lot more information regarding TypeScript that can be found on the official website.
Types in Vue
With the basic understanding of what types are, how do we get TypeScript working in our Vue project? Well if we’re using the Vue CLI for your project (which you should be), you can run this command from you terminal:
vue add typescript
This will kick off a Vue CLI plugin that gets our project setup for TypeScript. You’ll be prompted with a few questions along the way as well
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Convert all .js files to .ts? No
? Allow .js files to be compiled? Yes
? Skip type checking of all declaration files (recommended for apps)? Yes
These prompts (with my answers included) will help you configure your project with TypeScript.
Two prompts I do want to call out are the “Convert .js to .ts” and “Allow .js files to be compiled”. If you’re migrating from an older project or have a lot of code that you do not want to migrate to just yet, these options are your best friends. These give you the benefits of TypeScript (compile time error checking and type information) without having to go all in on TypeScript.
Why Types in Vue?
So why would we want types in Vue? Well if having type-safe code and no runtime errors aren’t enough to convince you, what about a better understanding of Vue components? For me, this was one of the biggest reasons I opt for TypeScript when working with Vue. Take this basic HelloWorld component:
<template>
<h1>Hello World</h1>
<button @click="logVal()">Click Here</button>
</template>
<script>
export default {
name: "HelloWorld",
methods: {
logVal(){
console.log("Hello from method")
}
}
}
</script>
When I was first learning Vue, I was constantly forgetting the syntax for methods, props, etc. As someone who came from Angular and React, the syntax was confusing and took a bit to learn. Even typing this right now, I had to look up and verify I did it correctly! TypeScript provides a way to resolve all of that and make understanding Vue components straight forward.
First we import defineComponent from vue. This is essentially an empty function, but provides the type information we need to understand our component.
import { defineComponent } from 'vue';
Next, we can just wrap our component in this defineComponent function.
export default defineComponent({
name: "HelloWorld",
methods: {
logVal(){
console.log("Hello from method")
}
}
});
Once done, we can automatically start getting type information in our editor for our components.
“Ok Mike, are you serious about that?” While trivial, this can be a big feature for people just starting to learn Vue. It’s essentially having the Vue docs right in your editor. You know exactly how methods should be declared and what life cycle hooks are part of your components.
For more advanced use cases, like working with Vuex, TypeScript should almost be required. Being able to provide the expected values and types in your state management really just streamlines the whole process. The Vuex team has provided some great docs here for how to type your store and some best practices, plus I’ll be following this post up with some more material in the coming weeks.
Revisiting TypeScript
There are a lot of benefits to using TypeScript in your Vue app. But it is true, not everyone may need it. If you’re not using the Vue CLI or do not have a build process, using TypeScript can be a bit too much. But these cases are very few, especially when building apps, like with Ionic Vue. So if you’re working with Vue 3, try it out with TypeScript enabled. With the latest defaults in the Vue CLI, you’ll be able to build your apps faster and without any runtime errors!
