TypeScript vs JavaScript: why are we team TS at Gorrion?

Let’s cut to the chase: TypeScript is just better. Sure, you might think, “Here we go, another developer singing TypeScript’s praises.” But hear me out – there are real reasons behind the hype and they go beyond fanboy enthusiasm. Here at Gorrion, we’re big fans of TypeScript, not just because we’re tech nerds excited about static types (okay, maybe a little) but because it genuinely transforms our development process.

So… what exactly is TypeScript? 🤔

Let’s face it, TypeScript might seem like just another JavaScript spin-off, but it brings some real advantages to the table! TypeScript, created by Microsoft in 2012, is an open-source programming language that’s a superset of JavaScript. That means it does everything JavaScript can do – plus a little extra. The “extra” is the secret sauce: TypeScript adds optional static typing to JavaScript, helping developers catch pesky bugs early and keep code in check as projects grow.

At the end of the day, TypeScript code gets compiled (or “transpiled”) to plain JavaScript, meaning it runs just fine in any environment where JavaScript does, whether it’s in a browser on the client side or in Node.js on the server side.

And if you’re thinking, “Okay, but who’s actually using this stuff?,” well, only some of the biggest names out there! Ever heard of GitHub, Slack, LinkedIn, Uber, or Spotify? They all leverage TypeScript to build scalable, reliable apps that keep users happy and bugs at bay.

So yes, TypeScript is like JavaScript’s responsible older sibling. It takes JavaScript’s freedom and familiarity and wraps it in a more structured package.

Static vs. dynamic typing: why we like to know what we’re dealing with 🚀

Alright, if dynamic typing is such an issue, let’s talk types! Now, if you’ve ever found yourself hunting down mysterious JavaScript bugs at 2 a.m., you’ll understand why TypeScript’s static typing feels like a breath of fresh air.

Here’s the deal:

• static typing (a.k.a. TypeScript’s superpower ✨): In TypeScript, when we say a variable is going to be a string, it’s a string. Not a number, not an object, but precisely what we declared it to be. This type of clarity happens at compile-time, meaning TypeScript will catch type-related issues before you even run the code. Think of it as having a safety net under our code – no guessing, just straightforward typing that catches sneaky bugs early.
• dynamic typing (a.k.a. JavaScript’s free spirit 🕺): JavaScript, on the other hand, likes to play it cool. Variable types? They’re figured out while the program is running. Need a string to suddenly be a number? No problem! While this flexibility can be useful, it also means that a tiny typo or an unexpected type change can blow things up during runtime. For larger projects, this can get messy fast.

With TypeScript, our debugging time shrinks, and our code reliability skyrockets. It’s the difference between “hope it works” and “know it works” – and trust us, our sanity thanks us for this every day.

TypeScript vs JavaScript: taming coffee order chaos ☕️

Example 1: adding up the coffee bill

To demonstrate, let’s imagine we’re developing an app for a coffee shop. Let’s imagine it needs to calculate the total bill for a customer’s order, including extras like an extra shot of espresso or some fancy oat milk. In JavaScript, it’s super easy to do, but sometimes it’s a little too easy…

In this case, the price is mistakenly a string. JavaScript rolls with it, giving us a total of "52" instead of the expected 7. Now, that’s going to leave our customers scratching their heads! 😅

Let’s see how TypeScript can save our bacon:

With TypeScript, we specify that both price and extra must be numbers. If anyone tries to sneak in a string, TypeScript immediately throws a fit. No additional checks are needed, so we can enjoy our coffee without worrying about math errors!

Example 2: adding ingredients to a coffee order

Next, let’s say customers can customize their coffees with various add-ons like syrups or milk alternatives. In JavaScript, we might write a check to see if the ingredient exists:

Sure, this check works, but it’s totally on us to remember to include it. Forgetting it could mean an unhappy customer asking for a sprinkle of unicorn dust – yikes! 🦄

Now let’s see how TypeScript can help:

In TypeScript code, we define an Ingredient type that only includes valid options. So if someone tries to order "unicorn dust", TypeScript throws an error before we even get to the kitchen. This way, we ensure that our menu stays reliable and our customers always get what they actually want – no more unicorn shenanigans!

TypeScript documents itself 📝

One of the most valuable aspects of TypeScript is that it practically explains itself. Thanks to type definitions, the code becomes self-documenting, reducing the need to dig through documentation or sprinkle console.log calls just to figure out what’s happening.

Imagine we’re working on a function to update a user’s profile, updateUserProfile. In JavaScript language, understanding what the function expects might involve:

• digging into documentation (provided that it exists),
• guessing based on how the function is used elsewhere,
• adding log statements to see what kind of data is actually being passed in,
• or… just assuming and hoping you’re right (which rarely ends well).

With TypeScript, all that detective work disappears. Here’s how it might look:

With TypeScript, we can see right away that updateUserProfile expects a UserProfile object with username, email, and isActive fields, plus an optional age field. The requirements are laid out clearly in the type definition – no extra documentation is required.

This built-in clarity becomes essential as projects grow or new developers join the team. No more guesswork or hunting down the original author for clarification, TypeScript’s self-documenting nature allows any team member to dive into the code with confidence.

Built-in collaboration with TypeScript 🤝

