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 […]

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?

perspectives typescript

TypeScript extends JavaScript by adding Types. There are many great reasons to switch to TypeScript. Especially if your team uses JavaScript. There are some reasons to not use TypeScript as there are with any language or framework.

Today I am going to talk about new features in Typescript 4.0. TypeScript 4.0 comes with lots of new features to make JavaScript development easier.

Learn TypeScript | TypeScript Crash Course | TypeScript Tutorial for Beginners: My goal with this courses is just give your the fundamentals of the language, show you what TypeScript is and how to use it. We as developers don't have time neither can we afford to spend too much time on any tehcnology.

Microsoft recently announced the availability of TypeScript version 4.0, an open-source language that is built on top of JavaScript.

You'll learn how TypeScript can help you build safer and more resilient JavaScript applications. Expect some demos, some code and a lot of fun! Write Safer JavaScript Applications With TypeScript!