使用updateDatas更新嵌套对象状态时遇TypeScript报错求助

你的代码触发TypeScript错误，主要是因为三个核心问题：动态属性名使用不当、函数参数定义不匹配，以及缺乏严格的类型约束。我来一步步帮你修正：

1. 核心错误拆解 #

• 静态属性名误用：你在setDatas里写的key: {...}是把字符串"key"当作属性名，而不是变量key的实际值，这就导致生成的对象包含了Datas接口不存在的"key"属性，直接触发类型校验失败。
• 参数不匹配：调用updateDatas('code', 23)时，你传了2个参数，但函数定义要求3个，且第二个参数的类型是字符串（subKey），你却传了数字，类型和数量都不对。
• 类型约束缺失：没限制key必须是Datas接口的属性、subKey必须是对应子对象的属性，TypeScript无法提前帮你拦截错误。

2. 修正后的完整代码 #

interface Datas { code: number; item1: Item; }
interface Item { id: number; name: string; }

// 明确指定useState的泛型类型，提升类型严谨性
const [datas, setDatas] = useState<Datas>({ code: 42, item1: { id: 1, name: 'foo' } });

// 通过条件类型实现智能参数适配
function updateDatas<K extends keyof Datas>(
  key: K,
  // 根据key的类型自动匹配参数：更新item1时需要subKey+value，更新code时只需要value
  ...args: K extends 'item1' ? [subKey: keyof Item, value: Item[keyof Item]] : [value: Datas[K]]
) {
  // 使用函数式更新，避免闭包导致的状态 stale 问题
  setDatas(prevDatas => {
    if (args.length === 2) {
      const [subKey, value] = args as [keyof Item, any];
      return {
        ...prevDatas,
        // 用计算属性名替代静态属性名
        [key]: {
          ...prevDatas[key],
          [subKey]: value
        }
      };
    } else {
      const [value] = args;
      return {
        ...prevDatas,
        [key]: value
      };
    }
  });
}

// 现在可以正常调用了
updateDatas('code', 23);
updateDatas('item1', 'name', 'bar');

3. 关键修正点说明 #

• 计算属性名：用[key]和[subKey]替代静态的key和subKey，确保变量值能正确作为属性名。
• 条件类型参数：让函数根据传入的key自动适配参数结构，TypeScript会自动校验参数是否符合要求。
• 函数式更新：通过prevDatas => ...获取最新状态，避免因闭包导致的旧状态引用问题，这是React状态更新的最佳实践。

4. 简化版（无需极致类型约束） #

如果不需要严格的类型校验，也可以做轻量化修正，核心是修复计算属性名和参数问题：

function updateDatas(key: keyof Datas, value: any, subKey?: keyof Item) {
  setDatas(prevDatas => {
    if (subKey) {
      return {
        ...prevDatas,
        [key]: { ...prevDatas[key], [subKey]: value }
      };
    } else {
      return { ...prevDatas, [key]: value };
    }
  });
}

// 调用方式调整为：
updateDatas('code', 23);
updateDatas('item1', 'bar', 'name');

不过更推荐第一种带严格类型约束的写法，能最大化利用TypeScript的类型校验能力，减少潜在bug。

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