Как отобразить строки таблицы как потенциальные строки различных интерфейсов в машинописи?

Question

Если у меня есть следующие интерфейсы,

export interface IUserRow {
    id: string,
    state: string,
    email: string,
}

export interface ITableRow {
    id: string,
    [key: string]: any;
}

export type Rows = ITableRow | IUserRow; // different row types, such as IPostRow to be added later

И я сопоставляю таблицу,

const instanceOfUser = (object: any): object is IUserRow => 'member' in object;

const determineOnRowClick = (row: Rows, onRowClick: any) => {
  if (instanceOfUser(row)) {
    // never entered, always returns false
    const rowId = row.id;
    const view = row.state === 'Active' ? 'edit' : 'add';

    return onRowClick(rowId, view);
  }

  return onRowClick(row.id);
}
. . .
<TableBody className={tableClasses.tbody}>
  {rows.map((row: Rows, i: number) => (
    <TableRow
      onClick={() => determineOnRowClick(row, onRowClick ?? null)}
      key={row.id || i}
    >
. . .

Я пытаюсь динамически определить метод onRowClick и строка,

if (instanceOfUser(row)) {
. . .

никогда не вводится. Возможно ли это с машинописью, чтобы объявить текущий элемент в методе карты как элемент, который может быть членом более чем одного интерфейса? Если да, то как мне этого добиться?

Answer 1

Попробуйте:

const determineOnRowClick = (row: Rows, onRowClick: any) => {
  if ((row as IUserRow).email) {
    const rowId = row.id;
    const view = row.state === 'Active' ? 'edit' : 'add';
    return onRowClick(rowId, view);
  }

  return onRowClick(row.id);
}

Если для row не установлено email, это будет равно false. Вы должны проверить это, используя ...as IUserRow, чтобы дать знать машинописи, что там может быть атрибут email.