Question

我最近开始将React与TypeScript结合在一起。我在使用重组生命周期方法时遇到问题。在componentDidMount中，我收到一个错误“类型'{}'上不存在属性'increment'”。我知道这是一个类型问题，但是我在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代码并在lifecycle上使用转到定义来查看其声明：

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

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

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

Typescript + Recompose-生命周期中输入错误

1 个答案: