TypeScript自定义Hook解构重命名遇TS2339错误，求复用方案

方案一：使用正确的解构重命名语法 #

你遇到的TS2339错误，本质是解构时错误地直接用目标变量名作为属性名。正确的解构重命名语法是原属性名: 新变量名，既符合TS类型约束，又能自定义变量名：

// 正确写法：将activeItemsNumber重命名为number1
const { activeItemsNumber: number1 } = useMyState(widgets);
const { activeItemsNumber: number2 } = useMyState(channels);

这种方式无需修改原Hook代码，直接利用ES6解构的重命名特性即可解决问题，是最直接的方案。

方案二：让Hook支持动态属性名（通过泛型） #

如果你希望Hook返回的对象属性名本身就是自定义的，可以通过泛型+动态属性改造Hook，让TS能正确推断返回类型：

import { useRef, MutableRefObject } from 'react';

// 定义泛型Hook，接受自定义属性名作为参数
export function useMyState<T extends string>(items: any, propName: T): { [K in T]: MutableRefObject<number> } {
  const activeItemsNumber = useRef(0);
  
  // 这里编写你的业务逻辑，比如根据items更新activeItemsNumber.current
  // some code
  
  // 返回包含自定义属性名的对象
  return {
    [propName]: activeItemsNumber
  } as { [K in T]: MutableRefObject<number> };
}

调用时传入自定义的属性名：

const { number1 } = useMyState(widgets, 'number1');
const { number2 } = useMyState(channels, 'number2');

TS会根据传入的propName自动推断返回对象的属性类型，不会再报错。

方案三：让Hook直接返回Ref值（无需解构） #

如果你的Hook仅需要返回这一个Ref值，可以简化返回结构，直接返回Ref对象，调用时可直接自定义变量名：

import { useRef, MutableRefObject } from 'react';

export const useMyState = (items): MutableRefObject<number> => {
  const activeItemsNumber = useRef(0);
  
  // some code
  
  return activeItemsNumber;
};

调用时直接赋值：

const number1 = useMyState(widgets);
const number2 = useMyState(channels);

这种方案最简洁，适合Hook仅返回单一值的场景。

内容的提问来源于stack exchange，提问作者one-hand-octopus