TypeScript类带访问修饰符编译JS出现重复变量声明问题咨询

这是因为TypeScript中，构造函数参数带上public/private/protected修饰符是语法糖——它会自动帮你完成两件事：

1. 在类中声明对应的属性（比如public name: string会自动在类里创建name属性）
2. 在构造函数内自动执行this.name = name的赋值操作

如果你自己再手动写一遍this.name = name，就等于重复做了TS已经帮你完成的工作，编译后的JavaScript自然会出现重复的赋值语句。

举个具体例子 #

你的TypeScript代码可能是这样：

class Person {
  age: number;
  constructor(public name: string, private email: string, age: number) {
    this.name = name; // 手动重复赋值
    this.email = email; // 手动重复赋值
    this.age = age;
  }
}

编译后的JavaScript会变成：

class Person {
  constructor(name, email, age) {
    this.name = name; // TS自动生成的赋值
    this.email = email; // TS自动生成的赋值
    this.name = name; // 你手动添加的重复赋值
    this.email = email; // 你手动添加的重复赋值
    this.age = age;
  }
}

而age参数没有加修饰符，TS不会自动帮你声明和赋值，所以你必须手动写this.age = age，这部分是必要操作，不会产生重复。

解决方法 #

当构造函数参数使用了访问修饰符时，直接删除手动的赋值语句即可，TS已经帮你完成了这部分工作。修改后的代码：

class Person {
  age: number;
  constructor(public name: string, private email: string, age: number) {
    this.age = age; // 保留这行，因为age无修饰符
  }
}

编译后的JavaScript就不会有重复赋值了：

class Person {
  constructor(name, email, age) {
    this.name = name; // TS自动生成
    this.email = email; // TS自动生成
    this.age = age; // 必要的手动赋值，无重复
  }
}

本质上这不是TS违反DRY原则，而是你重复实现了TS语法糖已经提供的功能，理解这个语法糖的作用就能避免这类问题。

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