升级Angular 14时pathMatch路由类型问题咨询

问题背景 #

从 Angular 13 升级到 14 时，官方升级文档提到：定义包含 pathMatch 的路由时，需要显式转换为 Route 或 Routes 类型，且 Route.pathMatch 不再兼容普通 string 类型。但查看 Angular 官方 Route 接口定义，pathMatch 类型为 pathMatch?: 'prefix' | 'full'，本质还是字符串字面量类型。现有路由代码如下：

const routes: Routes = [
  { path: '', pathMatch: 'full', component: HomeComponent },
];

需转换的对象是什么？ #

需要显式标注类型的是单个路由对象字面量。

比如如果你的代码是未显式标注类型的单个路由对象：

const homeRoute = { path: '', pathMatch: 'full', component: HomeComponent };
const routes: Routes = [homeRoute];

此时 homeRoute 会被 TypeScript 隐式推断为包含 pathMatch: string 的普通对象，不符合 Route 接口的类型要求，这时候就需要给单个路由对象显式标注 Route 类型，或者用类型断言：

// 方式1：显式标注类型
const homeRoute: Route = { path: '', pathMatch: 'full', component: HomeComponent };
// 方式2：类型断言
const homeRoute = { path: '', pathMatch: 'full', component: HomeComponent } as Route;

而你当前的代码已经给 routes 数组标注了 Routes 类型，数组内的路由对象会被自动约束为 Route 类型，其实已经满足升级要求，不会触发类型错误。

为何会出现该类型兼容问题？ #

核心原因是 Angular 14 收紧了路由的类型检查逻辑，同时 TypeScript 的类型推断特性导致了类型不匹配：

• Angular 官方 Route 接口中，pathMatch 的类型是字符串字面量类型 'prefix' | 'full'，这是一种比普通 string 更严格的窄类型，只允许指定的两个字符串值。
• 在 Angular 13 中，类型检查相对宽松，当你定义未标注类型的路由对象时，TypeScript 会把 pathMatch: 'full' 隐式推断为宽泛的 string 类型，此时仍能和 Route 接口兼容。
• 但 Angular 14 严格要求 pathMatch 必须是指定的字面量类型，未显式标注 Route 类型的对象会被推断为 string 类型，从而触发类型不兼容的错误。显式标注类型后，TypeScript 会强制把 pathMatch 的值约束为 'prefix' | 'full'，解决类型匹配问题。

内容的提问来源于stack exchange，提问作者Green Grasso Holm