Describe to typescript react component wrapper

Question

How to describe wrapper around any children that tippy accepts that typescript will use correctly?

import Tippy, { TippyProps } from '@tippy.js/react'
import React from 'react'
import 'tippy.js/dist/tippy.css'

Tippy.defaultProps = {
  maxWidth: '500px',
}

export const Tooltip: Tooltip = ({ children, content, ...rest }) => {
  if (!children) return null
  if (!content) return children

  return (
    <Tippy content={content} {...rest}>
      {children}
    </Tippy>
  )
}

interface Tooltip {
  (props: MyProps): React.ForwardRefExoticComponent<TippyProps> | null | React.ReactNode
}

interface MyProps {
  content?: string | React.ReactNode
  children?: React.ReactNode
}

Used like this:

   <Tooltip content='Text'>
        <div>123</div>
   </Tooltip>

Typescript gives me error for children in return statement:

Type 'string | number | true | {} | ReactElement ReactElement Component)> | null) | (new (props: any) => Component)> | ReactNodeArray | ReactPortal' is not assignable to type 'ReactElement ReactElement Component)> | null) | (new (props: any) => Component)>'. Type 'string' is not assignable to type 'ReactElement ReactElement Component)> | null) | (new (props: any) => Component)>'.ts(2322) index.d.ts(6, 3): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & TippyProps'

The error points you right at the problem: you've declared children to be a ReactNode but ReactNode can be a string and Tippy (apparently) won't accept string children. Use ReactElement instead. When debugging typescript errors like this it is frequently helpful (at least until you get more used to reading them) to add whitespace formatting. — Jared Smith
– Jared Smith, Commented Nov 26, 2019 at 15:20
@JaredSmith thx, you should answer, not comment, so i can accept your answer :) — ZiiMakc
– ZiiMakc, Commented Nov 26, 2019 at 15:22
@JaredSmith thx, i really was struggling to read this errors. Didn't know about whitespace formatting. — ZiiMakc
– ZiiMakc, Commented Nov 26, 2019 at 15:23
Yeah, they're pretty dense. I gave an example in the answer I just posted, all I did was add a few strategically placed carriage returns. — Jared Smith
– Jared Smith, Commented Nov 26, 2019 at 15:25

Jared Smith · Accepted Answer · 2019-11-26 15:28:22Z

1

The error points you right at the problem: you've declared children to be a ReactNode but ReactNode can be a string and Tippy (apparently) won't accept string children. Use ReactElement instead. When debugging typescript errors like this it is frequently helpful (at least until you get more used to reading them) to add whitespace formatting:

Type 
'string | number | true | {} | ReactElement ReactElement Component)> | null) 
| (new (props: any) => Component)> 
| ReactNodeArray 
| ReactPortal' 
is not assignable to type 
'ReactElement ReactElement Component)> | null) 
| (new (props: any) => Component)>'

Type 'string' is not assignable to type 
'ReactElement ReactElement Component)> | null) 
| (new (props: any) => Component)>'

ts(2322) index.d.ts(6, 3): The expected type comes from property 'children' 
which is declared here on type 'IntrinsicAttributes & TippyProps'

edited Nov 26, 2019 at 15:28

answered Nov 26, 2019 at 15:24

Jared Smith

22.3k5 gold badges50 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ZiiMakc Over a year ago

Hm, i you sure there is whitespace formatting for vscode console?

Jared Smith Over a year ago

No, I just did it by hand in a scratch buffer. After you do the first few your eyes will likely start picking out the relevant bits automatically. One other thing that might help is looking at the actual React d.ts file, it's huge and you have to search around but it's not bad to have at least a rough idea of what the different React types are.

Collectives™ on Stack Overflow

Describe to typescript react component wrapper

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related