Импорт действий отправки в помощь React Component

Question

У меня проблемы с импортом отправки. Компилятор компилирует, что:

Тип 'Readonly <{children ?: ReactNode; }> & Readonly <{}> 'не имеет свойства' onShowError 'и не имеет подписи индекса строки.

const { onShowError, error, errorMessage } = this.props это код, который вызывает проблему.

Я понимаю, что с моим импортом что-то не так, и как React расширяет Компонент и т. Д., Но я просто не могу найти решение. Я новичок в 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

Вы, вероятно, хотите явно указать форму вашего компонента:

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

См. https://github.com/sw-yx/react-typescript-cheatsheet для некоторых распространенных случаев использования React с TypeScript.

Answer 2

Если вы просто хотите быстро обойти жалобу 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({

// ...