TypeScript 中的参数属性
typescript 提供了一种简洁的语法，允许开发者在构造函数参数上直接使用访问修饰符（public、private、protected）和 readonly 修饰符。这种特性被称为“参数属性”（parameter properties）。当一个构造函数参数被标记为参数属性时，typescript 编译器会自动完成两项工作：
- 在类上声明一个同名的成员属性。
- 在构造函数体内部，将该参数的值赋给新声明的成员属性。
这种机制极大地简化了类属性的初始化过程，减少了样板代码。例如：
class Test {
constructor(public whatever: string) {
// 这里的 whatever 已经自动声明为类的公共属性，并被赋值
}
}这段 TypeScript 代码在编译为 JavaScript 后，其效果等同于：
class Test {
constructor(whatever) {
this.whatever = whatever; // 自动完成的赋值
}
}冗余声明问题的产生
当开发者在构造函数中使用了参数属性，但又在构造函数体内部显式地对这些参数属性进行赋值时，就会导致编译后的 JavaScript 代码中出现重复的变量声明和赋值。这违反了 DRY（Don't Repeat Yourself）原则，并可能导致编译输出的冗余。
考虑以下 TypeScript 类定义：
class Coder {
age: number; // 普通属性声明
constructor(
public readonly name: string, // 参数属性
age: number, // 普通构造函数参数
public lang: string, // 参数属性
private address: string, // 参数属性
protected id: number = 234 // 参数属性，带默认值
) {
// 对参数属性进行显式赋值
this.name = name;
this.age = age; // 对普通属性进行赋值
this.lang = lang;
this.address = address;
this.id = Math.random(); // 覆盖默认值和参数属性的自动赋值
}
getName(): string {
return `My name is ${this.name}`;
}
}当上述 TypeScript 代码被编译为 JavaScript 后（例如使用 tsc 命令），其输出会包含以下重复的赋值语句：
"use strict";
class Coder {
constructor(name, age, lang, address, id = 234) {
// 第一次赋值：由参数属性自动生成
this.name = name;
this.lang = lang;
this.address = address;
this.id = id;
// 第二次赋值：由构造函数体内的显式赋值生成
this.name = name; // 重复
this.age = age; // 非重复，因为 age 不是参数属性
this.lang = lang; // 重复
this.address = address; // 重复
this.id = Math.random(); // 重复，且覆盖了上一个赋值
}
getName() {
return `My name is ${this.name}`;
}
}从编译后的 JavaScript 代码中可以看出，对于 name、lang、address 和 id 这些带有访问修饰符的构造函数参数，都出现了两次 this.propertyName = parameterName; 形式的赋值。第一次是 TypeScript 编译器为参数属性自动生成的，第二次则是由于构造函数体内的显式赋值。
值得注意的是，age 属性虽然也在构造函数中被赋值 (this.age = age;)，但由于 age 参数在构造函数签名中没有访问修饰符，它不是参数属性。因此，它只在类级别声明了一次 (age: number;)，并在构造函数体内被赋值一次，没有出现重复。
最佳实践：避免重复声明
为了避免这种冗余，正确的做法是：对于声明为参数属性的构造函数参数，不要在构造函数体内部再次显式地进行赋值。 TypeScript 编译器已经为你处理了这些。
如果需要对参数属性进行额外的初始化逻辑（例如，基于参数值进行计算或调用其他方法），则可以在构造函数体中执行这些逻辑，但仍应避免直接重新赋值。如果需要覆盖参数属性的初始值，可以直接在构造函数体内进行，但要意识到这会覆盖自动生成的赋值。
以下是 Coder 类的修正版本，遵循最佳实践：
class Coder {
age: number;
constructor(
public readonly name: string,
age: number, // 保持为普通参数
public lang: string,
private address: string,
protected id: number = 234
) {
// 对于参数属性 (name, lang, address, id)，不再显式赋值。
// TypeScript 已经自动处理了它们的声明和初始赋值。
this.age = age; // age 是普通属性，需要显式赋值。
// 如果需要对参数属性进行后续修改，可以在这里进行，
// 但要注意它会覆盖自动生成的赋值。
this.id = Math.random(); // 示例：覆盖 id 的初始值
}
getName(): string {
return `My name is ${this.name}`;
}
}编译后的 JavaScript 将更加简洁：
"use strict";
class Coder {
constructor(name, age, lang, address, id = 234) {
// 参数属性的自动赋值
this.name = name;
this.lang = lang;
this.address = address;
this.id = id; // 这里的 id = id 是由 protected id: number = 234 产生的
// 普通属性的显式赋值
this.age = age;
// 对参数属性 id 的后续修改（覆盖了上面的 this.id = id;）
this.id = Math.random();
}
getName() {
return `My name is ${this.name}`;
}
}通过这种方式，我们避免了不必要的重复赋值，使得编译后的 JavaScript 代码更加精简和高效。
总结
TypeScript 的参数属性是一项强大的功能，它通过减少样板代码来提高开发效率和代码可读性。然而，理解其背后的编译机制至关重要。当在构造函数参数上使用访问修饰符时，TypeScript 编译器会自动处理类成员的声明和赋值。因此，避免在构造函数体内部对这些参数属性进行重复的显式赋值，是编写干净、高效 TypeScript 代码的最佳实践。正确利用这一特性，能够让你的 TypeScript 项目更加健壮和易于维护。
