如何在Angular 17的类接口中声明Signal？

问题场景 #

类中通过Signal定义属性：

public varName = signal('');

但实现对应接口IVariableUnitBuilder时，出现以下TypeScript错误：

TS2416: 类型 VariableUnitBuilder 中的属性 varName 无法赋值给基类型 IVariableUnitBuilder 中的同名属性
类型 WritableSignal<string> 不能赋值给类型 string

解决方案 #

方案1：修正接口类型匹配Signal #

将接口中varName的类型改为WritableSignal<string>（以Angular Signal为例，需先导入对应类型）：

import { WritableSignal } from '@angular/core';

interface IVariableUnitBuilder {
  varName: WritableSignal<string>;
}

类中signal('')返回的WritableSignal<string>类型即可与接口定义完全匹配。

方案2：通过getter隐藏Signal实现，对外暴露字符串类型 #

如果希望接口对外仅暴露字符串值，而非Signal对象，可在类中使用私有Signal变量，通过getter实现接口的string类型属性：

// 接口定义
interface IVariableUnitBuilder {
  varName: string;
}

// 类实现
import { signal, WritableSignal } from '@angular/core';

class VariableUnitBuilder implements IVariableUnitBuilder {
  private _varName: WritableSignal<string> = signal('');

  // 实现接口的string类型属性
  get varName(): string {
    return this._varName();
  }

  // 可选：提供修改值的方法
  updateVarName(value: string): void {
    this._varName.set(value);
  }
}

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