How to define that component passed must have certain props but allow extra props too

Question

I am passing a component as a prop.

This is defined as below.

export type TableProps<T> = {
  contents: T[],
  loadContents: () => Promise<T[]>
};

This works fine, but I'd like to update this definition to say, at least above props should exist, but to allow additional props.

Is there a definition I can use to do this. For instance, I'd like a component with the following signature to be accepted.

type Props = {
  onChangeMark: (val: string) => void,
  ...TableProps<Attendance>
};

I've tried defining them as an interface but they are still being rejected.

interface TableProps<T> {
  contents: T[],
  loadContents: () => Promise<T[]>
};

Update

I think this demostrates the issues I am having Link

Update 2

@Rajesh 's solution doesnt seem to work , have tried here

Answer 1

You can try something like this:

interface IDummy {
  value: string;
  propName: string;
  [key: string]: any;
}

What this will do is, it will force you to pass value and propName properties in object but you can have any other properties.

Sample

Answer 2

What I have done in cases like this is to define Props as a union of TableProps and per-component props:

type Props = TableProps<Attendance> & {
  onChangeMark: (val: string) => void
};

In that case I would keep TableProps as an object type, not an interface.

It is also possible to use interfaces if both TableProps and Props are defined as interfaces like this:

interface TableProps<T> {
  contents: T[],
  loadContents(): Promise<T[]>
}

interface Props extends TableProps<Attendance> {
  onChangeMark(val: string): void
}

I think that Flow might have an easier time with the interface solution. But I don't have any particular evidence to back up that hunch.