Typescript error This condition will always return 'true' since the types have no overlap

Question

I having this condition on a form group:

if((age>17 && (this.frType=="Infant")) 
|| (age>40 && this.frType=="Grandchild")
|| (age<=5 && 
   (this.frType!="Child" 
   || this.frType!="Infant" 
   || this.frType!="Grandchild" || this.frType!="Cousin")))

It contain 3 main conditions:

1. If a person aged 17, cannot be set to infant
2. If a person is bigger than 40, he cannot be a grandchild
3. If a person is less than 5 years, he should be child, infant, grandchild or cousin.

If one of these conditions is true, I will send an error message.

The error I am receiving is:

[ts] This condition will always return 'true' since the types '"Child"' and '"Infant"' have no overlap. [2367]

On this part of the if condition`:

|| this.frType!="Infant" || this.frType!="Grandchild" || this.frType!="Cousin")))

I am using the exact condition in a different component, and it does not show an error.

if((age>17 && (this.family_relation_type=="Infant")) 
|| (age>40 && this.family_relation_type=="Grandchild")
|| (age<=5 && 
   (this.family_relation_type!="Child" || 
    this.family_relation_type!="Infant" || 
    this.family_relation_type!="Grandchild" || 
    this.family_relation_type!="Cousin")))

Here is how I am calculating the age in both components:

let timeDiff = Math.abs(Date.now() - this.formGroup.controls['dob'].value);
let age = Math.floor((timeDiff / (1000 * 3600 * 24))/365);

Answer 1

Consider the standalone expression:

(this.frType!="Child" || this.frType!="Infant")

If frType is Child, the second part will be true, so the expression will evaluate to true. If frType is Infant, then the first part will be true, so the expression will evaluate to true. If frType is neither Child nor Infant, then the first part will be true, and the expression will, again, evalute to true - the logic is faulty, it'll always resolve to true.

(If you add additional || conditions for Grandchild and Cousin, the same thing keeps happening - it'll always resolve to true)

Either use && instead:

|| (age<=5 && (
   this.frType!="Child" 
   && this.frType!="Infant" 
   && this.frType!="Grandchild"
   && this.frType!="Cousin"
 ))

Or, to make the logic easier to follow, you might consider using an array, and use .includes:

const kidsFiveAndUnder = ['Child', 'Infant', 'Grandchild', 'Cousin'];
// ...
|| (age <= 5 && !kidsFiveAndUnder.includes(this.frType))

Answer 2

Maybe i can help someone with this.

In my case the error was triggered by:

*ngIf="fooArray.length === 0"

so i modified it to be:

*ngIf="fooArray.length < 1"

Makes no sense to me, but it works.