为何TypeScript无法识别限制为3个字符串的Props的if/else逻辑？

我编写了如下React + TypeScript代码：

type Props = {
  type: 'exams' | 'exam attempt' | 'review questions';
};

export default function Header({ type }: Props) {
  let text: string;

  if (type === 'exams' || type === 'exam attempt') }
    text = "Exams";
  } else if (type === 'review questions') {
    text = "Review Questions"
  }

  return (
    <div>
      {text}
    </div>
  );
}

TypeScript报错：Variable 'text' is used before being assigned.
我原以为TypeScript能识别if/else逻辑，此处type必然是三个指定字符串之一，为何TS无法识别该逻辑？

首先你代码里有个语法错误：if语句的闭合括号写成了}（应该是)），这个错误会直接干扰TS的控制流分析，让它无法正确解析分支逻辑。

即便修复了语法错误，TS的控制流分析对穷尽分支的判断有严格要求：你用的是else if而非else兜底，TS不会自动把类型定义的约束和分支判断做完全关联——哪怕从类型看type只有三个可能值，TS仍会认为存在未覆盖的分支场景，因此判定text可能未被赋值。

方案1：用else兜底替换最后一个else if #

把最后一个else if改成else，让TS明确所有分支都已覆盖：

type Props = {
  type: 'exams' | 'exam attempt' | 'review questions';
};

export default function Header({ type }: Props) {
  let text: string;

  if (type === 'exams' || type === 'exam attempt') { // 修复括号错误
    text = "Exams";
  } else {
    text = "Review Questions"
  }

  return (
    <div>
      {text}
    </div>
  );
}

方案2：添加穷尽检查（适合后续扩展类型的场景） #

如果之后可能给type新增取值，建议加穷尽检查，既确保所有分支被覆盖，也能让TS确认text一定会被赋值：

type Props = {
  type: 'exams' | 'exam attempt' | 'review questions';
};

export default function Header({ type }: Props) {
  let text: string;

  if (type === 'exams' || type === 'exam attempt') { // 修复括号错误
    text = "Exams";
  } else if (type === 'review questions') {
    text = "Review Questions"
  } else {
    // 若新增type值，此处会触发编译错误
    const _exhaustiveCheck: never = type;
    throw new Error(`Unexpected type: ${_exhaustiveCheck}`);
  }

  return (
    <div>
      {text}
    </div>
  );
}

方案3：用条件表达式简化（最简洁） #

直接用三元表达式或对象映射赋值，从根源避免变量未初始化问题：

type Props = {
  type: 'exams' | 'exam attempt' | 'review questions';
};

export default function Header({ type }: Props) {
  const text = type === 'review questions' ? "Review Questions" : "Exams";

  return (
    <div>
      {text}
    </div>
  );
}

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