Reactjs 如何为组件定义相互依赖的类型道具

我试图对React-Typescript项目进行一些简化，但我一直在研究如何正确注释类型。下面是我正在使用的代码的简化示例：

//工作示例
从“React”导入*作为React；
从“react dom”导入{render}；
常量应用程序：React.FC=（）=>{
const handleClick=（值：string | number）：void=>{
如果（值的类型==“字符串”）{
//做一些字符串逻辑。。。
log（`String:${value}`）；
}else if（值的类型==“数字”）{
//做一些数字逻辑
log（`Number:${value}`）；
}
};
返回(
);
};
界面道具{
handleClick:（值：字符串|编号）=>void；
值：字符串|编号；
}
常量按钮：React.FC=（{handleClick，value}）=>(
handleClick（value）}>{value}
);
const rootElement=document.getElementById（“根”）；
渲染(

//在制品
从“React”导入*作为React；
从“react dom”导入{render}；
常量应用程序：React.FC=（）=>{
const handleStringClick=（string:string）=>{
//做一些字符串逻辑。。。
log（`String:${String}`）；
};
常量handleNumberClick=（编号：number）：void=>{
//做一些数字逻辑
log（`Number:${Number}`）；
};
返回(
);
};
接口支柱{
handleClick：（string:string）=>void；
值：字符串；
}
接口号操作{
handleClick：（number:number）=>void；
值：数字；
}
类型支柱=支柱|数量支柱；
常量按钮：React.FC=（{handleClick，value}）=>(
实现这一目标的一种方法是将
按钮设置为通用：

<Button handleClick={arg => { /** `arg` is of type `42` */}} value={42} />

类型道具={
handleClick：（参数：T）=>void；
值：T；
}
常量按钮=（{handleClick，value}:Props）=>(
handleClick（value）}>{value}
);

{/**`arg`的类型为`42`*/}}value={42}/>
谢谢你的回答Karol！我能够根据你的建议调整我的代码；我保留了你的
道具，然后扩展了你的
按钮
-代码以获得返回类型：

const按钮=({
handleClick，
价值
}：Props）：JSX.Element=>(
handleClick（value）}>{value}
);

在这方面也找到了一个很好的来源：

// WIP
import * as React from "react";
import { render } from "react-dom";

const App: React.FC = () => {
  const handleStringClick = (string: string) => {
    // Do some string logic...
    console.log(`String: ${string}`);
  };

  const handleNumberClick = (number: number): void => {
    // Do some number logic
    console.log(`Number: ${number}`);
  };

  return (
    <div>
      <Button handleClick={handleStringClick} value="Hello" />
      <Button handleClick={handleNumberClick} value={42} />
    </div>
  );
};

interface StringProps {
  handleClick: (string: string) => void;
  value: string;
}
interface NumberProps {
  handleClick: (number: number) => void;
  value: number;
}
type Props = StringProps | NumberProps;
const Button: React.FC<Props> = ({ handleClick, value }) => (
  <button onClick={(): void => One way to achieve that is by making 
Button
 generic:


type Props<T extends string | number> = {
  handleClick: (argument: T) => void;
  value: T;
}
const Button= <T extends string | number,>({ handleClick, value }: Props<T>) => (
  <button onClick={(): void => handleClick(value)}>{value}</button>
);

<Button handleClick={arg => { /** `arg` is of type `42` */}} value={42} />

const Button = <T extends string | number>({
  handleClick,
  value
}: Props<T>): JSX.Element => (
  <button onClick={(): void => handleClick(value)}>{value}</button>
);