reactjs - 从反应打字稿接口中删除重复

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但在扩展方面有所不同。

如何减少这些接口中的重复？

标签： reactjstypescript

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