reactjs - Typescript + Recompose - 生命周期中的类型错误

Question

我最近开始将 React 与 TypeScript 结合起来。我在使用 Recompose 生命周期方法时遇到问题。在 componentDidMount 中，我收到错误消息“类型‘{}’上不存在属性‘增量’”。我知道这是一个类型问题，但我对 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 接口(interface)，第二个是状态接口(interface)(你在这里没有使用它，但不幸的是库的类型定义没有给出 { 作为默认值，尽管他们可能应该这样做)。

提示:使用 VS 代码并在 lifecycle 上使用 Go to definition 查看其声明:

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

(请注意，您不需要使用 I 作为接口(interface)前缀，并且不推荐使用 TS 样式。)

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