Angular路由使用data属性时，如何让VSCode提供IntelliSense智能提示？

下面提供几种可行方案，给isEditMode字段添加智能提示：

1. 全局扩展Route接口定义路由数据类型 #

先创建路由数据的类型接口，再通过TypeScript模块扩充功能，修改Angular原生Route接口的data类型：

// 定义路由数据的类型结构
export interface DonutRouteData {
  isEditMode?: boolean;
}

// 扩充Angular的Route接口，指定data的类型
declare module '@angular/router' {
  interface Route {
    data?: DonutRouteData;
  }
}

配置路由时，data属性会自动提示isEditMode字段；组件中获取数据时也能直接得到智能提示：

ngOnInit(): void {
  this.isEditMode = this.activatedRoute.snapshot.data.isEditMode;
}

2. 给路由数组指定自定义泛型类型 #

如果不想全局修改Route接口，可以创建自定义路由类型，限制data的结构，再给路由数组指定该类型：

import { Route } from '@angular/router';

// 定义路由数据类型
interface DonutRouteData {
  isEditMode: boolean;
}

// 自定义路由类型，覆盖原Route的data类型
type DonutRoute = Omit<Route, 'data'> & { data: DonutRouteData };

// 路由数组使用自定义类型
const adminChildrenRoute: DonutRoute[] = [
  { path: 'donuts', component: DonutListComponent, data: {} as DonutRouteData },
  {
    path: 'donuts/new',
    component: DonutSingleComponent,
    data: { isEditMode: false },
  },
  {
    path: 'donuts/:id',
    component: DonutSingleComponent,
    data: { isEditMode: true },
  },
];

组件中获取数据时，通过类型断言让TypeScript识别数据结构：

ngOnInit(): void {
  const routeData = this.activatedRoute.snapshot.data as DonutRouteData;
  this.isEditMode = routeData.isEditMode;
}

3. 直接使用类型断言（临时方案） #

如果只是想在组件中快速获得提示，无需修改路由配置，可在获取数据时直接断言类型：

// 先定义数据结构
interface RouteData {
  isEditMode: boolean;
}

ngOnInit(): void {
  this.isEditMode = (this.activatedRoute.snapshot.data as RouteData).isEditMode;
}

这样VS Code就能识别isEditMode字段并提供智能提示。

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