typescript 中使用构造函数访问修饰符（如 public、private、protected 和 readonly）时，在编译后的 JavaScript 代码中出现重复变量声明的原因在于：当你在构造函数参数中使用访问修饰符时，TypeScript 会自动为你声明该类的属性，并在构造函数中进行赋值。这意味着你实际上进行了两次声明和赋值操作，导致编译后的 JavaScript 代码出现重复。
例如，考虑以下 TypeScript 类：
class Test { constructor(public whatever: String){} }
这段代码在编译后等价于：
class Test { constructor(whatever) { this.whatever = whatever; } }
实际上，TypeScript 会隐式地将 public whatever: string 转换为以下两部分：
- 在类中声明属性：public whatever: string;
- 在构造函数中赋值：this.whatever = whatever;
因此，如果你显式地在构造函数中再次赋值，就会导致重复赋值，例如：
class Test { constructor(public whatever: string){ this.whatever = whatever; } }
等价于：
class Test { public whatever: string; constructor(whatever: string) { this.whatever = whatever; this.whatever = whatever; } }
如何避免重复声明？
避免重复声明非常简单，只需要理解构造函数访问修饰符的作用即可。如果你在构造函数参数中使用了访问修饰符，就不需要在构造函数体内部再次进行赋值操作。
以下是一个示例：
class Coder { constructor( public readonly name : string, public age : number, public lang : string, private address : string, protected id : number = 234 ) { this.id = Math.random(); // 只需在此处处理不需要参数传递的属性 } getName() { return `My name is ${this.name}`; } } let coder = new Coder('Nayan', 28, 'JavaScript', 'LMP');
在这个例子中，name、age、lang 和 address 都在构造函数的参数列表中使用了访问修饰符，因此不需要在构造函数体内部再次赋值。只需要处理那些不需要从参数传递的属性，比如 id。
总结
理解 TypeScript 构造函数访问修饰符的工作原理对于编写干净、高效的代码至关重要。 通过避免在构造函数中重复赋值，可以减少编译后的 JavaScript 代码的大小，并提高代码的可读性和可维护性。 记住，如果构造函数参数已经使用了访问修饰符，就不需要在构造函数体内部再次赋值。 只需要处理那些需要在构造函数中进行初始化或计算，但不需要从参数传递的属性。
评论（已关闭）
评论已关闭