TypeScript代码优化问询：如何避免'any'类型并明确复杂场景的正确类型

我来分享一些实用技巧，帮你在类型不明确的场景下替换掉any，尤其是针对你提到的遗留代码、payload和高阶组件（HOC）这些难点：

一、通用类型推断技巧（除了悬停查看） #

• 追踪数据源头：不管是payload还是其他模糊类型，先找它的生成/传入路径——比如是API响应？Redux action的payload？还是父组件传递的props？如果是API返回，直接在浏览器Network面板看真实的响应结构；如果是状态管理里的数据，看action的创建逻辑。找到源头就能精准定义类型。
• 用unknown过渡并收窄类型：把any换成unknown，TypeScript会立刻在你使用这个值的地方报错，提示你需要做类型检查。跟着错误提示，用typeof、instanceof或者自定义类型守卫来逐步收窄类型，比如判断payload是数组后，再定义数组项的结构。
• 查看调用上下文：找这个组件/函数被调用的地方，看实际传入的参数是什么样的。复制一份真实的样本数据，比如在控制台打印payload，然后把它转成TypeScript接口——甚至可以直接用TypeScript Playground的“生成类型”功能（把样本数据粘贴进去，右键选择“生成类型”）。
• 先定义最小可行类型：如果不确定完整结构，先写能满足当前代码逻辑的最小类型。比如你的代码里只用到了payload的dataKey和value，那就先定义这两个属性，后续发现新的属性再补充，总比用any强。

二、Payload的类型调研与定义 #

针对你的代码示例1：

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; // 需要替换的any
}

从代码逻辑能看出来：

• payload是一个数组，因为用到了find方法
• 数组中的每个元素有dataKey（字符串类型，用来匹配'value'）和可选的value属性（可能是字符串或数字，因为要和'-'拼接）

所以可以先定义一个最小的类型：

// 定义payload数组的每一项类型
interface PayloadItem {
  dataKey: string;
  value?: string | number;
  // 后续如果发现其他属性，再补充进来
}

interface Props {
  classes: Partial<ClassNameMap>;
  label: string;
  payload: PayloadItem[]; // 替换掉any
}

如果想更精准，就去追踪payload的来源——比如看父组件是怎么生成这个数据的，或者看API返回的结构，把所有属性都补全。

三、高阶组件（HOC）的类型处理 #

你的代码示例2里的HOC有X、Y、Z三个模糊类型，处理HOC的核心是用泛型传递组件的props类型，同时明确HOC自身接收的props：

import React, { useEffect } from 'react';

// 先定义HOC自身需要的props类型
interface HocExtraProps<T> {
  X: T[]; // X是一个数组，T是数组项的类型，后续可以替换成具体类型
  Y: () => void; // Y是无参数、无返回值的函数
  Z: unknown; // 根据Z的实际用途替换，比如如果是字符串就改成string
}

// 用泛型P表示被包裹组件的props类型
export default function withMyHoc<P extends object>(WrappedComponent: React.ComponentType<P>) {
  // HOC接收的props是被包裹组件的props + HOC额外需要的props
  return function HocComponent(props: P & HocExtraProps<unknown>): JSX.Element {
    // 分离HOC自己用的props和要传递给被包裹组件的props
    const { X, Y, Z, ...restProps } = props;
    
    useEffect(() => {
      if (!X.length) {
        Y();
      }
    }, [X, Y, Z]);
    
    // 把剩余props传递给被包裹组件，保证类型安全
    return <WrappedComponent {...restProps} />;
  };
}

这样处理后，TypeScript会自动检查传入HOC的props是否符合要求，同时被包裹的组件也能正确接收它自己的props，完全避免了any。

四、第三方库的类型处理 #

如果遇到没有类型定义的第三方库：

• 先尝试自己写简易的类型定义文件（比如xxx.d.ts），哪怕只定义你用到的方法和属性，也比any安全。
• 用unknown代替any，然后在使用时用类型断言（比如const result = libFunc() as MyDefinedType;），但要注意断言的准确性，尽量只在你确定类型的情况下使用。
• 去npm上搜索@types/xxx，看看社区有没有提供现成的类型定义。

内容的提问来源于stack exchange，提问作者MrVoland