Reactjs 如何避免'；任何'；并提供正确的类型脚本代码？

我的任务是改进当前的TypeScript，避免同时使用

any

类型。问题是，有时很难理解应该存在什么，因为代码的一部分是遗留代码

你能给我一些建议，如何在不太明显的情况下寻找合适的类型（除了明显地在某些事情上徘徊之外）

调查这个

有效载荷

和

X，Y，Z

的最佳方法是什么

我知道当与某些第三方库等一起使用时，

任何

都是可以的。但是，例如，这些情况又如何呢？当测试事物类型更难时，在诸如HOC之类的情况下，我应该如何避免

任何

export default ({ classes, label, payload }: Props): JSX.Element => (
  <div className={classes.background}>
    <Typography className={classes.label} variant="subtitle2">
      {label} - {payload.find((item) => item.dataKey === 'value')?.value || '-'}
    </Typography>
  </div>
);

interface Props {
  classes: Partial<ClassNameMap>;
  label: string;
  payload: any;
}

导出默认值（{classes，label，payload}:Props）：JSX.Element=>(
{label}-{payload.find（（item）=>item.dataKey==='value'）？.value | |'-'}
);
界面道具{
类别：部分；
标签：字符串；
有效载荷：任何；
}


import React，{useffect}来自“React”；
导出默认值（WrappedComponent:React.ComponentType）=>（{X，Y，Z}）：JSX.Element=>{
useffect（（）=>{
如果（！X.length）{
Y（）；
}
}[X，Y，Z]）；
返回(
);
};
这种技术性的工作总是有点费力。但它会帮助你磨练打字技巧

看看上面的第一个代码片段，我要做的是看看该函数如何使用该属性。您可以看到它使用了
find
方法，因此这是一个很好的指示器，表明它是
array
类型。此外，该数组似乎包含名为
item
的值，这些值具有
dataKey
，这为您提供了一个起点，以确定
项的确切含义。假设在代码库中的某个地方有一个
项
接口或类型，您可以导入该类型并将
负载
定义为
项[]

第二个例子要困难得多。也许这是X，Y和Z坐标。或者可能只是名字不好。识别这一点的唯一方法是在代码库中搜索该组件的用法并从那里开始。
我认为在第二种情况下，X可以是字符串或数组，因为它使用长度属性，Y可以是某个函数。我不确定，但这些只是假设。所以，正如我所想，这里没有黄金法则，每次我都需要调查它，寻找线索。。。非常感谢你们，我会继续我的侦探工作，哈哈：）
import React, { useEffect } from 'react';

export default (WrappedComponent: React.ComponentType) => ({ X, Y, Z }): JSX.Element => {
  useEffect(() => {
    if (!X.length) {
      Y();
    }
  }, [X, Y, Z]);

  return (
    <WrappedComponent />
  );

};