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

从React TypeScript接口中删除重复项

1 个答案: