本文深入探讨TypeScript中带有访问修饰符（如public、private、protected、readonly）的构造函数参数，为何在编译为JavaScript时可能导致属性的重复赋值。核心在于TypeScript的“参数属性”特性，它会自动声明类属性并进行初始化。若开发者再手动赋值，便会造成冗余。文章将详细解释这一机制，并提供规范的编写方法，帮助开发者编写更简洁高效的TypeScript代码。
TypeScript参数属性：语法糖的便利与潜在陷阱
TypeScript为我们提供了一种简洁的语法糖，即“参数属性”（Parameter Properties）。当在类的构造函数参数前使用访问修饰符（public、private、protected）或readonly修饰符时，TypeScript编译器会自动执行以下两项操作：
声明类属性： 在类的作用域内声明一个与该参数同名的属性。初始化属性： 在构造函数内部，将传入的参数值赋给这个新声明的类属性。
例如，以下两种TypeScript写法在编译为JavaScript时是等效的：
写法一：使用参数属性（简洁）
class TestA { constructor(public name: string) { // 无需手动赋值 }}
写法二：手动声明和赋值（冗长）
class TestB { public name: string; // 显式声明属性 constructor(name: string) { this.name = name; // 显式赋值 }}
这两种写法编译后的JavaScript代码大致如下：
"use strict";class TestA { constructor(name) { this.name = name; // 自动生成的赋值 }}class TestB { constructor(name) { this.name = name; // 手动编写的赋值 }}
可以看到，参数属性极大地简化了类的定义，减少了重复代码。
问题剖析：为何会出现重复赋值？
当开发者不完全理解参数属性的自动处理机制时，就可能引入不必要的重复赋值。考虑以下TypeScript代码示例：
class Coder { age : number; // 这是一个普通的类属性，不在参数属性讨论范围内 constructor( public readonly name : string, // 参数属性：public + readonly age : number, // 普通参数 public lang : string, // 参数属性：public private address : string, // 参数属性：private protected id : number = 234 // 参数属性：protected + 默认值 ) { // 对参数属性进行显式赋值 this.name = name; // 冗余赋值 this.age = age; // 非参数属性，此处赋值是必要的 this.lang = lang; // 冗余赋值 this.address = address; // 冗余赋值 this.id = Math.random(); // 冗余的初始赋值，然后被覆盖 } getName() { return `My name is ${this.name}`; }}
当我们编译这段TypeScript代码时，生成的JavaScript会暴露出重复赋值的问题：
"use strict";class Coder { constructor(name, age, lang, address, id = 234) { // TypeScript为参数属性自动生成的代码 this.name = name; // 自动生成 this.lang = lang; // 自动生成 this.address = address; // 自动生成 this.id = id; // 自动生成 // 开发者在构造函数内部手动编写的代码 this.name = name; // 冗余赋值 this.age = age; // 必要赋值 this.lang = lang; // 冗余赋值 this.address = address; // 冗余赋值 this.id = Math.random(); // 覆盖了自动生成的this.id = id; } getName() { return `My name is ${this.name}`; }}
从编译后的JavaScript代码中可以清晰地看到，对于name、lang和address这些带有访问修饰符的参数，this.propertyName = propertyName;这行赋值语句出现了两次。第一次是TypeScript编译器根据参数属性的定义自动生成的，第二次是开发者在构造函数体内部手动编写的。这显然违反了DRY（Don’t Repeat Yourself）原则，虽然在运行时通常不会造成错误，但增加了代码的冗余和编译产物的体积。
对于id属性，情况略有不同。虽然this.id = id;这条自动生成的赋值语句依然存在，但紧接着的this.id = Math.random();会立即覆盖它。这意味着自动生成的赋值实际上是多余的，因为它提供的初始值很快就被新的值取代了。
规范实践：如何正确使用参数属性
为了避免这种重复赋值，我们应该充分利用TypeScript参数属性的便利性，并遵循其设计意图。如果一个构造函数参数带有访问修饰符（或readonly），那么就不应该在构造函数内部再次手动为对应的类属性赋值。TypeScript会替你完成这项工作。
以下是修改后的规范TypeScript代码示例：
class Coder { age: number; // 普通类属性，需要手动声明和赋值 constructor( public readonly name: string, // 参数属性，TypeScript自动处理 age: number, // 普通参数，需要手动赋值给对应的类属性 public lang: string, // 参数属性，TypeScript自动处理 private address: string, // 参数属性，TypeScript自动处理 protected id: number = 234 // 参数属性，TypeScript自动处理 ) { // 对于 'age'，因为它没有访问修饰符，所以必须手动赋值给类属性 this.age = age; // 对于 'name', 'lang', 'address'，TypeScript已经通过参数属性处理了声明和赋值 // 无需再写 this.name = name; 等语句。 // 对于 'id'，如果我们需要在构造函数中修改其初始值（由参数提供）， // 可以在参数属性自动赋值之后进行。 // 这里的 Math.random() 会覆盖由参数属性自动赋的 id 值。 this.id = Math.random(); } getName(): string { return `My name is ${this.name}`; }}// 示例使用let coder = new Coder('Nayan', 28, 'JavaScript', 'LMP');console.log(coder.getName()); // My name is Nayanconsole.log(coder.age); // 28// coder.name = 'Golu'; // 报错：name是只读属性console.log(coder.id); // 每次运行都会是不同的随机数
这段代码编译后的JavaScript将更加简洁，不再包含冗余的赋值：
"use strict";class Coder { constructor(name, age, lang, address, id = 234) { // TypeScript为参数属性自动生成的代码 this.name = name; this.lang = lang; this.address = address; this.id = id; // 自动赋值 // 开发者手动编写的代码 this.age = age; this.id = Math.random(); // 覆盖了上面的 this.id = id; } getName() { return `My name is ${this.name}`; }}
现在，除了id属性的覆盖性赋值（这是预期行为），其他参数属性的赋值都只发生了一次，代码更加清晰和高效。
注意事项与总结
参数属性的优势： 参数属性是TypeScript提供的一种强大且简洁的特性，它减少了类定义中的样板代码，使代码更易读、更易维护。避免冗余： 当一个构造函数参数带有public、private、protected或readonly修饰符时，TypeScript会自动为其声明对应的类属性并在构造函数中进行赋值。因此，请不要在构造函数体内再次手动编写this.propertyName = propertyName;。普通参数的处理： 对于不带访问修饰符的构造函数参数（例如示例中的age），如果需要将其值保存为类属性，则必须在类中显式声明该属性，并在构造函数体内手动进行赋值（this.age = age;）。重写行为： 如果参数属性自动赋值后，你希望在构造函数中立即修改该属性的值（如示例中的id = Math.random()），这是允许的。在这种情况下，自动生成的赋值语句依然会存在于编译后的JavaScript中，但其值会立即被后续的显式赋值所覆盖。虽然仍存在“冗余的初始赋值”，但这通常是为了实现特定逻辑而进行的有意操作。
理解TypeScript的编译行为，特别是参数属性的机制，是编写高质量、高效能TypeScript代码的关键。通过遵循这些规范，开发者可以避免不必要的冗余，使代码更加精炼和专业。
以上就是深入理解TypeScript构造函数中的参数属性与编译行为：避免冗余赋值的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1519361.html
微信扫一扫 
支付宝扫一扫 
