构造函数修饰符导致变量重复原因解析

TypeScript 构造函数修饰符（`public`、`private`、`protected`、`readonly`）的巧妙运用能简化代码，但稍不注意，可能导致编译后的 JavaScript 代码中出现变量重复声明的问题。本文深入解析了这一现象的成因：当在构造函数参数中使用访问修饰符时，TypeScript 会自动声明类的属性并进行赋值，若在构造函数体内部再次赋值，则会造成重复。文章通过实例代码详细展示了重复声明的产生过程，并提供了避免重复声明的实用方法：理解构造函数访问修饰符的作用，避免在构造函数体内部进行不必要的赋值操作。掌握这些技巧，能有效减少编译后的代码体积，提高代码可读性和可维护性，编写更高效、整洁的 TypeScript 代码。

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 转换为以下两部分：

1. 在类中声明属性：public whatever: string;
2. 在构造函数中赋值：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 代码的大小，并提高代码的可读性和可维护性。 记住，如果构造函数参数已经使用了访问修饰符，就不需要在构造函数体内部再次赋值。 只需要处理那些需要在构造函数中进行初始化或计算，但不需要从参数传递的属性。

到这里，我们也就讲完了《构造函数修饰符导致变量重复原因解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！