Typescript error; any Property 'button' does not exist on type 'CellDetails | ContentCellUpdate'

Question

I am wanting to check if a property exists on an object, but the property only exists CellDetails not on ContentCellUpdate

Currently I am doing,

if(cell.button)

cell can either by CellDetails or ContentCellUpdate

but I get the error in TS,

Property 'button' does not exist on type 'CellDetails | ContentCellUpdate'. Property 'button' does not exist on type 'ContentCellUpdate'

The interfaces for each look like this,

export interface CellDetails {
  row: number;
  col: any;
  column: any;
  content: ContentCell;
  header: boolean;
  button: ActionsButton | null;
  reference: string;
  history: boolean;
  link: IPageContentLink | null;
  image: boolean;
  isColumnCheckbox: boolean;
  permission: string;
  inputStyles: string;
  cell: HTMLDivElement;
}

and

export interface ContentCellUpdate {
  row: number;
  column: string;
  content: ContentCellFormat;
}

I assume that I could add,

button: ActionsButton | null;

to ContentCellUpdate, but this feels like fixing the symptom rather than the cause? Is there a better way to get around this TS error?

Answer 1

You can use hasOwnProperty() method, your code will be something like this:

if (cell.hasOwnProperty('button')) {

}