TypeScript Class Implements Interface with Union Type Field results in Error (2322)

Question

I don't understand why the error 2322 is occurring.

Please examine the following code snippet:

interface Fish {
  alive: string | boolean;
}

class FishClass implements Fish {
  alive  = 'Yes'

  constructor() {
    // Type 'boolean' is not assignable to type 'string'.(2322)
    this.alive = true; 
  }
}

The interface defines the union type for string | boolean.

Why is the type fixed when I assigned one of the two possible types to the field inside the class that implements the interface?

Answer 1

Despite most people's expectations, class members are not contextually typed by the types they are declared to implement or extend. An extends or implements declaration on a class has no effect whatsoever on the type of the class instance. Instead, it just does a check of the class against the superclass or interface after the fact. So if your class fails to implement or extend what you've declared it to, you'll get a compiler warning. But when it comes to the resulting types, it will be the same as if you removed the extends or implements clause entirely. No, nobody likes this.

See microsoft/TypeScript#3667 for the original request to fix this, and there was an attempt at microsoft/TypeScript#6118 but it was eventually abandoned due to some problems with existing libraries; see this comment . There are several open issues about this, including microsoft/TypeScript#32082 ; if you want to see this addressed you might want to go to that issue and give it a, but for now we just have to live with the fact that class Foo implements Bar {/*...*/} has the same implications for the type of Foo as class Foo {/*...*/} does.

---

In your case, that means class FishClass implements Fish {/*...*/} acts exactly like class FishClass {/*...*/} when it comes to how the members are inferred. Since the alive property is initialized with a string value of "Yes" , the compiler infers it to be of type string . And later when you assign true to it, that's an error because you can't assign a boolean to a string . Note that string is assignable to string | boolean string | boolean , so the check on FishClass implements Fish succeeds; you are allowed to narrow properties of subtypes.

The right way to deal with this for now is to manually annotate the field with the desired type:

class FishClass implements Fish {
   alive: string | boolean = 'Yes'; // okay

   constructor() {
      this.alive = true; // okay
   }
}

Playground link to code