TypeScript Strict Mode

Strict mode in TypeScript is a set of type-checking rules that provide more thorough checks during development, aiming to catch errors early and ensure that the code adheres to more stringent standards. Enabling strict mode increases the safety and robustness of your TypeScript code, particularly in larger projects.

Think of strict mode as a "safety net" that prevents you from making common mistakes that the JavaScript engine would normally ignore until your app crashes in production. When strict mode is enabled, TypeScript applies a series of additional checks that prevent certain potentially unsafe or ambiguous coding practices.

Key Features of Strict Mode

noImplicitAny

• This setting prevents TypeScript from inferring the any type for variables or function parameters without an explicit type declaration.
• Benefit: Helps avoid loose typing and makes the code more predictable. Without this, you lose the benefits of TypeScript because "any" effectively turns off type checking.
• Example:

// With noImplicitAny: true
function logData(data) { // Error: Parameter 'data' implicitly has an 'any' type.
  console.log(data);
}

strictNullChecks

• This ensures that null and undefined are not assignable to any other type, except for null or undefined themselves. In standard JavaScript, accessing a property on a null object is a common cause of crashes.
• Benefit: Helps avoid "Uncaught TypeError: Cannot read property of null" errors at runtime.
• Example:

let name: string = "Alice";
name = null; // Error: Type 'null' is not assignable to type 'string'.

// Real-world scenario: Fetching a user from an array
const users = ["Alice", "Bob"];
const foundUser = users.find(u => u === "Charlie"); 
// Without strict checks, TypeScript might think 'foundUser' is a string.
// With strict checks, it correctly identifies it as 'string | undefined'.

noImplicitThis

• In strict mode, the this keyword must be explicitly typed in functions and methods. TypeScript will raise an error if it cannot infer the type of this.
• Benefit: Helps avoid confusion about the context of this, which is a notorious source of bugs in JavaScript.
• Example:

class Box {
  width: number = 10;
  
  getAreaFunction() {
    return function() {
      return this.width * this.width; // Error: 'this' implicitly has an 'any' type.
    };
  }
}

alwaysStrict

• Ensures that your code is always parsed in strict mode, even if it's not explicitly set in the file. It also adds "use strict"; to the top of your generated JavaScript files.
• Benefit: Ensures that your codebase is always treated with strict type-checking regardless of the source and enables JS engine optimizations.
• Example:

"compilerOptions": {
  "alwaysStrict": true
}

noUnusedLocals

• Flags any variables that are declared but not used in the code.
• Benefit: Helps clean up unused code and avoid unnecessary declarations, keeping your bundle size smaller and code cleaner.
• Example:

function createPoint(x: number, y: number) {
  let z = 10; // Error: 'z' is declared but never used.
  return { x, y };
}

noUnusedParameters

• Flags function parameters that are declared but never used inside the function body.
• Benefit: Helps clean up functions and prevent unnecessary parameters that might confuse other developers.
• Example:

function add(a: number, b: number) {
  return a + 5; // Error: Parameter 'b' is unused.
}

strictFunctionTypes

• Enforces that function types are checked more strictly, especially when it comes to the covariance of arguments.
• Benefit: Ensures that functions with mismatched argument types raise an error, preventing you from passing a function that expects more specific data than what will be provided.
• Example:

let f1: (a: number) => void = (a) => {}; 
let f2: (a: string) => void = (a) => {}; 
f1 = f2; // Error: Type '(a: string) => void' is not assignable to type '(a: number) => void'.

noImplicitReturns

• This ensures that all paths through a function have an explicit return statement if the function is expected to return a value.
• Benefit: Prevents accidental undefined returns when a condition isn't met.
• Example:

function getScore(points: number): string {
  if (points > 50) {
    return "Pass";
  }
  // Error: Function lacks return type annotation and has an implicit return.
  // We forgot to handle the "else" case!
}

noFallthroughCasesInSwitch

• This prevents fall-through behavior in switch statements, where code inadvertently runs into the next case because a break or return was forgotten.
• Benefit: Avoids logic bugs from unintended fall-through.
• Example:

switch (status) {
  case "pending":
    console.log("Loading...");
    // Error: Fallthrough case in switch.
  case "done":
    console.log("Finished!");
    break;
}

Enabling Strict Mode

Strict mode can be enabled globally by setting "strict": true in the tsconfig.json file. This turns on all strict checks, including the options mentioned above. You can also enable individual strict checks by setting specific compiler options.

Example of Enabling Strict Mode in tsconfig.json:

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

Alternatively, you can enable individual strict options like this:

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitThis": true,
    "strictFunctionTypes": true
  }
}

Summary

Strict mode in TypeScript enables a suite of type-checking rules that help catch potential errors early, improve code quality, and make the codebase safer and easier to maintain. By enabling strict mode, you ensure better handling of types, null values, unused variables, and function signatures. This makes TypeScript a more powerful tool for large-scale applications, promoting better development practices and reducing the chances of runtime errors. While it might feel restrictive at first, it ultimately saves you time by catching bugs before they ever reach your users.