reactjs - Typescript + Recompose - error de tipo en el ciclo de vida
Recientemente empecé a combinar React con TypeScript. Tengo un problema usando el método lifecycle de Recompose. En componentDidMount obtengo un error "Property 'increment' does not exist on type '{}'". Sé que es un problema de tipos, pero no tengo mucha experiencia con TS. ¿Dónde debo agregar los tipos para arreglar esto? Aquí está mi código:
import React, { ComponentType } from 'react';
import { createStore, combineReducers, Store, Action, Reducer } from 'redux';
import { connect } from "react-redux";
import { compose, lifecycle } from 'recompose';
//TYPES
const types = {
INCREMENT: 1,
DECREMENT: 2
};
//ACTION CREATORS
interface InumberAction extends Action {
payload: number;
};
const increment = (num: number): InumberAction => ({
type: types.INCREMENT,
payload: num
});
const decrement = (num: number): InumberAction => ({
type: types.INCREMENT,
payload: num
});
interface IState {
value: number;
};
interface IStore {
state: IState
};
const initialState = {
state: {
value: 0
}
};
//REDUCERS
const stateReducer: Reducer<IState> = (state = { value: 0 }, action) => {
switch (action.payload) {
case types.INCREMENT: return { value: state.value + action.payload };
case types.DECREMENT: return { value: state.value - action.payload };
default: return state;
}
};
const rootReducer = combineReducers({
state: stateReducer
});
//STORE
const store: Store<IStore> = createStore(rootReducer, initialState);
//COMPONENT
interface IProps {
value: number;
increment: () => void;
decrement: () => void;
}
export const Component: ComponentType<any> = ({ value }) => {
return <h1>{value}</h1>;
};
const enhance = compose(lifecycle({
componentDidMount() {
this.props.increment(2);
}
}),
connect((state: IStore) => ({
number: state.state.value
}), dispatch => ({
increment: (num: number) => dispatch(increment(num)),
decrement: (num: number) => dispatch(decrement(num))
}))
);
export const App = enhance(Component);
EDITAR: después del cambio sugerido obtuve esto:
Argument of type 'StatelessComponent<IProps>' is not
assignable to parameter of type 'ComponentType<{}>'.
Type 'StatelessComponent<IProps>' is not assignable to
type 'StatelessComponent<{}>'.
Types of parameters 'props' and 'props' are incompatible.
Type '{ children?: ReactNode; }' is not assignable to type 'IProps & { children?: ReactNode; }'.
Type '{ children?: ReactNode; }' is not assignable to type 'IProps'.
Property 'value' is missing in type '{ children?: ReactNode; }'.
Uso las siguientes dependencias:
"devDependencies": {
"@types/webpack-env": "^1.13.6",
"awesome-typescript-loader": "^5.2.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"react-hot-loader": "^4.3.3",
"source-map-loader": "^0.2.3",
"typescript": "^2.9.2",
"webpack": "^4.12.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"@types/react": "^16.4.1",
"@types/react-dom": "^16.0.6",
"@types/react-redux": "^6.0.2",
"@types/react-router-dom": "^4.2.7",
"@types/recompose": "^0.26.1",
"@types/rx": "^4.1.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"recompose": "^0.27.1",
"redux": "^4.0.0",
"rxjs": "^6.2.1"
}
Respuesta #1
Intenta :
const enhance = compose(lifecycle<IProps, {}>({
componentDidMount() {
this.props.increment(2);
}
}),
El primer parámetro de tipo de lifecycle es la interfaz de props, el segundo es la interfaz de estado (que no estás usando aquí, pero desafortunadamente las definiciones de tipo de la biblioteca no dan {} como valor predeterminado, aunque probablemente deberían).
Consejo: usa VS Code y utiliza Ir a la definición en lifecycle para ver su declaración:
export function lifecycle<TProps, TState, TInstance = {}>(
spec: ReactLifeCycleFunctions<TProps, TState, TInstance> & TInstance
): InferableComponentEnhancer<{}>;
(Tenga en cuenta que no necesita anteponer I a las interfaces y no es un estilo recomendado en TypeScript.)
Entonces verás tu error de tipo real, que es que estás pasando 2 como argumento a increment aunque no acepta parámetros.
