Is there way to use PropTypes along with TypeScript

Question

I'm migrating my React project to TS and in component (I deleted most of props to simplify code):

interface Props {
  activeTabIdx: number;
  setActiveTab: Function;
}

const HeaderTabs = ({ activeTabIdx, setActiveTab}: Props) => {
  ...
};

HeaderTabs.propTypes = {
  activeTabIdx: PropTypes.number.isRequired,
  setActiveTab: PropTypes.func.isRequired,
};


const mapStateToProps = (state) => ({
  activeTabIdx: state.tabs.activeValue,
});

const mapDispatchToProps = {
  setActiveTab: _setActiveTab,
};

export default connect(mapStateToProps, mapDispatchToProps)(HeaderTabs);

On last line appears error:

Argument of type '{ ({ visible, className, activeTabIdx, setActiveTab, values }: Props): JSX.Element | null; propTypes: { values: PropTypes.Validator<any[]>; activeTabIdx: PropTypes.Validator<number>; setActiveTab: PropTypes.Validator<...>; visible: PropTypes.Validator<...>; className: PropTypes.Requireable<...>; }; defaultProps: { ....' is not assignable to parameter of type 'ComponentType<never>'.

And when I delete PropTypes usage this error disappeares. So what can I do to make TS and PropTypes work together?

PS. I really want to remain usage of PropTypes because it can detect errors in runtime

That'd be redundant. You don't need prop-types if you're using typescript. — Suraj Auwal, Apr 21 '20 at 09:24
PS. I really want to remain usage of PropTypes because it can detect errors in runtime (for example when API changes contract) — Kostya Tresko, Apr 21 '20 at 09:28
Maybe there is a conflict between the type in proptypes and the type in typescript — Algo7, Apr 21 '20 at 09:33
Does this answer your question? [PropTypes in a TypeScript React Application](https://stackoverflow.com/questions/41746028/proptypes-in-a-typescript-react-application) — Ben Butterworth, Apr 21 '20 at 09:35

score 0 · Answer 1 · answered Apr 21 '20 at 09:37

0

I think there must be a conflict between how you specify types in proptype and typescript in your code.

answered Apr 21 '20 at 09:37

Algo7

2,122
1
8
19

Is there way to use PropTypes along with TypeScript

1 Answers1