TypeScript函数类型错误排查求助：标注及状态更新问题咨询

错误1：deepSearchByKey函数参数未指定类型 #

原因 #

函数的object和matches参数未声明类型，TypeScript无法进行类型校验，默认推断为any，既违背类型安全原则，也触发类型错误。

修正方案 #

将object设为unknown（比any更安全的模糊类型），同时用泛型定义matches数组的类型，让函数既适配当前业务场景，又具备通用性：

const deepSearchByKey = <T>(object: unknown, originalKey: string, matches: T[] = []): T[] => {

错误2：matches.push(object)类型不兼容 #

原因 #

object的类型是unknown，TypeScript无法确认它符合我们需要的IRow结构，直接推入数组会导致类型不匹配。

修正方案 #

匹配到目标key后，通过类型断言明确object的类型为泛型T（调用时指定为IRow）：

matches.push(object as T);

错误3：setRows调用时类型不兼容 #

原因 #

1. ITable接口中setRows的定义错误：useState返回的更新函数类型是React.Dispatch<React.SetStateAction<IRow[]>>，而非() => void，导致传入的setRows类型不匹配。
2. 直接将axios响应对象response传入deepSearchByKey，实际应该遍历的是响应数据response.data；同时未指定泛型，导致result类型与IRow[]不兼容。

修正方案 #

1. 修正ITable接口的setRows类型：

import { Dispatch, SetStateAction } from 'react';

export interface ITable {
  rows: IRow[];
  setRows: Dispatch<SetStateAction<IRow[]>>;
}

2. 在gettingData中，传入response.data并指定泛型为IRow：

let result = deepSearchByKey<IRow>(response.data, "rowName");

3. 此时setRows接收的函数返回IRow[]，完全符合类型要求。

完整修正代码 #

类型定义 #

import { Dispatch, SetStateAction } from 'react';

export interface ITable {
  rows: IRow[];
  setRows: Dispatch<SetStateAction<IRow[]>>;
}

export interface IRow {
  id: number;
  rowName: string;
  salary: number;
}

函数代码 #

import axios from 'axios';
import { IRow } from './types';

const deepSearchByKey = <T>(object: unknown, originalKey: string, matches: T[] = []): T[] => {
    if (object != null) {
        if (Array.isArray(object)) {
            for (let arrayItem of object) {
                deepSearchByKey(arrayItem, originalKey, matches);
            }
        } else if (typeof object === "object") {
            for (let key of Object.keys(object)) {
                if (key === originalKey) {
                    matches.push(object as T);
                } else {
                    deepSearchByKey(object[key], originalKey, matches);
                }
            }
        }
    }
    return matches;
};

export const gettingData = async (rows: IRow[], setRows: React.Dispatch<React.SetStateAction<IRow[]>>) => {
    const response = await axios.get(`${baseUrl}${gettingDataUrl}`);
    let result = deepSearchByKey<IRow>(response.data, "rowName");
    if (rows.length === 0) {
        setRows((prevState) => [...prevState, ...result]);
    }
};

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