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