我真的厌倦了搜索这个主题。我不能处理......在功能组件中使用打印脚本接口的休息 prop 。
怎么能声明一个...休息 prop 与typescript接口或什么。
下面是我的一个简单代码示例。

应用程序tsx在此

function App() {
  const handleClick = (): void => {
    console.log('Clicked!!!');
  };

  return (
    <div>
      <div>
        <Button success rounded outline className="mb-5"> //(*className throws error says: ype '{ children: (string | Element)[]; success: true; rounded: true; outline: true; className: string; }' is not assignable to type 'IntrinsicAttributes & Props'.
  Property 'className' does not exist on type 'IntrinsicAttributes & Props'.*)
          <GoBell />
          Click Here!!
        </Button>
      </div>
      <div>
        <Button danger outline>
          <GoCloudDownload />
          Buy Now!
        </Button>
      </div>
      <div>
        <Button warning>
          <GoDatabase />
          See Deal!
        </Button>
      </div>
      <div>
        <Button secondary outline>
          Hide Ads!
        </Button>
      </div>
      <div>
        <Button primary rounded>
          Something
        </Button>
      </div>
    </div>
  );
}

export default App;

此处为按钮.tsx

import { ReactNode } from 'react';
import className from 'classnames';
import PropTypes from 'prop-types';

interface Props {
  children: ReactNode;
  primary?: boolean;
  secondary?: boolean;
  success?: boolean;
  warning?: boolean;
  danger?: boolean;
  outline?: boolean;
  rounded?: boolean;
  rest?: //What can I write here?
}

function Button({
  children,
  primary,
  secondary,
  success,
  warning,
  danger,
  outline,
  rounded,
  ...rest
}: Props) {
  const classes = className(
    rest.className, // ( *There is error says: Property 'className' does not exist on type '{ rest?: any; }'* )
    'flex items-center px-3 py-1.5 border transition',
    {
      'border-blue-500 bg-blue-500 text-white hover:bg-blue-600': primary,
      'border-gray-800 bg-gray-800 text-white hover:bg-gray-900': secondary,
      'border-green-500 bg-green-500 text-white hover:bg-green-600': success,
      'border-yellow-500 bg-yellow-500 text-white hover:bg-yellow-600': warning,
      'border-red-500 bg-red-500 text-white hover:bg-red-600': danger,
      'rounded-full': rounded,
      'bg-white': outline,
      'text-blue-500': outline && primary,
      'text-gray-800': outline && secondary,
      'text-green-500': outline && success,
      'text-yellow-500': outline && warning,
      'text-red-500': outline && danger,
    }
  );

  if (
    Number(!!primary) +
      Number(!!secondary) +
      Number(!!success) +
      Number(!!warning) +
      Number(!!danger) >
    1
  ) {
    return (
      <button className={classes}>Please select only one variation!!!</button>
    );
  }

  return (
    <button className={classes} {...rest}>
      {children}
    </button>
  );
}

export default Button;

我试过很多方法。这是我试过的一些方法;

在按钮.tsx中

1)
interface Props {
  .......
  rest?: Array<any> 
}

2)
interface Props {
  .......
  rest?: [any] 
}
3)
interface Props {
  .......
  rest?: Array<{className: string}> 
}

etc..