I have a problem: My IDE is plaining 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
I have a problem: My IDE is plaining 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
Share Improve this question edited Dec 8, 2017 at 13:13 dazlious asked Dec 8, 2017 at 12:53 dazliousdazlious 5566 silver badges23 bronze badges1 Answer
Reset to default 5You've accidentally masked the real problem by extending Props<T>
! There's a ment in the type definitions explaining why that interface is deprecated:
This was used to allow clients to pass
ref
andkey
tocreateElement
, 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 ponents. The type definitions are actually doing the right thing here and stopping you from writing code that won't work!