Angular项目中TypeScript Getter/Setter重复声明报错求助

你遇到的这个错误是因为直接声明了同名的类字段和存取器（get/set），TypeScript会把这两者视为重复的标识符，所以抛出了Duplicate identifier 'searchFilter'的报错。

问题代码的核心问题 #

你原来的代码同时定义了类字段和同名的get/set方法：

searchFilter: string; 
get searchFilter(): string { return this.searchFilter; } 
set searchFilter(value: string) { this.searchFilter = value; }

这里不仅存在命名冲突，而且get/set里直接返回/赋值this.searchFilter还会触发无限递归调用，这是另一个隐藏的风险。

修正后的正确写法 #

我们需要用一个私有字段来存储实际值，让get/set操作这个私有字段，既避免命名冲突，也解决递归问题：

private _searchFilter: string;

get searchFilter(): string {
  return this._searchFilter;
}

set searchFilter(value: string) {
  this._searchFilter = value;
  // 你还可以在这里添加额外逻辑，比如值变化时触发搜索、验证输入格式等
}

为什么这样写有效？ #

• 私有字段_searchFilter负责存储实际的字符串值，不会和公共的存取器searchFilter重名
• 外部代码仍然可以通过instance.searchFilter来读取或设置值，和原来的调用方式完全一致
• 你的Angular（6.0.1）和TypeScript（2.5.3）版本完全支持这种写法，不存在版本兼容问题

在Angular组件中，这种写法特别适合处理需要在值变化时执行额外逻辑的场景，比如当searchFilter更新时自动触发HTTP请求或者同步更新视图状态。

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