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!