从react typescript接口中删除重复

Question

我有以下接口：

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>;
}

他们都有getInitialProps和load，但他们扩展的不同。

如何减少这些界面中的重复？

Answer 1

只需将常用方法移动到由所有接口扩展的单独接口：

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>;
}