This condition will always return 'false' since the types 'string[]' and 'string' have no overlap. ts(2367)

Issue

I was playing with Angular today when this error appeared. I read the accepted answer on Typescript error This condition will always return 'true' since the types have no overlap, but I don't know what it means.

Template:

<div class="container">
    Paste your text here: <textarea #count width="150" height="150"></textarea><br>
    <button class="btn btn-dark" (click)=check(count.value)>Count</button>
    <br>
    <p id="result"></p>
</div>

Component:

import { Component, OnInit } from '@angular/core';
// import { checkServerIdentity } from 'tls'; i don't exist!

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  check(text:string) {
    var counts:string[];
    counts = text.split(" ");
    let resultid = document.getElementById("result");
    if (counts === "" /* here error */) {
      // where i left over
    }
  }

}

Error:

This condition will always return \'false\' since the types \'string\[\]\' and \'string\' have no overlap. ts(2367)

Solution

You defined counts yourself as string[], and then you're trying to compare it with an empty string. An array of strings is never equal to any string.

I'm not sure which part you find confusing. The error couldn't be clearer: you're trying to compare an array of strings with a string. These two will never be equal, so the condition counts === "" will always evaluate to false, which is probably a mistake, so TypeScript is rightfully telling you to pay more attention. It doesn't make sense to write a conditional if where the condition is always false -- that code will never run, and therefore you either need to remove the whole block or to change the condition.

Answered By - Lazar Ljubenović