JavaScript装饰器与原生私有字段（#）兼容问题咨询

我刚遇到过完全一样的问题！当你尝试在原生JavaScript私有字段（用#前缀声明的那种）上应用装饰器时，编辑器报错“Decorators are not valid here”是有明确原因的——当前的ECMAScript装饰器标准（Stage 3）并不支持在原生私有字段上使用装饰器。

先确认下你提供的示例代码，确实会触发这个错误：

import { IsString } from 'class-validator';
class Person {
  @IsString()
  #name: string;
  constructor(name: string) {
    this.#name = name;
  }
  get name(): string {
    return this.#name;
  }
}

为什么会这样？ #

原生私有字段（#field语法）是ES2022引入的特性，而装饰器提案的设计初期并没有把私有字段纳入支持范围。目前装饰器只能应用在类本身、类的方法、访问器（get/set）、公共字段以及参数上，私有字段不在这个支持列表里。

可行的解决方案 #

这里有几个实用的办法可以绕过这个限制：

1. 使用TypeScript的private修饰符替代原生私有字段

如果你用的是TypeScript，可以放弃原生私有字段，改用TS的private修饰符（注意这是编译时的私有检查，不是真正的原生私有，但在大多数业务场景下足够用），这样就能正常使用class-validator的装饰器了：

import { IsString } from 'class-validator';
class Person {
  @IsString()
  private _name: string;

  constructor(name: string) {
    this._name = name;
  }

  get name(): string {
    return this._name;
  }
}

2. 手动在构造函数/访问器中添加验证逻辑

如果一定要保留原生私有字段，可以把class-validator的验证逻辑手动放到构造函数或者setter里，不用装饰器：

import { IsString, validateSync } from 'class-validator';

class Person {
  #name: string;

  constructor(name: string) {
    // 手动验证传入的name值
    const validationErrors = validateSync({ name }, { validationError: { target: false } });
    if (validationErrors.length > 0) {
      throw new Error(`Invalid name: ${validationErrors.map(e => Object.values(e.constraints)).join(', ')}`);
    }
    this.#name = name;
  }

  get name(): string {
    return this.#name;
  }

  // 如果需要修改name，也可以在setter里加验证
  set name(value: string) {
    const validationErrors = validateSync({ name: value }, { validationError: { target: false } });
    if (validationErrors.length > 0) {
      throw new Error(`Invalid name: ${validationErrors.map(e => Object.values(e.constraints)).join(', ')}`);
    }
    this.#name = value;
  }
}

3. 等待规范更新

TC39（负责ECMAScript标准的委员会）可能会在未来的装饰器提案版本中添加对原生私有字段的支持，但目前（2024年）还没有确定的时间表，只能持续关注提案的进展。

内容的提问来源于stack exchange，提问作者Ariel Onoriaga