如何让本地状态兼容可选参数并在添加错误数据时触发类型报错？

问题原因 #

你遇到的问题本质是TypeScript的额外属性检查机制的局限性：这个检查只在对象字面量直接赋值给单一接口类型时触发，当赋值给联合类型（比如DataA | DataB）或者通过展开语法生成对象时，TypeScript不会主动校验并排除多余属性，导致非法属性wrongKey没有被检测到。

解决方法 #

方法1：使用satisfies关键字（推荐，TypeScript 4.9+）

直接在生成新对象时用satisfies约束它必须严格符合DataA | DataB，多余属性会立刻触发报错：

useEffect(() => {
  if (data) {
    const newWeekData = {
      a: data.a,
      b: data.b,
      c: data.c,
      // 这里会直接报错：wrongKey不在DataA或DataB的属性列表中
      ...(data.d && { wrongKey: data.d }),
    } satisfies DataA | DataB;
    setWeekData(newWeekData);
  }
}, []);

方法2：用辅助函数强制类型校验

如果你的TypeScript版本低于4.9，可定义一个简单的辅助函数来约束传入的对象必须是DataA或DataB：

// 辅助函数：强制参数符合DataA或DataB类型
function validateData<T extends DataA | DataB>(data: T): T {
  return data;
}

useEffect(() => {
  if (data) {
    setWeekData(validateData({
      a: data.a,
      b: data.b,
      c: data.c,
      // 这里会报错：wrongKey不属于DataA或DataB
      ...(data.d && { wrongKey: data.d }),
    }));
  }
}, []);

方法3：分支处理不同类型

根据data的实际类型做分支赋值，彻底避免跨类型的属性误用：

useEffect(() => {
  if (data) {
    if ('d' in data) {
      // 此时data被推断为DataB类型，只能使用它的合法属性
      setWeekData({
        a: data.a,
        b: data.b,
        c: data.c,
        d: data.d
        // 这里加wrongKey会直接报错
      });
    } else {
      // 此时data被推断为DataA类型
      setWeekData({
        a: data.a,
        b: data.b,
        c: data.c
        // 这里加wrongKey也会报错
      });
    }
  }
}, []);

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