实现组件列拖拽排序时遭遇TypeScript隐式any类型错误求助

问题根源 #

1. Zustand setter函数类型定义不全：你的setStocksSelected接口仅接受Stocks[]类型，但Zustand原生支持回调函数式更新（传入(prev: 状态类型) => 新状态），当前接口不兼容这种写法，导致TypeScript报错。
2. 隐式any类型残留：findIndex里的i: any未指定具体类型，加上arrayMove返回类型未明确，引发隐式any警告。

分步解决方案 #

1. 更新Zustand的状态接口与实现

修改IGfpService中setStocksSelected的参数类型，使其同时支持直接传值和回调函数，并同步更新setter的逻辑处理：

import { create } from 'zustand';
import Stocks from '~/@core/domain/model/stock/Stocks';

interface IGfpService {
  stocks: Stocks[];
  setStocks: (stockValues: Stocks[] | ((prev: Stocks[]) => Stocks[])) => void;
  stocksSelected: Stocks[],
  // 扩展参数类型，支持回调函数式更新
  setStocksSelected: (stockSelectedValues: Stocks[] | ((prev: Stocks[]) => Stocks[])) => void,
}

const useGfpStore = create<IGfpService>()(set => ({
  stocks: [],
  setStocks: stockValues => set(state => ({
    stocks: typeof stockValues === 'function' ? stockValues(state.stocks) : stockValues
  })),
  stocksSelected: [],
  setStocksSelected: stockSelectedValues => set(state => ({
    stocksSelected: typeof stockSelectedValues === 'function' ? stockSelectedValues(state.stocksSelected) : stockSelectedValues
  })),
}));

export default useGfpStore;

2. 修正onDragEnd中的类型问题

去掉findIndex里的any类型，明确指定为Stocks，并显式声明arrayMove的泛型参数确保返回Stocks[]：

const onDragEnd = ({ active, over }: DragEndEvent) => {
  if (active.id !== over?.id) {
    setStocksSelected((previous: Stocks[]) => {
      // 明确元素类型为Stocks，消除any
      const activeIndex = previous.findIndex((i: Stocks) => i.key === active.id);
      const overIndex = previous.findIndex((i: Stocks) => i.key === over?.id);
      // 显式指定泛型，确保arrayMove返回正确类型
      return arrayMove<Stocks>(previous, activeIndex, overIndex);
    });
  }
};

3. 额外类型校验（可选）

如果你的Stocks类型未明确key属性，补充定义确保类型匹配：

// Stocks.ts示例定义
interface Stocks {
  key: string | number; // 与active.id的类型保持一致
  // 其他业务属性...
}

export default Stocks;

核心逻辑说明 #

• 扩展Zustand setter的参数类型后，就能合法使用回调函数式更新，对齐Zustand的实际API能力。
• 消除any类型并明确泛型参数，让TypeScript能正确推断所有变量类型，彻底解决隐式any报错。

内容的提问来源于stack exchange，提问作者Leonardo Luís Tozoni