如何使用JavaScript Class声明匹配指定数据结构的新类型？

看起来你需要用JavaScript类来映射一个包含分类和文件信息的嵌套数组结构，我来一步步帮你实现——首先先明确下你的目标数据结构（我推测你可能笔误，每个分类下应该是包含完整文件属性的对象数组，而非单个属性的独立对象，因为后者数据结构太零散，以下先按合理的结构讲解，如果你确实是单个属性的零散对象，我也会补充适配方案）：

正常的目标结构应该是这样：

[
  {
    category1: [
      { fileName: "blabla", fileDate: "DATE", fileURL: "http....", fileSize: "1MB" },
      { fileName: "blabla2", fileDate: "DATE2", fileURL: "http....2", fileSize: "2MB" }
    ]
  },
  {
    category2: [
      { fileName: "test", fileDate: "DATE3", fileURL: "http....3", fileSize: "500KB" }
    ]
  }
]

1. 完善单个文件的类：CreditPoliciesDetails #

你已经有了这个类的雏形，我们可以优化它，让它能从原始数据初始化，同时提供便捷的属性访问方式：

export class CreditPoliciesDetails {
  private _fileName: string = "";
  private _fileDate: string = "";
  private _fileSize: string = "";
  private _fileURL: string = ""; // 补充你数据里的fileURL属性

  // 构造函数支持传入数据对象初始化，可选参数避免空值报错
  constructor(data?: { fileName?: string; fileDate?: string; fileSize?: string; fileURL?: string }) {
    if (data) {
      this._fileName = data.fileName || "";
      this._fileDate = data.fileDate || "";
      this._fileSize = data.fileSize || "";
      this._fileURL = data.fileURL || "";
    }
  }

  // 用getter/setter封装私有属性，保证数据可控性
  get fileName(): string {
    return this._fileName;
  }

  set fileName(value: string) {
    this._fileName = value;
  }

  get fileDate(): string {
    return this._fileDate;
  }

  set fileDate(value: string) {
    this._fileDate = value;
  }

  get fileSize(): string {
    return this._fileSize;
  }

  set fileSize(value: string) {
    this._fileSize = value;
  }

  get fileURL(): string {
    return this._fileURL;
  }

  set fileURL(value: string) {
    this._fileURL = value;
  }

  // 可选方法：转成普通对象，方便后续序列化或与后端交互
  toPlainObject(): { fileName: string; fileDate: string; fileSize: string; fileURL: string } {
    return {
      fileName: this._fileName,
      fileDate: this._fileDate,
      fileSize: this._fileSize,
      fileURL: this._fileURL
    };
  }
}

2. 创建分类类：PolicyCategory #

这个类用来表示每个分类对象，包含分类名称和对应的文件列表：

export class PolicyCategory {
  private _categoryName: string;
  private _files: CreditPoliciesDetails[];

  constructor(categoryName: string, filesData?: Array<{ fileName?: string; fileDate?: string; fileSize?: string; fileURL?: string }>) {
    this._categoryName = categoryName;
    // 将原始数据数组转成CreditPoliciesDetails实例数组，统一管理
    this._files = (filesData || []).map(fileData => new CreditPoliciesDetails(fileData));
  }

  get categoryName(): string {
    return this._categoryName;
  }

  get files(): CreditPoliciesDetails[] {
    return [...this._files]; // 返回数组副本，避免外部直接修改内部数据
  }

  // 提供添加文件的方法，方便动态维护分类下的文件
  addFile(file: CreditPoliciesDetails): void {
    this._files.push(file);
  }

  // 转成目标格式的对象：{ [分类名]: [文件对象数组] }
  toPlainObject(): Record<string, Array<{ fileName: string; fileDate: string; fileSize: string; fileURL: string }>> {
    return {
      [this._categoryName]: this._files.map(file => file.toPlainObject())
    };
  }
}

3. 组合成完整的数据结构 #

现在你可以轻松构建出和目标完全匹配的数据结构：

// 示例：创建两个分类的实例
const category1Files = [
  { fileName: "blabla", fileDate: "2024-01-01", fileURL: "http://example.com/file1", fileSize: "1MB" },
  { fileName: "blabla2", fileDate: "2024-02-01", fileURL: "http://example.com/file2", fileSize: "2MB" }
];
const category1 = new PolicyCategory("category1", category1Files);

const category2Files = [
  { fileName: "test", fileDate: "2024-03-01", fileURL: "http://example.com/file3", fileSize: "500KB" }
];
const category2 = new PolicyCategory("category2", category2Files);

// 组合成目标数组
const fullPolicyData = [category1.toPlainObject(), category2.toPlainObject()];
console.log(fullPolicyData);
// 输出的结构就和你要求的完全一致了

如果你确实需要适配零散属性对象的结构 #

如果你的原始数据真的是每个分类下的数组是单个属性的独立对象（比如[{fileName: ""}, {fileDate: ""}, ...]），可以调整初始化逻辑来适配：

// 调整CreditPoliciesDetails的构造函数
constructor(filePropertiesArray?: Array<{ fileName?: string; fileDate?: string; fileSize?: string; fileURL?: string }>) {
  if (filePropertiesArray) {
    // 把零散的属性对象合并成一个完整的文件信息
    filePropertiesArray.forEach(propObj => {
      if (propObj.fileName) this._fileName = propObj.fileName;
      if (propObj.fileDate) this._fileDate = propObj.fileDate;
      if (propObj.fileSize) this._fileSize = propObj.fileSize;
      if (propObj.fileURL) this._fileURL = propObj.fileURL;
    });
  }
}

// 调整PolicyCategory的构造函数
constructor(categoryName: string, categoryData?: Array<Array<{ fileName?: string; fileDate?: string; fileSize?: string; fileURL?: string }>>) {
  this._categoryName = categoryName;
  this._files = (categoryData || []).map(propsArray => new CreditPoliciesDetails(propsArray));
}

这样就能适配那种零散的属性对象数组结构了。

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