ESLint Rule to Enforce Explicit Null and Undefined Checks in TypeScript

Working with TypeScript offers developers strong tools to enhance code reliability. However, without proper conventions, mistakes like implicit null or undefined checks can slip through unnoticed. ESLint, a powerful linting tool, plays a crucial role in catching these subtle issues before they escalate into runtime bugs.

Why Explicit Null and Undefined Checks Matter

In JavaScript and TypeScript, developers often rely on truthy and falsy checks to handle values. While quick and handy, these implicit falsy checks can lead to unexpected behaviors.

For example, let’s consider this common scenario:

function displayValue(value: string | null | undefined) {
  if (!value) {
    console.log("Value is empty.");
  } else {
    console.log(`Value: ${value}`);
  }
}

displayValue("");
displayValue(0);
displayValue(null);
displayValue(undefined);

Here, the check if (!value) can unintentionally treat empty strings (“”) and zeroes (0) the same as null or undefined values. While this may seem insignificant initially, it becomes problematic in real-world projects where clarity matters.

Explicit checks, however, immediately communicate intent clearly:

if (value !== null && value !== undefined) {
  console.log(`Value: ${value}`);
} else {
  console.log("Value is null or undefined.");
}

This simple adjustment clearly differentiates null and undefined checks from falsy values like “” or 0, improving readability and reducing confusion.

Implicit checks might be concise, but they can cause issues when dealing with numbers, boolean flags, or empty strings. An explicitly written check is always crystal clear to anyone reading your code in the future (including yourself).

Introducing ESLint’s Explicit Null and Undefined Checks Rule

Given this commonly occurring issue, an ESLint rule was devised specifically for enforcing explicit null and undefined checks. This rule demands that developers avoid implicit falsiness checks and instead provide explicit conditions for null or undefined.

Consider a problematic snippet again:

if (!data) {
  fetchData();
}

When using ESLint’s explicit null and undefined checks rule, you’ll receive an error highlighting that this implicit falsy check can cause confusion. ESLint will recommend changing the snippet explicitly:

if (data === null || data === undefined) {
  fetchData();
}

This small but crucial change prevents bugs and ensures code explicitly reflects its intent.

Why Implementing Explicit Checks Will Benefit You

Explicit null and undefined checks, reinforced by ESLint rules, can significantly improve your TypeScript code quality for several key reasons:

• Enhanced clarity: Developers can quickly grasp the intention and logic behind each condition.
• Prevents subtle bugs: Reducing ambiguous conditions helps catch potential runtime errors early in development cycles.
• Improved readability: Easier to understand for junior developers or teammates reviewing your code.

Maintaining clear and explicit coding practices keeps large TypeScript projects manageable and reduces time spent debugging.

Exploring Existing Solutions and ESLint Alternatives

While TypeScript’s strict null checking (strictNullChecks) option addresses null values directly in the build stage, runtime conditions still need explicit attention and checks.

Thankfully, ESLint has a well-known rule available to handle this explicitly:

• @typescript-eslint/strict-boolean-expressions: (documentation link) This rule enforces explicit handling of boolean expressions, null, undefined, and avoids implicit falsiness checks.

To add this rule to your project, follow these steps:

1. Install ESLint dependencies (if you haven’t already):

   npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. In your ESLint configuration (.eslintrc.json), enable the rule:

   {
     "parser": "@typescript-eslint/parser",
     "plugins": ["@typescript-eslint"],
     "rules": {
       "@typescript-eslint/strict-boolean-expressions": ["error", {
         "allowNullable": false,
         "allowString": false,
         "allowNumber": false
       }]
     }
   }
   

3. Run ESLint to see rule violations and correct them accordingly.

Welcoming Recommendations and Community Improvements

While the ESLint community regularly maintains and updates these linting practices, there’s always room for feedback and improvement. Analyzing the efficacy of rules within your own project reveals real-world scenarios ESLint might not yet cover comprehensively.

Engaging in online communities like Stack Overflow or ESLint’s GitHub repository (typescript-eslint) not only aids in discovering how fellow developers solve related challenges but also allows contributing back recommendations or suggestions for improvements.

If you’ve implemented this rule or similar strategies, sharing your experience helps refine ESLint toolsets and practices for everyone.

Establishing Quality Code Through Explicit ESLint Practices

Understanding and explicitly differentiating between null, undefined, and falsy values undoubtedly improves TypeScript readability, clarity, and reliability. Implementing ESLint rules such as “@typescript-eslint/strict-boolean-expressions” offers clear guidelines, fewer bugs, and easier maintenance.

To enhance your existing JavaScript and TypeScript knowledge, explore other helpful ESLint articles in the JavaScript category of our blog.

Keeping your code explicit eliminates tiny oversights that may initially seem insignificant but can eventually translate into significant bugs in critical systems.

What practices or enhancements do you currently use to manage explicit null and undefined checks in your projects? We’d love to hear your experiences and insights in the comments!