typescript，check the type of object, typeof get compile error

Issue

with this code

export default class App {
  el: HTMLElement;
  constructor(el: string | HTMLElement) {
    if (typeof el === "string") {
      this.el = document.getElementById(el);
    }
    if (typeof el === typeof this.el) {
      this.el = el;
    }
  }
}

get compile error info:
Type 'string | HTMLElement' is not assignable to type 'HTMLElement'. Type 'string' is not assignable to type 'HTMLElement'.ts(2322)

changed code like as follow ,will get no error info:

export default class App {
  el: HTMLElement;
  constructor(el: string | HTMLElement) {
    if (typeof el === "string") {
      this.el = document.getElementById(el);
    }
    if (el instanceof HTMLElement) {
      this.el = el;
    }
  }
}

i'm confused, they should both get error or both get worked.

Solution

The error is clear, the typeof el returns one of "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" type at runtime.

At TS compiler time, typeof becomes a type guard, TS will narrow the type to string | HTMLElement. But the instance props this.el is just HTMLElement.

You should narrow the type of el to HTMLElement, so you need to check it's not string type.

instanceof type guards are a way of narrowing types using their constructor function.

el instanceof HTMLElement statement will narrow the type of el to HTMLElement which can be assigned to this.el.

class App {
    el: HTMLElement | null = null;
    constructor(el: string | HTMLElement) {
        if (typeof el === "string") {
            this.el = document.getElementById(el);
        }
        if (typeof el === typeof this.el && typeof el !== 'string') {
            this.el = el;
        }
    }
}

TypeScript Playground

Answered By - slideshowp2