Angular开发报错：类型'this[keyof this]'不存在属性'next'

问题原因 #

你遇到的错误是因为TypeScript无法确定this[event.type as keyof typeof this]对应的属性类型——组件内存在字符串、NgbAlert、Subject等多种类型的属性，编译器无法保证你访问的属性一定是带有next方法的Subject对象。另外代码还存在属性名匹配错误：你定义的Subject变量是_success、_warning、_failed（带下划线），但event.type应该是success这类不带下划线的值，直接用this[event.type]会访问到successMessage这类字符串属性，而非目标Subject。

解决方案 #

下面提供几种无需if-else分支的解决方式，按推荐程度排序：

1. 创建类型安全的映射对象（最推荐） #

提前构建类型明确的映射表，将类型字符串直接关联到对应的Subject，TypeScript能完全推断类型，无需额外断言：

@Component({
  selector: 'app-common-alert',
  templateUrl: './common-alert.component.html',
  styleUrls: ['./common-alert.component.css']
})
export class CommonAlertComponent implements OnInit {
  // ...原有代码不变

  // 新增映射表，关联类型字符串与对应Subject
  private readonly alertSubjectMap = {
    success: this._success,
    warning: this._warning,
    failed: this._failed
  };

  // 给event定义明确类型，避免any
  public changeResultMessage(event: { type: keyof typeof this.alertSubjectMap, message: string }) {
    this.alertSubjectMap[event.type].next(event.message);
  }

  // ...原有代码不变
}

2. 修正属性名并添加类型断言 #

如果不想新增映射表，可以修正属性名的拼接，同时通过类型断言告诉编译器当前属性是Subject类型：

// 给event定义明确类型
public changeResultMessage(event: { type: 'success' | 'warning' | 'failed', message: string }) {
  // 拼接下划线，匹配Subject变量名
  const subjectKey = `_${event.type}` as keyof typeof this;
  // 断言为Subject<string>
  (this[subjectKey] as Subject<string>).next(event.message);
}

3. 使用类型守卫做严谨检查 #

如果event.type可能传入无效值，可以添加类型守卫确保运行时安全：

// 新增类型守卫函数
private isValidSubjectKey(key: string): key is '_success' | '_warning' | '_failed' {
  return ['_success', '_warning', '_failed'].includes(key);
}

public changeResultMessage(event: any) {
  const subjectKey = `_${event.type}`;
  // 先检查key是否有效，再调用next
  if (this.isValidSubjectKey(subjectKey)) {
    this[subjectKey].next(event.message);
  } else {
    // 可选：处理无效类型的情况
    console.warn(`无效的提示类型：${event.type}`);
  }
}

额外注意点 #

• 你的close方法中使用了this.alerts，但组件内未定义该属性，会导致运行时错误，需要补充定义或修正逻辑。
• 尽量避免使用any类型，给event定义明确的类型能提升代码可维护性和类型安全性。

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