Type Guard为何对原对象生效却对其克隆对象不生效？

这是TypeScript类型收窄机制里一个很常见的小坑，我来帮你理清楚原因和解决办法：

问题根源 #

TypeScript的类型守卫（比如你这里用node.data.children.type === NodeDataChildType.CHOICES做的类型判断）是绑定在具体变量上的，而不是对象的结构本身。

当你在if条件里判断后，TypeScript会把变量node的类型收窄到更具体的子类型——也就是node.data.children被确定为包含choices属性的那个联合分支。但当你通过{ ...node }创建newNode时，这是一个全新的变量，TypeScript会重新推断它的类型为原始的Node类型，而不会继承node已经被收窄后的类型。所以newNode.data.children仍然是NodeDataChildren联合类型，自然访问choices会触发类型错误。

哪怕你知道运行时newNode.data.children和原对象是同一个引用，TypeScript的编译时类型检查也不会考虑这一点——它只认变量的类型标注和推断结果。

解决办法 #

这里有几种可行的方案，你可以根据场景选择：

1. 手动继承原变量的收窄类型 #

通过类型断言让newNode继承node被收窄后的类型：

if ( node.data.children.type === NodeDataChildType.CHOICES && node.id === nodeId ) {
  const newNode = { ...node } as typeof node; // 断言为node当前的收窄类型
  console.log(
    newNode.data.children.choices, // 现在不会报错了
    node.data.children.choices
  );
}

这种方式简单直接，因为你明确知道克隆后的对象结构和原对象一致，不会有类型不匹配的风险。

2. 对克隆对象重新做类型守卫 #

如果不想用断言，可以在克隆后再次检查类型，让TypeScript重新收窄newNode的类型：

if ( node.data.children.type === NodeDataChildType.CHOICES && node.id === nodeId ) {
  const newNode = { ...node };
  if (newNode.data.children.type === NodeDataChildType.CHOICES) {
    console.log(
      newNode.data.children.choices, // 类型收窄后可正常访问
      node.data.children.choices
    );
  }
}

虽然看起来重复，但对于更复杂的场景，这种方式更安全，避免断言带来的潜在风险。

3. 用泛型函数封装克隆逻辑 #

如果经常需要这种“克隆并保留收窄类型”的操作，可以写一个泛型浅克隆函数：

function shallowClone<T>(obj: T): T {
  return { ...obj };
}

// 使用方式：
if ( node.data.children.type === NodeDataChildType.CHOICES && node.id === nodeId ) {
  const newNode = shallowClone(node); // newNode自动继承node的收窄类型
  console.log(
    newNode.data.children.choices,
    node.data.children.choices
  );
}

泛型T会自动捕获node当前的收窄类型，克隆后的newNode类型自然和原变量一致。

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