TS2739：无法在打字稿中使用自定义 Tippy 包装器扩展 TippyProps

Question

我们维护两个独立的存储库作为库。两者都在使用 reactjs。一种是纯组件库，一种是包含可共享模块。

我开始在这两个库中集成打字稿。

这里是组件库中的 Tippy wrapper 命名 Tippy.tsx。

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

此代码构建成功。但是当我尝试在模块库中使用这个组件时，打字稿只承认 hook 和 style 道具。 tippy PropTypes 中的所有其他道具都会抛出错误。

例如以下代码

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

投掷

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

这里是自动生成的声明文件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;

这里是TippyProps

Answer 1

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

错误警告您 hook 和 style 在 Tippy 组件中是强制性的。

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

因此在使用Tippy时需要通过hook和style。

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

如果要将 hook 和 style 标记为可选，请使用 ?:

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

TS2739：无法在打字稿中使用自定义 Tippy 包装器扩展 TippyProps

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

reactjs

typescript

tippyjs