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 Nayan
console.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代码的关键。通过遵循这些规范，开发者可以避免不必要的冗余，使代码更加精炼和专业。
