menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Team

Typescript support for Refs

October 17, 2018 at 6:28am

Typescript support for Refs

October 17, 2018 at 6:28am
Hey Guys! Congrats on v4!
Been migrating the codebase to v4 and refractoring the use of innerRef to just ref
But there is an incomprehensible (may be because I'm new) type error.
container = React.createRef<HTMLDivElement>();
<Container ref={this.container}>
<p>Text</p>
</Container>
What should I be giving out the type of component as?

August 1, 2019 at 6:46pm
Hi , did you ever figure this one out? Upgrading to v4 today and my refs are all breaking.
Type 'RefObject<HTMLDivElement>' is not assignable to type 'string | (string & ((instance: HTMLDivElement | null) => any)) | (((instance: Component<ThemedOuterStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DefaultTheme>, ComponentState> | null) => any) & string) | (((instance: Component<...> | null) => any) & ((instance: HTMLDivElement | null)...'.
Type 'RefObject<HTMLDivElement>' is not assignable to type '((instance: Component<ThemedOuterStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DefaultTheme>, ComponentState> | null) => any) & ((instance: HTMLDivElement | null) => any)'.
Type 'RefObject<HTMLDivElement>' is not assignable to type '(instance: Component<ThemedOuterStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DefaultTheme>, ComponentState> | null) => any'.
Type 'RefObject<HTMLDivElement>' provides no match for the signature '(instance: Component<ThemedOuterStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DefaultTheme>, ComponentState> | null): any'.ts(2322)
index.d.ts(89, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ThemedOuterStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DefaultTheme>, ComponentState>> & Readonly<...> & Readonly<...>'
For now I'm just typing all refs as any
Also having to do styled(Dropdown as any) instead of styled(Dropdown)

August 2, 2019 at 11:53am
Haven't found anything for this yet
like-fill
1

August 2, 2019 at 8:30pm
Thanks, I'll let you know if I can find a solution.

October 16, 2020 at 8:47pm
Did you ever find a solution to this?

October 24, 2020 at 1:00am
If anyone want some help please post a codesandbox <3

November 24, 2020 at 11:35pm
Try ElementRef or ReactElement or JSX.Element When i have this issue, I drill into the React library from my IDE to see what they define in the library declarations. (react is built in typescript). If youre using VSCode, it really doesnt do a good job of auto-completion which makes typing really easy. try IntelliJ Webstorm or IDEA (not freeware).