Angular服务动态添加方法后调用报错求助

为什么会出现这两个错误？ #

首先得搞清楚你代码里的两个核心问题：

1. 编译错误（TS2339）：TypeScript是静态类型语言，你的UtilitiesService类定义里没有声明setLastPublishedSchedule这类方法，编译器自然会认为这些属性不存在，直接抛出错误。
2. 运行时错误：你在addGetFunction、addSetFunction里是把方法添加到UtilitiesService类本身（也就是构造函数对象）上，而不是类的实例。但你在组件里调用的是实例对象this.utilService的方法，实例上根本没有这些动态添加的方法，所以运行时会报错。

解决方案1：适配动态方法（保留你的动态生成思路） #

如果你想继续用动态生成方法的方式，需要修改两处：把方法添加到实例上，同时给类添加索引签名让TypeScript允许动态属性。

修改后的服务代码：

@Injectable() 
export class UtilitiesService { 
  public keySet = [ 
    "CalendarDates", 
    "LastPublishedSchedule", 
    "ManageStores", 
    "SelectedStore" 
  ]; 

  // 添加索引签名，告诉TypeScript这个类可以有任意字符串类型的属性
  [key: string]: any;

  constructor() { 
    this.addGetSetClearFunctions(); 
  } 

  addGetFunction(key: string) { 
    // 给当前实例添加方法，而不是类本身
    this["get" + key] = () => { 
      // 加个空值判断，避免JSON.parse(null)报错
      return JSON.parse(sessionStorage.getItem(key) || 'null'); 
    } 
  } 

  addSetFunction(key: string) { 
    this["set" + key] = (value: any) => { 
      sessionStorage.setItem(key, JSON.stringify(value)); 
    } 
  } 

  addClearFunction(key: string) { 
    this["clear" + key] = () => { 
      sessionStorage.removeItem(key); 
    } 
  } 

  clearAll() { 
    sessionStorage.clear(); 
  } 

  addGetSetClearFunctions() { 
    for(let i = 0; i < this.keySet.length; i++) { 
      this.addGetFunction(this.keySet[i]); 
      this.addSetFunction(this.keySet[i]); 
      this.addClearFunction(this.keySet[i]); 
    } 
  } 
}

组件调用时，现在既不会有编译错误，运行时也能正常执行：

this.utilService.setLastPublishedSchedule(response);
// 或者用类型断言（如果索引签名让你觉得不够严谨）
(this.utilService as any).setLastPublishedSchedule(response);

解决方案2：静态定义方法（更符合TypeScript风格） #

TypeScript更推荐静态类型的写法，如果你不想用动态生成的方式，可以直接预定义所有需要的get/set/clear方法，这样完全不会有类型问题：

@Injectable() 
export class UtilitiesService { 
  // 用对象统一管理key，避免硬编码
  private sessionKeys = {
    CalendarDates: 'CalendarDates',
    LastPublishedSchedule: 'LastPublishedSchedule',
    ManageStores: 'ManageStores',
    SelectedStore: 'SelectedStore'
  };

  // CalendarDates相关方法
  getCalendarDates() {
    return JSON.parse(sessionStorage.getItem(this.sessionKeys.CalendarDates) || 'null');
  }
  setCalendarDates(value: any) {
    sessionStorage.setItem(this.sessionKeys.CalendarDates, JSON.stringify(value));
  }
  clearCalendarDates() {
    sessionStorage.removeItem(this.sessionKeys.CalendarDates);
  }

  // LastPublishedSchedule相关方法
  getLastPublishedSchedule() {
    return JSON.parse(sessionStorage.getItem(this.sessionKeys.LastPublishedSchedule) || 'null');
  }
  setLastPublishedSchedule(value: any) {
    sessionStorage.setItem(this.sessionKeys.LastPublishedSchedule, JSON.stringify(value));
  }
  clearLastPublishedSchedule() {
    sessionStorage.removeItem(this.sessionKeys.LastPublishedSchedule);
  }

  // 其他key的方法以此类推...

  clearAll() { 
    sessionStorage.clear(); 
  } 
}

组件调用时完全符合类型检查：

this.utilService.setLastPublishedSchedule(response);

解决方案3：泛型统一方法（最简洁的类型安全写法） #

如果不想写重复的方法，可以用泛型+联合类型来统一处理所有session key，既简洁又保证类型安全：

// 定义所有允许的session key类型
type SessionKey = "CalendarDates" | "LastPublishedSchedule" | "ManageStores" | "SelectedStore";

@Injectable() 
export class UtilitiesService { 
  // 泛型get方法，支持指定返回类型
  get<T>(key: SessionKey): T | null {
    const item = sessionStorage.getItem(key);
    return item ? JSON.parse(item) : null;
  }

  // 泛型set方法，支持指定值的类型
  set<T>(key: SessionKey, value: T): void {
    sessionStorage.setItem(key, JSON.stringify(value));
  }

  clear(key: SessionKey): void {
    sessionStorage.removeItem(key);
  }

  clearAll(): void { 
    sessionStorage.clear(); 
  } 
}

组件调用示例：

// 设置值，自动推导类型
this.utilService.set("LastPublishedSchedule", response);

// 获取值，指定返回类型（比如你的Schedule类型）
const lastSchedule = this.utilService.get<Schedule>("LastPublishedSchedule");

这种方式是最推荐的，既避免了重复代码，又完全符合TypeScript的类型安全要求。

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