In team settings, this self-documenting nature becomes a collaboration booster. Since TypeScript defines the exact structure of each function’s inputs and outputs, it helps every team member understand how a function should work at a glance. No need to interrupt each other with “Hey, what does this function need?” – TypeScript’s type definitions make those details instantly visible.

By acting as documentation, type definitions prevent misunderstandings, speed up onboarding, and allow the entire development team to contribute to the codebase with confidence. And because TypeScript catches potential issues early (right as you’re writing code), team members can make updates and add features without the fear of introducing hidden bugs.

For larger teams or long-term projects, this kind of clarity is invaluable. TypeScript doesn’t just make code easier to write and understand, it makes working on code together smoother, more predictable, and frankly, a lot less frustrating.

Your personal coding assistant 🤖

One of the best perks of TypeScript? It feels like having a coding assistant built right into your IDE. Whether you’re in Visual Studio Code, WebStorm, or any other of the available code editors, TypeScript takes the coding experience up a notch with powerful suggestions and refactoring tools that speed up development and help you avoid runtime errors. Let’s face it, while you could technically write TypeScript in a basic notepad, it’d be about as enjoyable as assembling IKEA furniture in the dark – no thanks! 😅

With TypeScript, your IDE doesn’t just sit there; it works with you, giving you real-time feedback, hints, and a ton of additional features that feel like having a second pair of (digital) eyes on your code. Here’s what that looks like:

1. Code auto-completion 🚀

Imagine starting to type updateUserProfile and having the IDE instantly recognize it, filling in the function name and even suggesting the correct arguments based on the type definitions. No need to flip between tabs or consult the documentation – your IDE knows what you’re aiming for. It’s like having predictive text but for coding.

2. Hover for quick info 📜

Want to know what a function or variable does without losing your place? TypeScript allows you to hover over it for details: parameters, return types, and more. It’s a quick way to get answers without breaking your flow to dig through docs.

3. Real-time type checking ✅

In JavaScript code, you might access user.email only to find it’s “undefined” at runtime. But TypeScript alerts you to potential type issues as you type, letting you address them before they turn into problems.

Effective error detection: spotting bugs before they hit production 🛑🐞

If TypeScript is your personal assistant in the IDE, error detection is the “third eye” that catches issues before they become production bugs. Think of it this way: while TypeScript’s code suggestions keep you on track, its error detection is there to make sure you don’t fall flat on your face. With TypeScript, we’re not just reacting to runtime errors after they break something in production, we’re catching them while the code is still warm in our editor.

One of the biggest pain points with JavaScript language is discovering that an error – like a function receiving the wrong type of argument – only shows up when the code is running, sometimes in front of users (panic 😬). But TypeScript swoops in with a “compile-time safety net.” Here’s how it works:

1. Early error detection: static typing lets the TypeScript compiler detect issues during development rather than at runtime. Imagine trying to access a property on an object, which may be undefined. In JavaScript, you wouldn’t know there’s an issue until you see runtime errors like the classic “Cannot read property ‘lastName’ of undefined.”. TypeScript, on the other hand, highlights this risk immediately, encouraging you to handle cases where the object might be undefined.
2. Real-time validation in the IDE: As you code, TypeScript flags anything that doesn’t quite add up – maybe you’ve missed an argument in a function, or you’re accessing a property that doesn’t exist. TypeScript compiler shows this in real-time, which is super useful while refactoring since it’s like having a built-in checklist for all the moving parts.
3. Guarding against the unexpected: TypeScript forces you to handle all potential data types. If there’s a chance a variable could be null or undefined, you’ll have to handle it. This means fewer “undefined is not a function” surprises and more confidence that your code won’t blow up on someone’s screen.

In the end, TypeScript doesn’t just help us write code, it’s like having a guardrail for the entire development process. By catching issues early, we reduce those last-minute debugging marathons and make sure that when our code does reach production, it’s rock-solid.

Enhanced developer productivity: code faster, stress less 🚀

TypeScript is designed to boost productivity by streamlining the coding process. With smart features like context-aware suggestions and error detection, it helps us focus on what matters without unnecessary interruptions. These tools allow us to work more efficiently, reducing repetitive tasks and flagging potential issues early, so we can stay in the flow and code with confidence.

In essence, TypeScript makes app and web development faster and less stressful, letting you concentrate on building great software.

TypeScript for scalable, legacy-friendly projects 🏗️

As projects grow in size and complexity, TypeScript becomes more than just a nice-to-have – it becomes essential. Static typing gives us a safety net, allowing developers to catch errors early and keeping the codebase consistent over time. But TypeScript’s compatibility with JavaScript also makes it ideal for legacy projects. You can gradually introduce TypeScript alongside existing JavaScript code, avoiding a complete overhaul of the app, and bringing the benefits of type safety at a manageable pace.

In summary

As a programming language, TypeScript takes JavaScript’s flexibility and adds the structure, predictability, and safety needed for larger projects and team environments. It prevents bugs, boosts productivity, and makes coding smoother and more enjoyable. At Gorrion, we choose TypeScript vs JavaScript because it helps us deliver stable, maintainable code while keeping our sanity intact. So, if you’re still on the fence, consider hopping on the TypeScript train – it’s worth the ride.