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 代码的大小，并提高代码的可读性和可维护性。 记住，如果构造函数参数已经使用了访问修饰符，就不需要在构造函数体内部再次赋值。 只需要处理那些需要在构造函数中进行初始化或计算，但不需要从参数传递的属性。
以上就是TypeScript 中构造函数访问修饰符导致的重复变量声明问题详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1519312.html
微信扫一扫 
支付宝扫一扫 
