This condition will always return 'false' since the types have no overlap

This condition will always return 'false' since the types have no overlap #

The error "This condition will always return 'false' since the types have no overlap" occurs when a condition is guaranteed to have the same outcome 100% of the time. To solve the error, correct the logic in the condition or use a type assertion if TypeScript is getting confused.

Here are 3 examples of how the error occurs.

Copied!
const num = 30;
const str = '30';

// ⛔️ Error: This condition will always return
// 'false' since the types 'number' and 'string' have no overlap.ts(2367)
if (num === str) {
  console.log('success');
}

// ---------------------------------------------------------

const str2 = 'hello';

// ⛔️ Error: This condition will always return 'false'
// since the types '"hello"' and '"bye"' have no overlap.ts(2367)
if (str2 === 'hello' && str2 === 'bye') {
  console.log('success');
}


// ---------------------------------------------------------

export enum Sizes {
  Small = 'S',
  Medium = 'M',
  Large = 'L',
}

let size: Sizes = Sizes.Medium;

[1, 2].forEach((_) => {
  size = Sizes.Large;
});

console.log(size); // 👉️ "L"

// ⛔️ Error: This condition will always return 'false' since
// the types 'Sizes.Medium' and 'Sizes.Large' have no overlap.ts(2367)
if (size === Sizes.Large) {
  console.log('success');
}

In the first example, we are trying to compare two values of a different type which is guaranteed to return false.

This is the cause of the error:

• "This condition will always return false" means that the logic in the condition will never evaluate to true, so the condition block is never going to run
• "This condition will always return true" means that the logic in the condition will always evaluate to true and the condition block is guaranteed to run

To solve the error:

1. Make sure you are comparing values of compatible types
2. console.log the values in the condition
3. Make sure the outcome of the condition is not the same 100% of the time

Copied!
const num = 30;
const str = '30';

if (num === Number(str)) {
  console.log('success');
}

In the second example, we got the error because we used the logical AND (&&) operator, instead of the logical OR (||) operator.

Copied!
const str2 = 'hello';

// ⛔️ Error: This condition will always return 'false'
// since the types '"hello"' and '"bye"' have no overlap.ts(2367)
if (str2 === 'hello' && str2 === 'bye') {
  console.log('success');
}

The str2 variable cannot possibly have a value of hello and bye at the same time, so the condition is always going to return false.

To solve the error in this situation, we have to use the logical OR (||) operator.

Copied!
const str = 'hello';

if (str === 'hello' || str === 'bye') {
  console.log('success'); // 👉️ this runs
}

1. Logical OR (||) returns value to right if value to left is falsy, otherwise it returns value to left

2. Logical AND (&&) returns value to the left if it's falsy, otherwise it returns the value to the right

However, in some cases the issue is not in our code, but with limitations in the TypeScript compiler.

Copied!
export enum Sizes {
  Small = 'S',
  Medium = 'M',
  Large = 'L',
}

let size: Sizes = Sizes.Medium;

[1, 2].forEach((_) => {
  size = Sizes.Large;
});

console.log(size); // 👉️ "L"

// ⛔️ Error: This condition will always return 'false' since
// the types 'Sizes.Medium' and 'Sizes.Large' have no overlap.ts(2367)
if (size === Sizes.Large) {
  console.log('success');// 👉️ this runs
}

The code snippet above shows that the size variable gets set to Sizes.Large in the forEach() method, but TypeScript doesn't know about it.

In this case, the easiest way to solve the error is to use a type assertion.

Copied!
export enum Sizes {
  Small = 'S',
  Medium = 'M',
  Large = 'L',
}

let size: Sizes = Sizes.Medium;

[1, 2].forEach((_) => {
  size = Sizes.Large;
});

console.log(size); // 👉️ "L"

// ✅ Use type assertion
if ((size as Sizes) === Sizes.Large) {
  console.log('success'); // 👉️ this runs
}

We used a type assertion to type the size variable as Sizes.

By using a type assertion, we effectively tell TypeScript - the size variable is guaranteed to have a type of Sizes, so don't worry about it.

We could have also used a type assertion when declaring the size variable.

Copied!
export enum Sizes {
  Small = 'S',
  Medium = 'M',
  Large = 'L',
}

// 👇️ Use type assertion here 👇️
let size: Sizes = Sizes.Medium as Sizes;

[1, 2].forEach((_) => {
  size = Sizes.Large;
});

console.log(size); // 👉️ "L"

if (size === Sizes.Large) {
  console.log('success'); // 👉️ this runs
}

This is perhaps a bit better in this case, because we wouldn't have to repeat ourselves every time we use the size variable in a comparison.

In this case, we solved the error by convincing TypeScript that the condition is not guaranteed to have the same outcome 100% of the time.