React TypeScript联合类型属性访问报错解决方案咨询

首先，你需要先定义互斥的联合类型，确保两种配置结构不会重叠，同时让TypeScript能准确区分它们：

// 定义互斥的联合类型，用never约束只能二选一
type Config = 
  | { foo: string; bar: string; foo2?: never }
  | { foo2: number; foo?: never; bar?: never };

这里用never类型标记另一种配置中不存在的属性，TypeScript会自动约束你只能传入其中一种结构，避免同时混合传入的情况。

接下来，访问foo2时必须用类型守卫缩小类型范围，让TypeScript明确当前分支的具体类型，就不会报TS2339错误了。常用的两种方式：

方式一：使用in运算符做类型守卫 #

function processConfig(config: Config) {
  if ('foo2' in config) {
    // 此时TS能确定config是包含foo2的类型分支
    console.log(`处理foo2：${config.foo2}`);
  } else {
    // 此时TS能确定config是包含foo和bar的类型分支
    console.log(`处理foo和bar：${config.foo} ${config.bar}`);
  }
}

方式二：使用typeof做类型守卫 #

如果foo2的类型和其他分支的属性类型有明显区别，也可以用typeof判断：

function processConfig(config: Config) {
  if (typeof config.foo2 === 'number') {
    console.log(`处理foo2：${config.foo2.toFixed(2)}`);
  } else {
    console.log(`处理foo和bar：${config.foo.toUpperCase()} ${config.bar}`);
  }
}

为什么之前会报错？ #

TypeScript的联合类型中，只有所有分支都存在的属性才能直接访问。foo2只存在于其中一种配置结构里，直接访问时TS无法确定当前是哪个分支，所以会抛出属性不存在的错误。通过类型守卫缩小类型范围后，TS就能明确当前分支的具体类型，自然允许访问对应属性。

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