为现有HOC编写声明d.ts文件

Question

I'm having problem with writing a d.ts file for a HOC component: with-apollo-client.js wraps an component to inject a prop in. It is something like this:

export default App => {
  return class Apollo extends React.Component{
    render(){
       // code to get apolloClient variable omitted

       <Apollo client={apolloClient}>
    }
  }
}

To use it, we just do:

import withApolloClient from './with-apollo-client'
...
export default withApolloClient(App)

And in with-apollo-client.d.ts

import { ApolloClient } from 'apollo-boost';

export interface WithApolloClient {
    apolloClient: ApolloClient<any>;
}

export default <P extends WithApolloClient>(App: React.ComponentType<P>) => {
    return class Apollo extends React.Component<P> {};
};

And TS is complaining:

`Type '{ id: string; }' is not assignable to type 'Readonly<Props>'.
  Property 'apolloClient' is missing in type '{ id: string; }'.`

Answer 1

You need to remove the interface WithApolloClient from your returned React.Component. Otherwise it will expect an apolloClient as prop. Something like this should work:

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
type Subtract<T, K> = Omit<T, keyof K>;

export default <P extends WithApolloClient>(App: React.ComponentType<P>) => {
  return class Apollo extends React.Component<Subtract<P, WithApolloClient>> {};
};