How is it possible for TypeScript to permit an inaccurate comparison like boolean === undefined?

Question

How is it possible for TypeScript to permit an inaccurate comparison like boolean === undefined?

Encountering the peculiar behavior of TS.

const isItLanding = false;

if (isItLanding === undefined) { // valid
  return ...;
}

However, in this instance

const isItLanding = 1;

if (isItLanding === 'undefined') { // error
  return ...;
}

Why does TS not prevent writing incorrect comparisons? And what steps can be taken to modify this behavior?

The configuration of my TS appears as follows:

{
  "compilerOptions": {
    "strict": true,
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "importsNotUsedAsValues": "error",
    "allowSyntheticDefaultImports": true,
    "incremental": true,
    "tsBuildInfoFile": ".next/cache/.tscache/",
    "jsx": "preserve",
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"],
      "test-utils": ["./src/client/test-utils"]
    }
  },
  "exclude": ["node_modules", "cypress"]
}

javascript typescript eslint typescript-typings tslint

Answer 1

Answer №1

Answer: TypeScript permits comparison of any type with "null" or "undefined" intentionally

This is permitted because boolean can be undefined

In TypeScript, a boolean can have four possible values: true, false, undefined, and null. This means that there are scenarios where the comparison could indeed evaluate to true.

let bool: boolean = true;
bool = false;
bool = null;
bool = undefined;
//All of these assignments compile without an issue

if(bool === undefined){
   console.log("You will see this message!");
}

How can you restrict boolean to only true or false?

In your TypeScript configuration, you can enable the flag strictNullChecks to true. This setting ensures that both undefined and null are considered during type checking. Once this flag is activated, the previously mentioned code will result in errors.

let bool: boolean = true;
bool = false;
bool = null; //Error > Type 'null' is not assignable to type 'boolean'.
bool = undefined; //Error > Type 'undefined' is not assignable to type 'boolean'.

Why does the ability to compare with null or undefined still exist after changing the flag?

Consider the following code snippet:

const bool: boolean = false;

if(bool === undefined){
   console.log("I am undefined!");
}
if(bool === null){
   console.log("I am null!");
}

console.log("Did it compile?");

Why do neither of these if statements produce an error, even though they are always false?

The reason might disappoint some, but it's simply this: TypeScript was intentionally designed to allow comparisons between any type and "null" or "undefined". It serves the purpose of defensive programming. While this behavior could change in the future if there is significant demand, personally, I doubt it ever will.

if(12 === undefined){
   console.log("Seems impossible, right?");
}
if("ab" === null){
   console.log("It will never be true!");
}
if(false === undefined){
   console.log("Absolutely not");
}

/*
if(12 === "ab") 
^this would throw an error as comparison between different types is only allowed with null and undefined
*/

console.log("Yet, it will still compile");

Answer 2

Answer: TypeScript permits comparison of any type with "null" or "undefined" intentionally

This is permitted because boolean can be undefined

In TypeScript, a boolean can have four possible values: true, false, undefined, and null. This means that there are scenarios where the comparison could indeed evaluate to true.

let bool: boolean = true;
bool = false;
bool = null;
bool = undefined;
//All of these assignments compile without an issue

if(bool === undefined){
   console.log("You will see this message!");
}

How can you restrict boolean to only true or false?

In your TypeScript configuration, you can enable the flag strictNullChecks to true. This setting ensures that both undefined and null are considered during type checking. Once this flag is activated, the previously mentioned code will result in errors.

let bool: boolean = true;
bool = false;
bool = null; //Error > Type 'null' is not assignable to type 'boolean'.
bool = undefined; //Error > Type 'undefined' is not assignable to type 'boolean'.

Why does the ability to compare with null or undefined still exist after changing the flag?

Consider the following code snippet:

const bool: boolean = false;

if(bool === undefined){
   console.log("I am undefined!");
}
if(bool === null){
   console.log("I am null!");
}

console.log("Did it compile?");

Why do neither of these if statements produce an error, even though they are always false?

The reason might disappoint some, but it's simply this: TypeScript was intentionally designed to allow comparisons between any type and "null" or "undefined". It serves the purpose of defensive programming. While this behavior could change in the future if there is significant demand, personally, I doubt it ever will.

if(12 === undefined){
   console.log("Seems impossible, right?");
}
if("ab" === null){
   console.log("It will never be true!");
}
if(false === undefined){
   console.log("Absolutely not");
}

/*
if(12 === "ab") 
^this would throw an error as comparison between different types is only allowed with null and undefined
*/

console.log("Yet, it will still compile");

Answer 3

Answer №2

After some digging, I stumbled upon the perfect solution in the linter tool found at . It worked like a charm and resolved the issue!

Answer 4

After some digging, I stumbled upon the perfect solution in the linter tool found at . It worked like a charm and resolved the issue!

Answer 5

Answer №3

The intention behind this behavior is deliberate. Detailed discussions can be found at #14764 or #11920.

In essence, the necessity of checking for undefined or null stems from the concept of "defensive programming."

It's important to be able to validate inputs, especially when dealing with values that may come from non-TypeScript sources.

Consider the following function:

function fn(x: string) {
  if (x === undefined) throw new Error('x cannot be undefined');
}

If a JavaScript user were to inadvertently pass an undefined value to this function, having a compile-time error preventing such comparison would be inconvenient.

Answer 6

The intention behind this behavior is deliberate. Detailed discussions can be found at #14764 or #11920.

In essence, the necessity of checking for undefined or null stems from the concept of "defensive programming."

It's important to be able to validate inputs, especially when dealing with values that may come from non-TypeScript sources.

Consider the following function:

function fn(x: string) {
  if (x === undefined) throw new Error('x cannot be undefined');
}

If a JavaScript user were to inadvertently pass an undefined value to this function, having a compile-time error preventing such comparison would be inconvenient.

How is it possible for TypeScript to permit an inaccurate comparison like boolean === undefined?

Answer №1

This is permitted because boolean can be undefined

How can you restrict boolean to only true or false?

Why does the ability to compare with null or undefined still exist after changing the flag?

Why do neither of these if statements produce an error, even though they are always false?

Answer №2

Answer №3

Similar questions

Access all querySelectorAll elements individually without the need for looping through the NodeList

What is the best way to extract data from a jQuery JSON response that is wrapped in an object

What is the process of integrating ES6 modules with app.get in a Node/Express routing application?

Enhancing Efficiency and Optimization with jQuery

Using TypeScript, you can access the constructor of a derived type by calling it with the

Show image stored in Django database on React JS interface

Showing the total quantity of products, reminiscent of a virtual shopping basket

Looking to send an HTTP request to submit a form within a Node.js application to an external website?

Serverless-offline is unable to identify the GraphQL handler as a valid function

Html Showing two objects

How to use JavaScript to loop through and parse JSON data from Google Maps API

Is the epoch date format not compatible with the ngx bootstrap datepicker?

Warning: MaxListenersExceededNotification may occur during the installation or creation of Node.js projects on macOS

transferring data from a web page to a php script seamlessly without navigating away

What is the process for transforming a Binary field from type 4 to type 0?

Having trouble retrieving user data that is being passed as a context value using React's useContext

Caution in Three.JS: Potential WebGL Issue with Texture Mapping in Material Creation

Is the spread operator in React failing to function as anticipated?

How to remove outer quotes from JSON data in Reactjs after using JSON.stringify

What is the best way to display just the selection outcome?