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;
   }
}

如何避免重复声明？

Khroma

AI调色盘生成工具

下载

避免重复声明非常简单，只需要理解构造函数访问修饰符的作用即可。如果你在构造函数参数中使用了访问修饰符，就不需要在构造函数体内部再次进行赋值操作。

以下是一个示例：

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