打字稿 + 重构 - 生命周期中的类型错误

Question

我最近开始将 React 与 TypeScript 结合起来。我在使用重构生命周期方法时遇到问题。在组件DidMount中，我收到错误"类型'{}'上不存在属性'增量'"。我知道这是一个类型问题，但我对 TS 没有太多经验。在哪里添加类型来解决此问题？这是我的代码：

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

编辑：在建议的更改之后，我得到了这个：

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

我使用以下依赖项：

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

Answer 1

尝试：

const enhance = compose(lifecycle<IProps, {}>({
componentDidMount() {
this.props.increment(2);
}
}),

要lifecycle的第一个类型参数是 props 接口，第二个是状态接口(您在这里没有使用它，但不幸的是，库的类型定义没有将{}作为默认值，尽管它们可能应该(。

提示：使用 VS 代码并使用 Goto 定义lifecycle查看其声明：

export function lifecycle<TProps, TState, TInstance = {}>(
spec: ReactLifeCycleFunctions<TProps, TState, TInstance> & TInstance
): InferableComponentEnhancer<{}>;

(请注意，您不需要在接口上加上前缀I，也不建议使用 TS 样式。

然后，您将看到实际的类型错误，即即使它不接受任何参数，您2作为参数传递给increment。