Question

我在导入调度动作时遇到问题。编译器抱怨：

输入'Readonly <{children ?: ReactNode; }>＆Readonly <{}>'没有属性'onShowError'，也没有字符串索引签名。

const { onShowError, error, errorMessage } = this.props，这是引起问题的代码。

我知道我的导入有问题，React如何扩展Component等，但我只是找不到解决方案。我是TypeScript的新手，更不用说JavaScript。我只是不知道哪里出了问题。

我尝试创建自己的接口CustomProps并声明onShowError是一个函数，但不起作用。 Not Assignable to {}

import * as React from "react"
import { Dispatch, Action } from "redux"
import { connect } from "react-redux"
import { AppState } from "reducers"

import { showError } from "data/error_handler"

import Snackbar from "material-ui/Snackbar"
import RaisedButton from "material-ui/RaisedButton"

class ErrorHandler extends React.Component {
  hideErrorPopup = () => {
    this.setState({
      error: false,
    })
  }

  public render() {
    const { onShowError, error, errorMessage } = this.props

    return (
      <div>
        <RaisedButton
          onClick={onShowError}
          label="Toggle ErrorHandler"
        />
        <Snackbar
          bodyStyle={{ backgroundColor: "#ffa000", marginBottom: "5px" }}
          open={error}
          message={errorMessage}
          autoHideDuration={5000}
          onRequestClose={this.hideErrorPopup}
        />
      </div>
    )
  }
}

const mapStateToProps = (state: AppState) => ({
  errorMsg: state.errorRedux.errorMessage,
  error: state.errorRedux.error,
})

const mapDispatchToProps = (dispatch: Dispatch<Action>) => {
  return {
    onShowError: () => dispatch(showError()),
  }
}

export default connect<any>(
  mapStateToProps,
  mapDispatchToProps
)(ErrorHandler)

Reducer.ts

import { ErrorHandlerProps, ActionTypes } from "./"

const initialState: ErrorHandlerProps = {
  error: false,
  errorMessage: "",
}

export default (
  state: ErrorHandlerProps = initialState,
  action: ActionTypes
) => {
  switch (action.type) {
    case "SHOW_ERROR":
      return {
        ...state,
      }
  }
}

Interface.ts & index.ts

export interface ErrorHandlerProps {
  error: boolean
  errorMessage: string
}
import reducer from "./reducer"
export { reducer }
export * from "./actions"
export * from "./interfaces"

actions.ts

export type ActionTypes = {
  type: "SHOW_ERROR"
  error: boolean
  errorMessage: string
}

export const showError = (): ActionTypes => ({
  type: "SHOW_ERROR",
  error: true,
  errorMessage: "[ACTIONS]",
})

Answer 1

如果您只是想快速解决ts的投诉，可以使用as any技巧：

const { onShowError, error, errorMessage } = this.props as any

要正确解决此问题，您需要将CustomProps传递给您的组件：

interface CustomProps {
  onShowError: Function;
  error: boolean;
  errorMessage: string;
}

class ErrorHandler extends React.Component<CustomProps> {
  hideErrorPopup = () => {
    this.setState({

// ...

Answer 2

您可能想要明确指定组件的形状：

class myClass extends React.Component<PropShape, StateShape>

要使道具正常工作，请提供道具的类型（包括组件的实际道具以及connect：mapStateToProps和mapDispatchToProps注入的道具）。在这种情况下，您只需要注入道具：

class ErrorHandler extends React.Component<
    ReturnType<typeof mapStateToProps> 
    & ReturnType<typeof mapDispatchToProps>
> {

    ...
}

const mapStateToProps = (state: AppState) => ({
  errorMsg: state.errorRedux.errorMessage,
  error: state.errorRedux.error,
})

const mapDispatchToProps = (dispatch: Dispatch<Action>) => {
  return {
    onShowError: () => dispatch(showError()),
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ErrorHandler)

如果您确实打算保留单独的本地组件状态，您可能还希望包括状态的形状，尽管我不确定您的最终意图是什么

class ErrorHandler extends React.Component<
    ReturnType<typeof mapStateToProps> 
    & ReturnType<typeof mapDispatchToProps>,
    IState> {
    ...
}

interface IState {
    error: boolean;
}

有关将React与TypeScript结合使用的一些常见用例，请参见https://github.com/sw-yx/react-typescript-cheatsheet。

将调度操作导入到React Component帮助中

2 个答案: