Angular依赖注入时类型安全失效问题求助

问题原因 #

Angular的依赖注入系统无法直接保留泛型类的类型参数信息——TypeScript泛型是编译时特性，而DI的令牌匹配是运行时行为。当你在providers中注册LocalStorageService<LocalStorageModel>时，Angular实际是用LocalStorageService这个原始类作为注入令牌，泛型参数<LocalStorageModel>会被类型擦除，最终inject(LocalStorageService)获取到的实例类型退化为LocalStorageService<unknown>，导致类型校验完全失效。

解决方案 #

以下两种方案可同时保留DI能力和严格类型校验：

方案1：创建具体子类继承泛型服务 #

通过定义指定泛型参数的子类，让Angular DI识别到明确的类型：

// 定义绑定了泛型参数的子类
@Injectable()
export class AppLocalStorageService extends LocalStorageService<LocalStorageModel> {
  constructor(@Inject(LOCAL_STORAGE_NAMESPACE) namespace: string) {
    super(namespace);
  }
}

// 模块/组件的providers配置
providers: [
  { provide: LOCAL_STORAGE_NAMESPACE, useValue: 'dumbnamespace' },
  AppLocalStorageService
]

// 组件中注入（此时会触发类型校验）
private testTypeChecking = inject(AppLocalStorageService).set(LocalStorageKey.City, 22);

方案2：使用类型化注入令牌 #

通过InjectionToken显式声明泛型类型，配合工厂函数提供实例：

// 定义带类型的注入令牌
import { InjectionToken } from '@angular/core';

export const APP_LOCAL_STORAGE_SERVICE = new InjectionToken<LocalStorageService<LocalStorageModel>>(
  'AppLocalStorageService'
);

// 模块/组件的providers配置
providers: [
  { provide: LOCAL_STORAGE_NAMESPACE, useValue: 'dumbnamespace' },
  {
    provide: APP_LOCAL_STORAGE_SERVICE,
    useFactory: (namespace: string) => new LocalStorageService<LocalStorageModel>(namespace),
    deps: [LOCAL_STORAGE_NAMESPACE] // 声明依赖的令牌
  }
]

// 组件中注入（此时会触发类型校验）
private testTypeChecking = inject(APP_LOCAL_STORAGE_SERVICE).set(LocalStorageKey.City, 22);

验证对比 #

手动实例化时类型校验正常，是因为你直接显式指定了泛型参数<LocalStorageModel>，TypeScript可在编译时完成类型检查：

const testTypeChecking = () => {
  const localStorageService = new LocalStorageService<LocalStorageModel>('id');
  localStorageService.set(LocalStorageKey.Name, 22); // TypeScript会报错：number类型无法赋值给string类型
};

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