Typescript遍历返回联合类型配置的函数数组类型报错如何解决？

报错的核心原因是TypeScript联合类型的访问限制：默认仅允许访问联合类型所有成员共有的属性。你定义的ConfigObject是FirstConfig和SecondConfig的联合，二者没有公共属性，所以直接访问a或b会触发类型校验失败。

解决思路 #

1. 用类型守卫窄化类型（适合简单联合场景） #

通过in操作符判断属性是否存在，TS会自动将类型窄化为对应的子类型：

configArray.map(getConfig => {
  const config = getConfig();
  if ('a' in config) {
    // 此处config自动被识别为FirstConfig
    console.log(config.a);
  } else {
    // 此处config自动被识别为SecondConfig
    console.log(config.b);
  }
});

2. 可辨识联合（推荐，尤其适配React组件渲染场景） #

给每个配置类型增加唯一的标识字段，这是TS处理多分支逻辑的最佳实践，后续渲染不同React组件时也能直接通过标识匹配，从根源避免传错props的问题：

// 改造类型定义
type FirstConfig = {
  type: 'first';
  a: 'a';
};

type SecondConfig = {
  type: 'second';
  b: 'b';
};

type ConfigObject = FirstConfig | SecondConfig;
type ConfigFunction = () => ConfigObject;
const configArray: ConfigFunction[] = [() => ({ type: 'first', a: 'a' }), () => ({ type: 'second', b: 'b' })];

// 使用时直接通过标识判断
configArray.map(getConfig => {
  const config = getConfig();
  switch(config.type) {
    case 'first':
      return <FirstComponent a={config.a} />
    case 'second':
      return <SecondComponent b={config.b} />
  }
});

3. 类型断言（仅适合临时调试、100%确认逻辑无问题的场景，不推荐长期使用） #

如果你确定业务逻辑不会出问题，可以用类型断言跳过校验：

configArray.map(getConfig => {
  const { a, b } = getConfig() as FirstConfig & SecondConfig;
  console.log(a, b);
});

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