Two key points to consider: Class properties do not inherit typings from classes or interfaces they extend; and readonly properties can be mutually assigned to mutable properties.
Inheriting Typings in Class Properties
When you specify class Foo implements Bar {...}, the compiler does not automatically infer types for Foo's properties based on Bar. Instead, it independently infers the types of Foo's properties and checks them against Bar. This behavior can lead to unexpected results as shown in the following example:
interface Foo {
x: 0 | 1;
}
class Bar implements Foo {
x = 1; // error! x is inferred as number, not 0 | 1
}
This discrepancy arises because x would be inferred simply as number instead of the expected 0 | 1. This issue has been a point of contention among developers, with ongoing discussions requesting improvements. You can refer to microsoft/TypeScript#10570 for more details.
For instance, the name property of PersonImpl is identified as type string rather than being readonly:
class PersonImpl implements Greeting {
name: string; // string, not readonly string
//...
}
Readonly Properties Compatibility
An additional issue surfaces when properties only differ in their readonly status. The TypeScript compiler considers types like {readonly x: string} and {x: string} to be interchangeable without any errors. To delve deeper into this behavior, you can check out this SO answer or view the feature request at microsoft/TypeScript#13347.
Hence, the compiler does not raise an error when PersonImpl's name property allows mutation despite Greeting's readonly specification. These types are deemed compatible by TypeScript.
Combining these factors contributes to the peculiarities observed here. Despite assuming that PersonImpl's name property is readonly, assignments may still occur, causing confusion.
To address this issue and circumvent the inherent limitations of class property inheritance, it's recommended to provide explicit type annotations and modifiers for your properties:
class PersonImpl implements Greeting {
readonly name: string; // annotate with readonly
/* ... */
}
let pers = new PersonImpl("maha");
pers.name = "maha2"; // error
Playground link to code