TypeScript模型类中为变量赋值get函数报错的解决方案

原代码报错原因 #

• 类型不匹配：FullName被标注为string类型，实际赋值为函数，TypeScript类型校验直接抛出错误
• 语法不支持：构造函数参数列表仅能声明并初始化普通实例属性，无法直接定义getter访问器
• 上下文错误：你写的匿名函数未绑定类实例上下文，内部无法直接获取到实例的FirstName、LastName属性值

推荐方案：使用原生get访问器 #

这是最符合TypeScript类设计规范的实现方式，FullName会作为计算属性存在，访问时自动计算返回值，且会跟随FirstName、LastName的修改自动同步更新，不需要单独占用存储空间：

export class User {
  constructor(
    public Id: number,
    public Prefix: string,
    public FirstName: string,
    public LastName: string,
    public MiddleInitial: string,
  ) {}

  // 定义get访问器，访问时不需要加括号，直接当普通属性读取即可
  get FullName(): string {
    return `${this.FirstName} ${this.LastName}`;
  }
}

调用示例：

const user = new User(1, "Ms.", "Li", "Si", "");
console.log(user.FullName); // 输出 Li Si
// 修改名/姓后FullName会自动同步更新
user.LastName = "Xiaosi";
console.log(user.FullName); // 输出 Li Xiaosi

备选方案：构造函数内赋值普通属性 #

如果你不需要计算属性自动更新的特性，也可以在构造函数内部直接给FullName赋值为固定字符串属性：

export class User {
  public FullName: string;
  constructor(
    public Id: number,
    public Prefix: string,
    public FirstName: string,
    public LastName: string,
    public MiddleInitial: string,
  ) {
    // 必须通过this关键字访问实例上的属性
    this.FullName = `${this.FirstName} ${this.LastName}`;
  }
}

注意：该方案下FullName是实例初始化时生成的固定字符串，后续修改FirstName/LastName不会同步更新FullName的值，非特殊场景优先使用get访问器方案。

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