Borislav Hadzhiev
Sat Mar 19 2022·3 min read
Photo by Raphael Rychetsky
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.
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:
true
, so the condition block is never going
to runtrue
and the condition block is guaranteed to runTo solve the error:
console.log
the values in the conditionconst 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.
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.
const str = 'hello'; if (str === 'hello' || str === 'bye') { console.log('success'); // 👉️ this runs }
Logical OR (||) returns value to right if value to left is falsy, otherwise it returns value to left
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.
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.
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.
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.