使用in关键字的TypeScript类型守卫未按预期收窄路由参数类型

你遇到的问题根源是：TypeScript的in操作符作为类型守卫时，对于string类型的变量，无法自动将其收窄到目标对象的字面量键类型（这里是"1" | "2" | "3"）。从类型系统角度看，string是宽泛类型，编译器无法仅凭page in ROUTES的判断，就确定page属于特定的字面量联合类型。

解决方案：自定义类型谓词函数 #

通过定义类型谓词函数，显式告诉编译器该判断可以将page的类型收窄为ROUTES的键类型：

const ROUTES = {
  '1': 'Page 1',
  '2': 'Page 2',
  '3': 'Page 3',
} as const;

// 定义类型谓词函数，明确类型收窄规则
function isRouteKey(page: string): page is keyof typeof ROUTES {
  return page in ROUTES;
}

// 使用类型谓词进行判断
const page = params.page;
if (!page || !isRouteKey(page)) {
  return <Navigate to="/profile" replace />;
}

// 此时page的类型已自动收窄为 "1" | "2" | "3"
console.log(page);

原理说明 #

类型谓词page is keyof typeof ROUTES相当于给编译器提供了“类型契约”：当函数返回true时，page的类型必然是ROUTES的键类型。相比直接使用in操作符，这种方式能让编译器明确知晓类型收窄的逻辑，从而正确推导page的类型。

为什么直接用in不行？ #

当page的类型是string时，page in ROUTES的运行时判断有效，但TypeScript不会主动将宽泛的string收缩为特定字面量联合类型——因为string包含无数可能值，编译器无法确定该检查能排除所有非目标键的情况，除非通过类型谓词明确告知。

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