如何在TypeScript中实现指定结构对象并进行数组增删操作？

问题描述 #

需要实现如下结构的对象：

{
    "validElements": {
        "classNames": [],
        ...: []
    }, 
    "invalidElements": {
        "classNames": [],
        ...: []
    }
}

编写的接口代码及报错：

interface outputObject {
    "validElements": {
        "classNames": Array
    }, 
    "invalidElements": {
        "classNames": Array
    }
}

通用类型“Array”需要1个类型参数。

核心疑问：如何通过接口对对象内的数组进行增删操作？现有事件监听器会验证字段，根据结果将类名添加到对应数组，最终返回对象，但操作时出现参数缺失错误，求正确实现方式。

解决方案 #

1. 修正接口定义 #

首先解决Array缺少类型参数的问题——类名属于字符串类型，所以用string[]（等价于Array<string>）。同时，因为validElements和invalidElements支持动态键（...: []），需要添加索引签名兼容任意字符串键对应的字符串数组：

// 定义元素容器类型，强制包含classNames，同时支持其他动态键
interface ElementContainer {
  classNames: string[];
  [key: string]: string[]; // 索引签名：任意字符串键对应字符串数组
}

// 最终的输出对象接口
interface OutputObject {
  validElements: ElementContainer;
  invalidElements: ElementContainer;
}

如果不需要强制classNames存在，可简化为纯索引签名：

interface ElementContainer {
  [key: string]: string[];
}

2. 初始化符合接口的对象 #

创建实例时确保结构匹配接口要求：

const validationResult: OutputObject = {
  validElements: {
    classNames: []
    // 可按需添加其他键，如 inputNames: []
  },
  invalidElements: {
    classNames: []
  }
};

3. 实现数组增删操作 #

直接通过对象属性访问数组，调用原生数组方法（push/filter等）即可完成操作：

添加类名

// 向validElements的classNames添加类名
function addValidClass(className: string) {
  validationResult.validElements.classNames.push(className);
}

// 向invalidElements的指定动态键添加类名（键不存在则先初始化）
function addInvalidElementClass(key: string, className: string) {
  if (!validationResult.invalidElements[key]) {
    validationResult.invalidElements[key] = [];
  }
  validationResult.invalidElements[key].push(className);
}

删除类名

// 从validElements的classNames移除指定类名
function removeValidClass(className: string) {
  validationResult.validElements.classNames = validationResult.validElements.classNames.filter(
    item => item !== className
  );
}

// 从invalidElements的指定键数组中移除类名
function removeInvalidElementClass(key: string, className: string) {
  if (validationResult.invalidElements[key]) {
    validationResult.invalidElements[key] = validationResult.invalidElements[key].filter(
      item => item !== className
    );
  }
}

4. 结合事件监听器使用 #

以表单输入验证为例，完整流程示例：

// 模拟输入框失焦验证的事件监听器
document.querySelector('input')?.addEventListener('blur', (e) => {
  const input = e.target as HTMLInputElement;
  const value = input.value.trim();

  if (value.length >= 6) {
    // 验证通过：添加合法类，移除非法类
    addValidClass('input-valid');
    removeInvalidElementClass('classNames', 'input-invalid');
  } else {
    // 验证失败：添加非法类，移除合法类
    addInvalidElementClass('classNames', 'input-invalid');
    removeValidClass('input-valid');
  }

  // 更新后的validationResult可直接用于DOM操作或数据提交
  console.log(validationResult);
});

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