Предлагать TypeScript Props в компонент React, подключенный к Redux?

Question

Я привык подключать компоненты React к Redux следующим образом:

В индексе. js:

import { connect } from "react-redux";
import { doThing } from "store/actions";
import Component from "./component";

const mapState = (state) => {
  const { foo } = state;
  return {
    foo
  };
};

const mapDispatch = {
  doThing,
};

export default connect(mapState, mapDispatch)(Component);

В компоненте. js

import React from 'react';

const Component = ({foo, doThing}) => {
    return (
        // stuff
    )
}

Это отлично работает, но теперь я перешел на TypeScript:

В index.tsx:

import { stateType } from "types";
import { connect } from "react-redux";
import { doThing } from "store/actions";
import Component from "./component";

const mapState = (state: stateType) => {
  const { foo } = state;
  return {
    foo
  };
};

const mapDispatch = {
  doThing,
};

export default connect(mapState, mapDispatch)(Component);

В component.tsx

import { doThingArgTypes } from "types";
import React from 'react';

type Props = {
  foo: string;
  doThing: (arg0: doThingArgTypes) => void;
};


const Component: React.FC<Props> = ({foo, doThing}) => {
    return (
        // stuff
    )
}

Код Выше работает, но раздражает необходимость каждый раз печатать Props, учитывая, что в некоторых ситуациях TypeScript может выводить типы. Также, если я импортирую опору и не использую ее, я не получаю никаких ошибок. Есть ли более умный способ добавления типов?

Answer 1

К сожалению, я не думаю, что есть другой способ go обойти это. Вы должны предоставить псевдонимы интерфейсов / типов для ваших компонентов React, в противном случае компилятор TypeScript выдаст сообщение об ошибке, подобное следующему: Property “XXX” does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes.

Конечно, вы всегда можете выбрать самый простой выход и введите ваши компоненты как any, но это победит одну из причин использования TypeScript, поскольку вы потеряете возможности проверки типов.

Если вы работаете с подключенными компонентами с Redux и другими промежуточными программами, такими как как redux-observable, вы можете использовать этот пакет, typesafe-actions , который предоставляет набор утилит типа safe-safe.