Props is a deprecated symbol in React with Typescript

Question

I have a problem: My IDE is complaining about deprecation.

I use react 16 and typescript 2.5.3

Following code given:

import React, { Props, StatelessComponent } from 'react';
import PropTypes from 'prop-types';

interface IProps {
    id: string;
}

const Foo: StatelessComponent<IProps> = (props: IProps) => {
    props.ref = nodeRef;
    return (<div id={props.id}></div>);
};

Foo.propTypes = {
    id: PropTypes.string,
};

Foo.defaultProps = {
    id: 'bar',
};

export default Foo;

At this point I am getting at props.ref 'Property ref does not exist on Partial'

When I extend my interface IProps, like this:

interface IProps extends Props {
    id: string;
}

At this point my IDE suggest to add an Generic Type

interface IProps extends Props<any> {
    id: string;
}

Now I get deprecation warning to consult online docs, BUT I do not find anything. BUT my initial error with ref-property is gone.

Now my question: How to deal with this when I use a StatelessComponent? How to deal with it, when Using Component (or is there no error)? And how can I avoid any?

Thanks for helping me

Answer 1

You've accidentally masked the real problem by extending Props<T> ! There's a comment in the type definitions explaining why that interface is deprecated:

This was used to allow clients to pass ref and key to createElement , which is no longer necessary due to intersection types.

In other words, you used to have to extend Props<T> for your prop type definitions so that ref / key / children would be included, but new features in TypeScript have made this unnecessary. You can just pass in a plain interface as you were doing initially.

However, this still leaves you with your 'Property ref does not exist' error - this is because you cannot use refs on stateless functional components . The type definitions are actually doing the right thing here and stopping you from writing code that won't work!