compose<any> how sould I type this stuff?

Question

I got question for you! I migrate my entier App on typeScript but got some difficulties with compose function ... (no worries for this other any I already fix then except the compose())

With compose(...) (without 'any') I get the following :

No overload matches this call. Overload 1 of 2, '(props: Readonly): Route', gave the following error. Type 'unknown' is not assignable to type 'ComponentClass | FunctionComponent | ComponentClass, any> | FunctionComponent<...> | undefined'. Type 'unknown' is not assignable to type 'FunctionComponent>'. Overload 2 of 2, '(props: RouteProps, context?: any): Route', gave the following error. Type 'unknown' is not assignable to type 'ComponentClass | FunctionComponent | ComponentClass, any> | FunctionComponent<...> | undefined'. Type 'unknown' is not assignable to type 'FunctionComponent>'. TS2769

That's why I would like to replace it and type it.

this is my code:

/container.ts

//@ts-ignore
import { connect } from "react-redux";
import { compose, AnyAction, Dispatch } from "redux";
import { withRouter } from "react-router-dom";
import { getProfile, updateProfile } from "../../../services/clients/user";
import { updateUserInitial } from "../../../actions/initialUser";
import { IStoreState } from "../../typeScriptInclude";
import { ThunkDispatch } from "redux-thunk";
import { Profile } from "./component/utilities/includeTypeScript";
import { IEditAccountProps as Props } from './component/EditAccount';

interface IupDateWalterInitailUserPropsType {
  walterUser: {
    first_name: string;
    last_name: string;
  };
}

interface IMapStateToProps{
  isConnect: boolean;
  walterUser: any;
  upDateProfile: any;
}

interface IMapDispatchToProps{
  upDateWalterInitailUser: any;
}

const mapStateToProps = (state: IStoreState): IMapStateToProps => {
  return {
    isConnect: state.isConnect,
    walterUser: getProfile(),
    upDateProfile: (data: Profile) => updateProfile(data)
  };
};

type ApplicationDispatch = ThunkDispatch<IStoreState, void, AnyAction> &
  Dispatch;

const mapDispatchToProps = (
  dispatch: ApplicationDispatch,
): IMapDispatchToProps => ({
  upDateWalterInitailUser: (form: IupDateWalterInitailUserPropsType) =>
    dispatch(updateUserInitial(form))
});

export default compose<any>(
  withRouter,
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
);

/index.ts

import EditAccount from "./component/EditAccount";
import container from './container';

export default container(EditAccount);

The things is I tried a lot of thing to type it, but nothing to do... I tried

// Which props define our new component : IProps - IInjectedProps
type ContainerProps = Omit<Props, keyof InjectedProps>;

export default compose<Props, ContainerProps>(
  withRouter,
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
);

I take off withRouter but I get the following :

Expected 2 arguments, but got 1. TS2554

Obviously but Why it's not working with my first solution... need to understand

Thx everyone best regards.

I think you should apply the composed function on a component. What component are you trying to connect here? — giotskhada
Are you getting a syntax error when you just do compose(...)? If so, what's the error? If not, why do you want to type it? — giotskhada
My bad I don't understand what you mean at first but I get : No overload matches this call. Overload 1 of 2,... Type 'unknown' is not assignable to type 'ComponentClass<any, any> | FunctionComponent<any> | ComponentClass<RouteComponentProps<any, StaticContext, PoorMansUnknown>, any> | FunctionComponent<...> | undefined'. Type 'unknown' is not assignable to type 'FunctionComponent<RouteComponentProps<any, StaticContext, PoorMansUnknown>>'. TS2769 — user8930944

giotskhada giotskhada · Accepted Answer · 2020-03-09T16:17:17

That's a connect problem, not compose. As I recall, there is a mismatch in the react versions in node_modules/@types. react-redux types folder has it's own node_modules in it and reads react types from it. It's a different version than the actual react folder in the root node_modules. So, what happens is, ComponentClass type is read from two different .d.ts files and get mismatched, hence the error.

You can @ts-ignore the connect lines and forget about it. That wasn't very appealing to me, so what I did (although it's a hack and a little tidious) was I deleted the node_modules from both root/node_modules/@types/react-native and root/node_modules/@types/react-redux. Doing so, enabled tslint to read the types from the same file from root/node_modules/@types/react. It fixes the problem, but each time you install or uninstall a package, those node_modules show up again. You'll have to delete those each time (I have a cmd batch file for that). Hope this helps.

compose<any> how sould I type this stuff?

1 Answers