Assuming I have the interfaces provided below:
export interface IUserRow {
id: string,
state: string,
email: string,
}
export interface ITableRow {
id: string,
[key: string]: any;
}
export type Rows = ITableRow | IUserRow; // additional row types like IPostRow may be included in the future
Now, while working on mapping a table,
const instanceOfUser = (object: any): object is IUserRow => 'member' in object;
const determineOnRowClick = (row: Rows, onRowClick: any) => {
if (instanceOfUser(row)) {
// This condition is not fulfilled and 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}
>
. . .
I am trying to programmatically determine the onRowClick method, but the conditional statement,
if (instanceOfUser(row)) {
. . .
is never met. Is this achievable with TypeScript by declaring the current element in the map function as an element that could belong to multiple interfaces? If so, what approach should I take?