javascript - Identifier 'X' is not defined. 'Y' does not contain such a member

Question

I have the following interface and I can pass its parameter values to the base component. However, although I could pass string values without any problem, I cannot pass boolean values and encounter "Identifier 'isDisabled' is not defined. 'CustomButton' does not contain such a member" error.

export interface CustomButton {
    name: string;
    operation: string;
    tooltip: string;
    isDisabled?: boolean;
}

On the other hand, I set the default value of isDisabled in a component from that I call the base component:

buttons: CustomButton[];
isEmployeeDisabled = false; // set the value while defining variable

this.buttons = [
  {
    name: 'edit',
    tooltip: 'Edit Employee',
    operation: 'Delete',
    isDisabled: this.isEmployeeDisabled
    // isDisabled: true // if I use like this, it works fine but still gives that error
  }
];  

I could not find why isDisabled is not known property. How can I fix this problem?

Answer 1

Trying with Stackblitz in hand gives me this error:

Type '{name: string; tooltip: string; operation: string; isDisabled: boolean; } 'is not assignable to type' CustomButton '.
Object literal may only specify known properties, and 'operation' does not exist in type 'CustomButton'.

The problem is that the operation property in the interface is missing.

https://stackblitz.com/edit/angular-ngclass-off-props?file=src%2Fapp%2Fapp.component.ts