Skip to main content

Understanding Strict Mode

Understanding TypeScript's strict mode is crucial when you're trying to write robust and clean code. This article aims to explain what strict mode is, why you should use it, the features it provides, and some common errors you might encounter.

What is Strict Mode?​

Strict mode in TypeScript is a way to opt into a more strict variant of JavaScript. It enables you to catch errors and bugs at compile-time rather than at run-time. This is significant since it helps you to write more secure and maintainable code.

Why Use Strict Mode?​

You might wonder why you should use strict mode when it seems like it'll just give you more errors. The answer is quite simple. Strict mode helps to prevent errors by making previously acceptable "bad" code throw exceptions. It assists in avoiding common JavaScript pitfalls, and thus, increases the quality of your code.

How to Enable Strict Mode?​

To enable strict mode in TypeScript, you simply need to add a "strict": true flag in your tsconfig.json file, like this:

{
    "compilerOptions": {
        "strict": true,
    }
}

Features of Strict Mode​

When you enable strict mode, TypeScript compiler enables a wide range of type checking behavior to catch more potential issues. Here are some main features of strict mode:

  1. No Implicit Any: TypeScript will throw an error if it finds any variables whose type is implicitly 'any'.

  2. Null and Undefined Are Not Ignored: In strict mode, null and undefined are treated as distinct types.

  3. No Implicit Returns: If a function has a return type and the function has a code path that does not return a value, TypeScript will throw an error.

  4. No Implicit this: When a function is called, TypeScript will throw an error if it can’t figure out the type of this.

Common Errors and Their Solutions​

Error: Variable 'x' implicitly has type 'any'​

This error indicates that you have a variable that TypeScript cannot infer a type for, and it defaults to 'any'. To fix this error, provide a type for the variable.

// Incorrect
let x;

// Correct
let x: number;

Error: Object is possibly 'null' or 'undefined'​

This error means that you're trying to access a property on a value that could be null or undefined. To fix this error, you need to check the value before accessing its property.

// Incorrect
let x = document.getElementById("myId").value;

// Correct
let element = document.getElementById("myId");
let x = element ? element.value : null;

Conclusion​

Using strict mode in TypeScript is a best practice that can help you catch and avoid many common JavaScript errors. It may seem more complicated at first, but the benefits of writing cleaner, more robust code far outweigh the initial learning curve. So, start using strict mode and take your TypeScript skills to the next level.