I'm uncertain whether this issue in TypeScript is a bug or intended functionality. In my Angular project, I have 3 classes - an abstract service, a service that implements the abstract service, and a component that utilizes the implementing service.
To simplify, the structure of my classes is as follows:
export abstract class BaseApiService {
constructor() { }
protected abstract baseUrl: string;
export class LogApiService extends BaseApiService {
baseUrl = environment.apiBaseUrl;
constructor() { }
}
export class LogPageComponent implements OnInit {
constructor(private logApiService: LogApiService) { }
ngOnInit(): void {
this.logApiService.baseUrl = 'why can I change this?';
}
}
By using the protected keyword on the baseUrl property in BaseApiService, one would expect the property to be mutable in LogApiService but immutable in LogPageComponent. However, this is not the case. The code in the ngOnInit function of LogPageComponent compiles and runs without any issues.
Adding the protected keyword within LogApiService can prevent LogPageComponent from altering LogApiService's baseUrl property like so:
protected baseUrl = environment.apiBaseUrl;It seems like a potential oversight that the protected keyword needs to be added in both BaseApiService and LogPageComponent. Could this behavior be intentional, or should it be raised as a bug on Github in the TypeScript repository?