top of page
Search

Catching Bugs - Unveiling the Power of Strong Typing

  • Writer: David Ishmael
    David Ishmael
  • Jul 29, 2023
  • 2 min read

Updated: Jul 30, 2023

Today, we're going to discuss the world of TypeScript - a programming language developed by Microsoft in 2012, that builds upon the foundation of JavaScript by adding static typing and additional features. It allows developers to write more robust, structured code and catch potential errors at compile-time rather than runtime. Picture this: you're crafting a masterpiece of a JavaScript function, but lurking in the shadows is a sneaky bug, ready to pounce. Fear not, TypeScript's vigilant eyes will catch it before it can cause chaos. This post provides an overly simplistic example of why TypeScript is my de factor standard when it comes to web development and why I push this standard to my development teams.


In the dynamic realm of JavaScript, we often encounter situations where data types can be a bit unpredictable. Now, imagine we have a simple JavaScript function that calculates the area of a rectangle:

function calculateRectangleArea(width, height) {
  return width * height;
}

Seems fine, right? But what happens if, by accident, we pass strings instead of numbers as arguments?

const width = "5";
const height = "10";

const area = calculateRectangleArea(width, height);
console.log(area); // Oops, it logs "NaN" instead of the expected 50!

Oh no, we fell into the infamous JavaScript type coercion trap! The function happily multiplies the string values, resulting in the dreaded "NaN" (Not a Number). Debugging such an issue can be time-consuming and frustrating.


Now, let TypeScript work its magic on this function:

function calculateRectangleArea(width: number, height: number): number {
  return width * height;
}

With TypeScript's strong typing, we explicitly define the data types for the `width` and `height` parameters as numbers. Now, if we try to pass strings, TypeScript will raise a friendly alarm, pointing out the mismatch:

const width: string = "5";
const height: string = "10";

const area: number = calculateRectangleArea(width, height);
// TypeScript Error: Argument of type 'string' is not assignable to parameter of type 'number'.

TypeScript saved the day by catching the bug even before the code runs. The type-checking prowess ensures that we're using the correct data types, preventing the pesky "NaN" from sneaking in.


As we embrace TypeScript, we cultivate a culture of bug-free coding and enhanced developer confidence. The power of strong typing provides clarity, readability, and early detection of potential errors. TypeScript becomes our loyal ally, guarding our codebase like a fortress, as we march towards cleaner, more reliable, and maintainable code.


If you're on one of my dev teams, expect to be using TypeScript, and bid farewell to those pesky bugs. Embrace the world of robust and efficient code, where TypeScript reigns as the guardian of our coding kingdom. May your coding adventures be bug-free and your JavaScript pitfalls be effortlessly avoided.


 
 
 

Recent Posts

See All

Comments


bottom of page