为何TypeScript认定非空元组数组pop()可能返回undefined？

问题场景 #

定义如下AtLeastOneOfCriteria<T>类，构造函数要求传入至少两个Criterion<T>实例的元组：

export class AtLeastOneOfCriteria<T> implements Criterion<T> {
  private criteriaList: [Criterion<T>, Criterion<T>, ...Criterion<T>[]]

  // 构造函数要求至少传入两个条件
  constructor (criteriaList: [Criterion<T>, Criterion<T>, ...Criterion<T>[]]) {
    this.criteriaList = [...criteriaList]
  }

  meetCriterion (items: T[]): T[] {
    const list: [Criterion<T>, Criterion<T>, ...Criterion<T>[]] = [...this.criteriaList]
    // 以下变量被标记为'Criterion<T> | undefined'
    const firstCriterion: Criterion<T> = list.pop()
    const secondCriterion: Criterion<T> = list.pop()
    let resultCriterion = new OrCriteria<T>(firstCriterion, secondCriterion)
    for (const criterion of list) {
      resultCriterion = new OrCriteria<T>(resultCriterion, criterion)
    }
    return resultCriterion.meetCriterion(items)
  }
}

ESLint报错：

Type 'Criterion | undefined' is not assignable to type 'Criterion'.
Type 'undefined' is not assignable to type 'Criterion'.

问题原因 #

尽管criteriaList被定义为至少包含两个元素的元组类型，但TypeScript的数组方法pop()返回类型固定为T | undefined——类型系统无法跟踪数组在运行时的长度变化，哪怕初始是元组，复制后调用pop()时，TS仍会假设数组可能为空，因此返回值包含undefined类型。

解决方案 #

方案1：数组解构（推荐） #

直接通过解构从元组中取出第一个元素作为初始条件，剩余元素依次拼接OR逻辑，无需担心undefined问题：

meetCriterion(items: T[]): T[] {
  // 解构元组，第一个元素作为初始条件，剩余为后续条件
  let [resultCriterion, ...restCriteria] = this.criteriaList;
  for (const criterion of restCriteria) {
    resultCriterion = new OrCriteria<T>(resultCriterion, criterion);
  }
  return resultCriterion.meetCriterion(items);
}

方案2：非空断言（简单但需确保逻辑安全） #

如果坚持使用pop()，可以用非空断言!告诉TypeScript该值一定不为undefined，但前提是要保证构造函数的约束严格生效（避免运行时数组为空）：

meetCriterion(items: T[]): T[] {
  const list = [...this.criteriaList];
  const firstCriterion = list.pop()!;
  const secondCriterion = list.pop()!;
  let resultCriterion = new OrCriteria<T>(firstCriterion, secondCriterion);
  for (const criterion of list) {
    resultCriterion = new OrCriteria<T>(resultCriterion, criterion);
  }
  return resultCriterion.meetCriterion(items);
}

方案3：类型守卫验证 #

添加运行时检查，确保弹出的值不为undefined，同时让TypeScript类型系统识别这一点：

meetCriterion(items: T[]): T[] {
  const list = [...this.criteriaList];
  const firstCriterion = list.pop();
  const secondCriterion = list.pop();
  
  // 运行时验证，确保两个条件存在
  if (!firstCriterion || !secondCriterion) {
    throw new Error("AtLeastOneOfCriteria requires at least two criteria");
  }
  
  let resultCriterion = new OrCriteria<T>(firstCriterion, secondCriterion);
  for (const criterion of list) {
    resultCriterion = new OrCriteria<T>(resultCriterion, criterion);
  }
  return resultCriterion.meetCriterion(items);
}

补充说明 #

构造函数的元组类型约束仅在编译时生效，如果运行时有人绕过TypeScript直接传入不符合要求的数组（比如通过JS调用），仍可能出现问题。方案3的运行时检查可以避免这种情况，而方案1和解构的方式则天然利用元组的结构保证初始条件存在。

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