本文深入探讨了 typescript 中使用访问修饰符（如 public、private、protected、readonly）声明构造函数参数时，编译为 JavaScript 后可能出现的重复变量声明问题。文章解释了 TypeScript 参数属性的工作原理，并提供了避免此类冗余声明的最佳实践，以确保代码的简洁性和效率。
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 项目更加健壮和易于维护。
评论（已关闭）
评论已关闭