reactjs - 如何在 Typescript 上为 spread props 声明类型

Question

我想弄清楚如何让这段代码在 TypeScript 上运行

type ScrollProps = {
  autoHide: boolean
  autoHideTimeout: number
  autoHideDuration: number
}

const renderThumb = ({ style, ...props}) => {
  const thumbStyle = {
    borderRadius: 6,
    backgroundColor: 'rgba(35, 49, 86, 0.8)'
  }
  return <div style={{ ...style, ...thumbStyle }} {...props} />
}

const CustomScrollbars = (props: ScrollProps) => (
  <Scrollbars
    renderThumbHorizontal={renderThumb}
    renderThumbVertical={renderThumb}
    {...props}
  />
)

...
<CustomScrollbars autoHide autoHideTimeout={500} autoHideDuration={200}>
 ...
</CustomScrollbars>

如果我为 CustomScrollbars 上的 Prop 创建类型，我会在 <CustomScrollbars> 上收到错误消息，如果我不这样做，我会在 CustomScrollbars 函数的 Prop 上收到错误消息。

我在 style 上也遇到错误，它想知道什么类型，但我不知道要放什么类型。

为什么隐式 any不工作，我怎样才能让这段代码在 TypeScript 上工作？

https://codesandbox.io/s/react-hooks-with-typescript-forked-8g5g6

Answer 1

老实说，react-custom-scrollbars 的类型包裹真的很缺乏。 renderThumbHorizontal 的预期类型和 renderThumbVertical Prop 声明为 React.StatelessComponent<any> -- 采用 any 的组件 Prop 。所以我不知道调用这些组件的 Prop 是否与您的 renderThumb 的 Prop 匹配。期待中。

至于为 renderThumb 声明 Prop (我建议大写，因为如果您尝试在 JSX 中使用它会产生问题，例如 <renderThumb /> )，展开运算符并不重要。您正在接受 Prop 对象，所有 Prop 都传递给 div .所以我们想接受任何 Prop a div会接受。该类型是 JSX.IntrinsicElements['div'] .

有了这个定义，style类型是 React.CSSProperties | undefined .传播其实还可以undefined , 所以你不需要要求 style或设置默认值。

const RenderThumb = ({ style, ...props}: JSX.IntrinsicElements['div']) => {
  const thumbStyle = {
    borderRadius: 6,
    backgroundColor: 'rgba(35, 49, 86, 0.8)'
  }
  return <div style={{ ...style, ...thumbStyle }} {...props} />
}

至于CustomScrollbars ，您可以从包中导入 Prop ，而不必自己重新定义它们。如果您将组件键入 React.FunctionComponent<Props>这将包括 children自动支撑。 (但是您的 CodeSandbox 有点问题，因为它找不到该类型)。

import React from "react";
import { Scrollbars, ScrollbarProps } from "react-custom-scrollbars";

const CustomScrollbars: React.FC<ScrollbarProps> = (props) => (
  <Scrollbars
    renderThumbHorizontal={renderThumb}
    renderThumbVertical={renderThumb}
    {...props}
  />
);