remove duplication from react typescript interfaces

Question

I have the following interfaces:

export interface AsyncRouteComponent<Props> extends React.Component<Props, AsyncRouteComponentState> {
  getInitialProps: ({ assets, data, renderPage }: DocumentProps) => any;
  load: () => Promise<React.ReactNode>;
}

export interface AsyncRouteComponentClass<Props> extends AsyncRouteComponent<Props> {
  new (props: Props): AsyncRouteComponent<Props>;
  getInitialProps: ({ assets, data, renderPage }: DocumentProps) => any;
  load: () => Promise<React.ReactNode>;
}

export interface AsyncRouteStateless<Props> extends AsyncRouteComponent<Props> {
  (props: Props): AsyncRouteComponent<Props>;
  getInitialProps: ({ assets, data, renderPage }: DocumentProps) => any;
  load: () => Promise<React.ReactNode>;
}

They all have getInitialProps and load but are different in what they extend.

How can I reduce the duplication in these interfaces?

Matt McCutchen · Accepted Answer · 2018-08-30 19:15:33Z

1

Just move the common methods to a separate interface that is extended by all of your interfaces:

interface Common { 
  getInitialProps: ({ assets, data, renderPage }: DocumentProps) => any;
  load: () => Promise<React.ReactNode>;
}

export interface AsyncRouteComponent<Props> extends Common, React.Component<Props, AsyncRouteComponentState> { }

export interface AsyncRouteComponentClass<Props> extends Common, AsyncRouteComponent<Props> {
  new (props: Props): AsyncRouteComponent<Props>;
}

export interface AsyncRouteStateless<Props> extends Common, AsyncRouteComponent<Props> {
  (props: Props): AsyncRouteComponent<Props>;
}

answered Aug 30, 2018 at 19:15

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

remove duplication from react typescript interfaces

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related