I have React + TypeScript code like this:

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 complains with this error: Variable 'text' is used before being assigned.

But I thought TypeScript understands if/else logic. In this code, type is always going to be assigned to a string.

Why doesn’t TypeScript understand the if/else logic?