Typescript - Как добавить определение типа в классический компонент React

Question

Передача нескольких типов компонентов в Component, похоже, игнорирует тип second.

class Car extends Component<State, Dispatch> {
  ...
  // State works, Dispatch gets ignored
}

Диспетчеризация игнорируется, когда это аргумент second .

Если я переверну порядок, код Dispatch будет работать, State будет сломан (игнорируется).

<Types> - это интерфейсы. Это правильный способ передачи нескольких типов в Component?

Answer 1

Типы внутри компонента предназначены для реквизита (первый) и состояния (секунд один). Похоже, что вы пытаетесь использовать их для чего-то другого:

class Component<P, S> {

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L408 для справки.

Если вы пытаетесь использовать избыточность с реагировать и машинопись, зацени это: https://redux.js.org/recipes/usage-with-typescript/

Answer 2

Если вы внимательно изучите файл определения типа index.d.ts из React.Component (команда + щелкните, чтобы открыть)

node_modules/@types/react/index.d.ts

Вы обнаружите, что React Component принимает второй, но он не используется как Реквизит , вместо этого Состояние .

class Component<P, S> {
  ...

Если вы хотите связать диспетчеризацию с вашим Компонентом, связать с реквизитами .

Вы можете найти конкретную реализацию c, как показано ниже:

Обратитесь к документу redux: typing-the-connect-upper-order-component

import { connect, ConnectedProps } from 'react-redux'

interface RootState {
}
const mapState = (state: RootState) => ({
})
const mapDispatch = {
}
const connector = connect(mapState, mapDispatch)

type PropsFromRedux = ConnectedProps<typeof connector>
type Props = PropsFromRedux & {
  backgroundColor: string
}

const MyComponent = (props: Props) => (
  <div style={{ backgroundColor: props.backgroundColor }}>
    <button onClick={props.toggleOn}>
      Toggle is {props.isOn ? 'ON' : 'OFF'}
    </button>
  </div>
)

export default connector(MyComponent)