如何在TypeScript中创建带动态名称与属性的过滤对象模型

需求说明 #

作为JavaScript/TypeScript新手，需实现根据过滤类型创建动态命名对象及对应属性的功能，同时支持清空所有过滤条件。

三种过滤类型的属性结构 #

• 数字类型：

{
    "filterType": "",
    "type": "",
    "filter": "",
    "filterTo": "" 
}

• 文本类型：

{
   "filterType": "",
   "type": "",
   "filter": ""
}

• 日期类型：

{
  "dateFrom": "",
  "dateTo": "",
  "filterType": "",
  "type": ""
}

目标对象示例 #

最终生成的filterModel结构如下：

"filterModel": {
    "OriginDate": {
        "dateFrom": "2022-09-21 00:00:00",
        "dateTo": "2022-09-21 00:00:00",
        "filterType": "date",
        "type": "inRange"
    },
    "Score": {
        "filterType": "number",
        "type": "inRange",
        "filter": 0,
        "filterTo": 90
    },
    "Title": {
        "filterType": "text",
        "type": "contains",
        "filter": "wire"
    }
}

实现要求 #

1. 完成generateFilterModel函数，参数说明：

   • columnName: string：运行时获取的列名，作为动态对象的键
   • filterType: string：过滤类型（date/number/text）
   • filtervalues: any[]：存储对应过滤条件的值
     函数需根据参数生成对应结构的对象，并添加到filterModel中。

   函数框架：

generateFilterModel(columnName : string ,filterType : string ,filtervalues: any[]) 
{
    // 逻辑 -> 生成对象并添加至filterModel {}
}

2. 清空功能：提供按钮触发，将filterModel设置为空对象。

输入输出示例 #

1. 输入：

this.generateFilterModel('OriginDate','Date',filtervalues[])

输出：

"OriginDate": {
    "dateFrom": "2022-09-21 00:00:00",
    "dateTo": "2022-09-21 00:00:00",
    "filterType": "date",
    "type": "inRange"
}

2. 输入：

this.generateFilterModel('Score','number',filtervalues[])

输出：

"Score": {
    "filterType": "number",
    "type": "inRange",
    "filter": 0,
    "filterTo": 90
}

3. 输入：

this.generateFilterModel('Title','text',filtervalues[])

输出：

"Title": {
    "filterType": "text",
    "type": "contains",
    "filter": "wire"
}

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