能否在JS ES6/ES.NEXT中实现TypeScript类的构造函数参数属性？

算力阿峰

2026-5-19

原生JavaScript（ES6/ES.NEXT）中是否支持TypeScript风格的构造函数参数属性？

Great question! Let's break this down clearly: 原生JavaScript（包括ES6及后续的ES.NEXT版本）并不支持TypeScript那种直接在构造函数参数中定义类属性的语法——也就是TS里的「parameter properties」特性。

先搞懂TS的参数属性到底是什么

TypeScript的参数属性是它专属的语法糖：你只需要在构造函数参数前加上public/private/protected/readonly修饰符，就能一步完成「类属性声明」+「构造函数参数接收」+「给this赋值」三件事。比如这段TS代码：

class User {
  constructor(public username: string, private email: string) {}
}

编译成ES6原生JS后，会被转换成最基础的手动赋值写法：

class User {
  constructor(username, email) {
    this.username = username;
    this._email = email; // TS对private修饰符的编译处理，原生JS无此语法
  }
}

原生JS的现状：必须显式赋值

在任何版本的原生JavaScript里，都没有这种「参数转属性」的隐式语法。如果你想在构造函数里初始化类属性，只能手动给this赋值：

class User {
  constructor(username, email) {
    this.username = username;
    this.email = email;
  }
}

就算是ES2022新增的私有字段（用#前缀），也得先在类顶部声明字段，再在构造函数里手动赋值：

class User {
  #email; // 先声明私有字段
  constructor(username, email) {
    this.username = username;
    this.#email = email; // 再赋值
  }
}

而ES标准里的类字段语法，也只是让你能在类顶部提前声明属性默认值，依然没法直接和构造函数参数绑定：

class User {
  username = ""; // 类字段初始化默认值
  #email = "";
  constructor(username, email) {
    this.username = username;
    this.#email = email;
  }
}