Blog

My Journey as a Web Developer

From Javascript to Typescript. How hard is it?

10/08/2023

author avatar

Taking on any new programming language can be a daunting task, especially when the buzz around the new language is overwhelmingly positive and you feel left behind. When can you do it one way, why take the time to do it a different way? TypeScript, a superset of JavaScript, is a prime example. The development community and YouTube influencers are rife with discussions about its virtues - enhanced type safety, better code quality, and improved developer experience. But what happens when you still can't see its worth?

The Initial Scepticism

When I first encountered TypeScript, I must admit I was sceptical. All the talk about how TypeScript could revolutionize development made me raise an eyebrow. Like a good developer, I decided to keep on trend and took the first opportunity at tackling it and milking its goodness.

At first glance, TypeScript appeared to be an additional layer of complexity. The type annotations seemed like needless code, and the thought of rewriting a JavaScript project in TypeScript sounded like a time-consuming endeavour. I questioned whether the purported benefits were worth the investment.

My guess is, for many developers out there who learned to code through JavaScript, it seemed completely pointless. Well that's exactly how I felt too. Adding all these types for variables and functions and all so I can know what should go in, what should go out and what should stay put. Why do I need to remind myself of that? I'm the developer, I am writing it.

The Reality Check

Curiosity eventually got the better of me, and I decided to give TypeScript a fair chance. As I delved deeper into its usage, I encountered a few realities that tempered my initial scepticism.

1. Learning Curve

TypeScript's syntax and concepts aren't immediately intuitive, which resulted in a short-term slowdown. For other developers coming from typed language, it will likely be a breeze, but for me it wasn't in the first hour or so. I read the handbook (be sure to read through it if you haven't), and could easily follow it, but applying it my own projects didn't quite match up.

Like a lot of learning, things only become clear once you actually start doing it and in many cases, seeing it in action. In particular a benefit is most obvious when getting fed variants or parameters VS Code. Without Typescript, you simply cannot access variants of a reusable button component. I can recall setting one up in JavaScript only to find I needed to navigate back to the component to remind myself of the variants.

Things started to move along nicely, but it's not all plain sailing; even to do this day.

2. Third-Party Libraries

One of my main difficulties when learning TypeScript was integrating third-party libraries. In pure JavaScript, adding libraries can be a burden, but you usually expect it will be resolved in the documentation 95% of the time. However, although it's getting better, TypeScript requires type definitions for these libraries and they're not always perfect.

This hurdle was frustrating and I can admit to wasting a lot of time and banging desks over this. A number of times, I wanted to go back to JavaScript just because one obscure package is breaking your whole app. Of course, there's always the way to escape as below, but that's the whole point of TypeScript, so to ignore it and be left in the dark is just wrong.

// @ts-ignore

Or to block a whole file.

// @ts-nocheck

That said, most libraries have excellent type support. For the ones that don't often it's just better to create your own types.

2a. Create your own types from API responses

  • Call the API and inspect the response
  • Create a type based on that
interface ApiResponse {
    status: string;
    data: {
        key: string;
        value: number;
        // Other properties...
    };
}
  • Now use the type in your code
const fetchApiData = async () => {
    const response: ApiResponse = await fetch('https://api.example.com/data');
    const data = await response.json();

    return data; // No need for explicit type assertion here
};

Now TypeScript knows that 'response' has the type 'ApiResponse' and anything properties on it will be type safe and fed to you by VS code.

The Balancing Act

Despite the initial roadblocks, I started noticing subtle improvements in my workflow as I persevered with TypeScript.

  • Enhanced Confidence: TypeScript's type system caught potential bugs during development, offering an increased sense of confidence in my code. This significantly reduced the time spent debugging and testing.

  • Code Maintainability: While TypeScript seemed verbose initially, the type annotations actually made the code more self-explanatory. This enhanced maintainability, especially when collaborating with other developers.

  • Refactoring Confidence: Refactoring code became less nerve-wracking. The type system's validation provided a safety net, ensuring that changes didn't inadvertently break functionality.

Embracing the Journey

My skepticism gradually transformed into appreciation. TypeScript wasn't a silver bullet, but rather a tool that needs a bit of time, understanding and adaptation. The learning curve was a small investment for the time saved eventually, and while dealing with third-party libraries and occasional documentation gaps was frustrating, the overall benefits started to outweigh the drawbacks.

For any JavaScript programmers out there considering making the move, I say the time is now!

← Blog Home