Why Enable TypeScript’s Strict Mode? Benefits & Examples

If you find this story helpful, feel free to like or share it!

---

I’m running a bakery, and my bakery is like a TypeScript project. Every day, I’m juggling different ingredients: flour, sugar, eggs, and more. Now, in this bakery, I have a special assistant named Strict Mode. Enabling Strict Mode is like having a meticulous quality control inspector who ensures that every ingredient is measured precisely.

One day, I decide to enable Strict Mode. Immediately, my inspector starts scrutinizing everything. “Is this flour fresh?” they ask, “Are these eggs cracked?” At first, it feels a bit overwhelming. I think about how, before the inspector, I could just toss in ingredients without much fuss. I didn’t have to worry too much about little details, and things generally turned out okay. But now, every step is under the microscope.

This attention to detail means my baking process slows down initially. I have to double-check measurements and inspect the ingredients more closely. It’s a bit frustrating because it feels like I’m spending more time preparing than actually baking. However, as I get used to the inspector’s guidelines, I notice something interesting: my pastries are turning out consistently better. The cookies are perfectly chewy, the cakes rise just right, and the flavors are balanced.

Enabling Strict Mode, like having this inspector, comes with trade-offs. It requires more time and attention upfront, but it also brings a higher level of confidence in the quality of my baked goods. I can serve my customers knowing that what they’re getting is made with precision and care. So, while it might take a bit longer, the end result is worth the extra effort. And in the world of TypeScript, just like in my bakery, precision and reliability are the secret ingredients to success.

---

In JavaScript, without any type checking, you might write a function like this:

function mixIngredients(ingredient1, ingredient2) {
    return ingredient1 + ingredient2;
}

const result = mixIngredients("flour", 2);
console.log(result); // Outputs: "flour2"

Here, I mixed a string with a number, and JavaScript didn’t complain. My pastries might end up tasting a bit strange, but I won’t realize the mistake until it’s too late.

Now, let’s see how enabling TypeScript’s strict mode changes the game:

function mixIngredients(ingredient1: string, ingredient2: number): string {
    return ingredient1 + ingredient2.toString();
}

const result = mixIngredients("flour", 2);
console.log(result); // Outputs: "flour2"

With strict mode, TypeScript will ensure that I specify the types of my ingredients. If I try to pass a number where a string is expected or vice versa, TypeScript will throw an error before I even run the code. This is like my inspector catching a cracked egg before it makes it into the batter. It prevents unexpected results, allowing me to fix the problem right away.

Here’s another example showing how strictNullChecks—a part of strict mode—helps:

function getIngredient(ingredient: string | null): string {
    if (ingredient === null) {
        throw new Error("Ingredient cannot be null");
    }
    return ingredient;
}

const ingredient = getIngredient(null); // TypeScript error: Argument of type 'null' is not assignable to parameter of type 'string'.

By enforcing checks for null or undefined, strict mode ensures that I never accidentally try to bake without all my ingredients.

Key Takeaways:

1. Precision and Safety: Enabling strict mode in TypeScript is like having a meticulous inspector in a bakery. It ensures that all variables (ingredients) are used correctly, catching errors early on.
2. Initial Overhead: There might be more setup and configuration upfront, similar to spending extra time measuring ingredients precisely. It can slow down initial development but leads to more reliable outcomes.
3. Consistency: Just as a bakery benefits from consistent quality, a codebase benefits from the reliability that strict mode brings, reducing bugs and enhancing maintainability.