garytalmes.com

Typescript: Take Your Javascript Code to the Next Level

I've been a professional Javascript coder for many, many years. And for most of those years, Typescript wasn't available. Even when it became available, I was skeptical. It seemed like YAFF (Yet Another %$%$#@ Framework), and I couldn't see how it would improve my coding ability.

But I kept hearing from developers whose opinions I trust that TS was very much worth the time. And, as they usually are, they were absolutely right. It took me a while to get the hang of TS, and I am still nowhere near expert status; but I have come to see that it's extremely useful. Maybe even essential for any complex coding.

Typescript addresses an issue inherent in the Javascript language, and one that annoys developers coming to Javascript from most other languages: Javascript is not statically typed. What does that mean?

When you create a variable in Javascript, you assign a value to the variable (usually), but not the data type. Instead, Javascript infers the sdata type based on the value supplied.

So, if I declare:

const myActivity = "coder";

Javascript will infer that myActivity is of data type string. That's tremendously convenient, but it can also lead to issues later on. What if later on I assign a new value to myActivity:

myActivity = true;

This is perfectly acceptable to Javascript; but a change like this could very likely introduce an error somewhere else in my code; because somewhere else my code may be expecting a string value.

Now imagine that instead of just you writing all the code, that instead you are part of a team. You can probably see that the chances of something like this happening increase dramatically.

Typescript allows you to specify the data type of any piece of code you write. It then flags for you, anywhere in your code, instances where you are violating the rules of that data type; or misapplying that type.

But there's more, Typescript also acts as built-in code hinting. When you pass your cursor over a Typescript-defined entity in your IDE, you can see all the typing specs you declared. This has become so critical to my development worklow that I doubt I could switch back.

Typescript makes you a better coder because it provides you with a lot of important data as you code, and also helps you avoid errors that would normally throw an error and cause you debug time.

But, despite all these great features, Typescipt isn't used by everyone because it has syntax that seems unusual to many, it has a high learning curve, and it's very, very easy to make a lot of mistakes at first.

In another post, I will go over some basics of the language. But first, here are some key facts about Typescript that may help you better understand it before diving in:

  • Typescript is a superset of Javascript, not a new language. All the Javascript code you have right now will run in Typescript. So you don't need to migrate all your code to Typescript all at once.
  • Typescript runs during development, not production. Typescript is a dev tool, and as such it does not affect production behavior. It does help to point out code that could break in production; but nothing Typescript does ever hits production. That's because Typescript compiles down to Javascript when the code is run. Think of Typescript as a set of magical glasses you get to wear while coding.
  • You get to decide what you declare in Typescript. So even as you begin migrating, you can just not declare certain typings if you're not sure how to handle them.

If you're working on a small project where you are the only developer, Typescript may not be worth the time. But for any other project, especially those with multiple developers, Typescript is well-worth the investment of time and learning.

In an upcoming blog post, I'll go over Typescript syntax basics.

Author: Gary T Almes

I am the developer and owner of this web site. I've been working in the web development space for 35+ years and have experience in just about all phases of any development operation. I've owned my own web dev shop, been a senior level product and team manager, served as a senior developer, and I currently also teach MERN-stack web development in partnership with major universities. I'm available for occasional and regular development, management, or consulting needs.