Making friends out of TypeScript and Vue Developers

Originally published at: Making friends out of TypeScript and Vue Developers - Ionic Blog

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…

4 Likes

I was pretty unhappy when Ionic 2 went with TypeScript, which I hadn’t learned yet. That made me put off upgrading from Ionic 1, which I eventually came to regret. Fast forward a few years later, and now I love TypeScript and Ionic 5. But I get why people would hesitate. It’s a lot to change all at once.

1 Like

I mean, it’s not always a lot. I specifically call out parts in my post where typescript will do most of the type checking for you automatically.

Thanks for an awesome intro to the main benefits of Typescript.

As a Dev new to Vue and Ionic at once Typescript felt like just another thing to learn at first. I’ve come to enjoy TS mostly. But here and there I run into Typescript errors that take 30-90min to solve at best. The last ones took days, I’m still searching. It’s particularly frustrating in such cases if you pop open JsFiddle and your code works 100% out of the box. Then stick it back in the project and run into heaps of errors you don’t understand. It’s probably where most of us go… wait a minute…

I’ve grown to understand some of the most common TS errors and often look up the more obscure ones. But even then when you’re just starting out it’s not always immediately clear what TS is on about.

This is especially pronounced in an Ionic Vue3 project where for some reason the TS errors refer to totally different line numbers than what is in the code. It seems from my digging that it’s an open bug at the moment. But this makes debugging very hit and miss and often directly leads to days in debugging. I know the past 3days in my latest Ionic project where just spent hunting TS errors. I often just revert with git and start from the past checkpoint. If that means redoing 1-3days of work it’s often worth it compared to guessing what line number TS is throwing errors on. As a Dev new to Vue and Ionic I don’t exactly type this out in VIm like you do ;-). I also probably make some of the most obvious mistakes.

Lately I code and check line by line so I catch TS errors early on while I’m still coding a new line.

I think in time though TS is going to prove to be an invaluable asset. So I’m gritting my teeth and bearing the growing pains. Less debugging on very obscure issues later on is certainly worth it.

1 Like

Just loving all these confessions!

I converted after one project without TS (suffering many runtime pains) and disciplined myself to use Typescript. My confession is that I do cheat once in a while by using the any or unknown keyword, misleading Typescript and myself. That is why I add the comment “Hacky” to every line where I cheat.

I might be mistaken, but in my (Angular) case, my editor (vs code) tells me where I go wrong in Typescript at the moment I type the mistake.

I hardly look at the CLI output anymore these days. Nor am caught in Typescript messages in the browser that way. So hardly any need to look for line numbers due to TS issues. Runtime issues (if any) are mostly due to APIs and wrong logic

The editor and the app end result are my focal points. Creating and checking line by line, as u also mention.

Shouldn’t this also be possible for Vue, looking at the blog?

Otherwise, one would think there is an issue with the TS transpiler?

@mhartington Speaking as a new VueJs Developer in a first solo project TS causes extreme frustration when you spend 90% of productive time chasing implicit errors senselessly on working JS code. It’s Einstein’s definition of insanity.

I’ve spent time pushing through TS primers and TS is not hard but it does require understanding for the underlying code you’re working with. I can code VanillaJS off the top of my head. The hard part is when you’re learning VueJS and Ionic and Capacitor and along comes TS errors for days on end with senseless nonsense. To a new IonicVue dev this negates all the gains of using a framework.

So when you’re new to VueJs you’re forced to run before you crawl by this requirement. And I think this is where the Pushback from most of the VueJS crowd comes from. TS is inherently part of VueJs’ inner workings. So where appropriate it’s taught without much ceremony in Vuejs docs but you’re still free to mostly write VanillaJs almost everywhere else. I get why this might not be great in the long term.

When coming to Ionic though there’s still virtually no documentation for Capacitor and Cordova plugins that work in a VueJs+TS context. All the JS examples in Cordova plugins and Ionic example pages break over and over when you pull them into IonicVue. In the beginning it’s not immediately clear why and there’s so many stacks and dependancies involved that it’s hard to say where things break down. TS errors have nonsensical definitions that are written to apply to such a broad audience that they really don’t help much.

And then comes JS plugins like Quaggajs that replace depreciated Cordova Scanning plugins with no real Capacitor replacements yet. This leads to a new level of fun - no types definition. So not only do I have to type out my code but if I want to use the code of others I need to write type definitions for their code as well. This requires me to dig around in their code and try to figure out what they intended. The TS requirement effectively makes many JS modules completely useless in Ionic unless you want to spend even more fun time with TS.

Since over 90% of my time is already invested in solving TS issues I’m more keen to actually do something in my code that contributes to the actual aim of my project.

Effectively TS ads so much technical debt to a very tiny project that I may as well abandon the whole thing and move to a different framework.

For me the issue is not so much TS as the frustration of TS issues stopping all progress in it’s tracks. I think including example snippets in the Docs alongside React and Angular snippets will go a long way to alleviating much of the frustration for new users. But it is the tip of the Iceberg. TS is an advanced topic and not really worth it for tiny projects or beginners because it ads a constant hurdle to getting work done.

After spending some time getting to know TS I’m convinced I want to use it in the medium to long term but I can’t yet justify the time drain it creates in my project work.

The further I go the more I see why TS is so unpopular with VueJs devs using Ionic.

ok, there’s a lot here, so I’ll try to reply bit by bit…

The hard part is when you’re learning VueJS and Ionic and Capacitor and along comes TS errors for days on end with senseless nonsense.

When this happens, this generally means you will have a run time error. Saying that Typescript introduces these errors ignores that you’d have them at runtime.

So when you’re new to VueJs you’re forced to run before you crawl by this requirement.

I don’t fully agree with this since, as I stated in the blog post, typescript will do most of the type inference for you. You are only really forced to do something if you are being too dynamic or trying to change a data structure.

When coming to Ionic though there’s still virtually no documentation for Capacitor and Cordova plugins that work in a VueJs+TS context.

All of Capacitor’s docs provide typescript examples. For cordova we have a whole docs page on that here

By using the Ionic Native wrappers around the cordova plugins, you get type info you need automatically.

Quaggajs

Haven’t tried this myself, but a quick search shows that there is a version that is

  • Maintained
  • Provides type definitions.

But if there’s other libraries that you need, there’s the DefinitelyType project that can help. You simple install the types you need

npm install @types/<your-library>

All of which is covered on the typescript site.

Generally, I think what you’re describing is anyones reaction to learning something new. It’s less of “this is bad and causes too many headaches” and more of “this is new and I’m still learning”. Many other communities (angular and react) have seen the benefit that typescript provides to large and small projects, just takes some time to learn the process.