TypeScript指定参数类型值问题：组件类型访问报错

问题场景 #

原有TypeScript接口定义如下，运行正常：

interface IComponent {
  type: string;
  text: string;
}

interface IComponents {
  cc: IComponent;
  lajota: IComponent;
}

interface IMain {
  components: IComponents
}

新增名为caneta的组件后，更新IComponents接口：

interface IComponentCaneta {
  property: string;
}  

interface IComponents {
  cc?: IComponent;
  lajota?: IComponent;
  caneta?: IComponentCaneta;
}

但现有依赖type属性的处理方法出现报错：

// 遍历components对象中的每个组件
function myFunc() {
  _.each(components, (val, key) => {
    if (key === 'cc') {...}
    else if (val?.type === 'xxx') {  // 此处报错：Property 'type' does not exist on type 'IComponentCaneta'
      components[key].type = 'xxxx'
    }
  })
}

尝试将type设为可选属性、用switch/if判断类型均未解决问题，希望能让方法仅处理cc或lajota这类IComponent类型的组件。

解决方案 #

1. 通过键名判断缩小类型范围 #

直接根据遍历的key判断是否为目标组件，TypeScript会自动根据键名推断对应值的类型：

function myFunc() {
  _.each(components, (val, key) => {
    if (key === 'cc') {
      // 处理cc组件逻辑
    } else if (key === 'lajota') {
      // 此时val被推断为IComponent | undefined
      if (val?.type === 'xxx') {
        val.type = 'xxxx';
      }
    }
    // caneta组件会进入默认分支，可选择跳过或单独处理
  })
}

2. 仅遍历目标组件的键集合 #

如果明确只需要处理cc和lajota，可以手动指定要遍历的键数组，避免触及caneta：

function myFunc() {
  // 定义仅包含目标键的数组，类型为'cc' | 'lajota'的联合类型
  const targetComponentKeys: Array<'cc' | 'lajota'> = ['cc', 'lajota'];
  
  targetComponentKeys.forEach(key => {
    const component = components[key];
    if (!component) return; // 处理可选属性的情况
    
    if (key === 'cc') {
      // 处理cc逻辑
    } else if (component.type === 'xxx') {
      component.type = 'xxxx';
    }
  });
}

3. 用类型守卫函数过滤组件类型 #

如果需要更通用的类型判断，可以定义类型守卫函数，识别出IComponent类型的组件：

// 类型守卫函数，判断值是否为IComponent类型
function isIComponent(val: unknown): val is IComponent {
  return typeof val === 'object' && val !== null 
    && 'type' in val && typeof (val as IComponent).type === 'string'
    && 'text' in val && typeof (val as IComponent).text === 'string';
}

function myFunc() {
  _.each(components, (val, key) => {
    if (key === 'cc') {
      // 处理cc逻辑
    } else if (isIComponent(val) && val.type === 'xxx') {
      val.type = 'xxxx';
    }
  });
}

为什么之前的尝试失败？ #

你之前用switch/if判断时，错误地基于type属性做分支，但caneta组件不存在type，导致类型推断失败。正确的做法是基于键名key判断，或者用类型守卫明确组件类型，让TypeScript正确识别当前处理的组件是否拥有type属性。

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