TS2739: Unable to consume custom Tippy wrapper extending TippyProps in typescript

Question

We maintain two separate repositories as library. Both are using reactjs. One is pure component library while other contains sharable modules.

I started integrating typescript in both these libraries.

Here is Tippy wrapper naming Tippy.tsx in component library.

import Tooltip, {TippyProps} from '@tippyjs/react'
interface TippyType extends TippyProps {
  hook: string;
  style: Object;
}

const Tippy:React.FC<TippyType> = (props) => {
  const {dataHook = '', style = {}} = props
  function onCreate (instance: any) {
    props?.onCreate?.(instance)
    if (dataHook) {
      instance.props.content.setAttribute('data-hook', dataHook)
    }
    Object.entries(style).forEach(([property, value]) => {
      content.style[property] = value
    })
  }
  return (
    <Tooltip
      { ...props}
      onCreate={onCreate}
    >
      {props.children}
    </Tooltip>
  )
}
export default Tippy

This code builds successfully. But when I try to use this component in module library, typescript only acknowledges hook and style props. All other props from tippy PropTypes throw error.

e.g. following code

<Tippy
  content={value}
  theme='material'
>
  <span className='inline-block m-r-5 to-ellipsis overflow-hidden ws-nowrap'>{value}</span>
</Tippy>

throws

TS2739: Type '{ children: Element; content: string; theme: string; }' is missing the following properties from type 'TippyType': hook, 'style'

Here is the declaration file automatically generated tippy.d.ts

import { TippyProps } from '@tippyjs/react';
import React from 'react';
import './styles.scss';
import 'tippy.js/dist/tippy.css';
interface TippyType extends TippyProps {
    hook: string;
    'style': Object;
}
declare const Tippy: React.FC<TippyType>;
export default Tippy;

Here is TippyProps

Answer 1

TS2739: Type '{ children: Element; content: string; theme: string; }' is missing the following properties from type 'TippyType': hook, 'style'

The error is warning you hook and style are compulsory in Tippy Component.

interface TippyType extends TippyProps {
    hook: string;   // <--- compulsory 
    style: Object;  // <--- compulsory
}

Therefore, you need to pass hook and style when using Tippy.

<Tippy
    hook=""
    style={{}}
    content={value}
    theme='material'
>
   <span className='inline-block m-r-5 to-ellipsis overflow-hidden ws-nowrap'>{value}</span>
</Tippy>

If you want to mark hook and style as optional, use ?:

interface TippyType extends TippyProps {
  hook?: string;
  style?: Object;
}