创建具有动态名称和属性的对象模型

Question

我是javascript/typescript新手&创建一个名为的动态对象,性>在typescript中基于如下过滤器类型

数字类型过滤器属性:

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

文本类型过滤器属性:

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

日期类型过滤器属性:

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

根据所选择的过滤器类型，我想创建具有特定过滤器类型属性的对象像下面的

"filterModel": {
"OriginDate": {            <--------------- this column name I will be getting at runtime which i want to be the object name
"dateFrom": "2022-09-21 00:00:00",   >
"dateTo": "2022-09-21 00:00:00",     >
"filterType": "date",                > properties i want to set based on filter type
"type": "inRange"                    >
},
"Score": {      <--------------- this column name I will be getting at runtime which i want to be the object name
"filterType": "number",  >
"type": "inRange",       >
"filter": 0,             > properties i want to set based on filter type
"filterTo": 90           >
},
"Title": {      <--------------- this column name I will be getting at runtime which i want to be the object name
"filterType": "text",  >
"type": "contains",    >  properties i want to set based on filter type
"filter": "wire"       >
}
}

假设生成该对象的输入将为

generateFilterModel(columnName : string ,filterType : any ,filtervalues: any[]) 
{
// logic  -> generating the object and adding it to filterModel {}

}

对于删除所有过滤器，我将有一个按钮来设置filterModel{}为空

最终预期输出:

1. ,输入→this.generateFilterModel('OriginDate','Date',filtervalues[])//(columnName, Filtertype, filtervalues)

输出:

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

2. ForInput→this.generateFilterModel('Score','number',filtervalues[])//(columnName, Filtertype, filtervalues)

输出:

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

3. ForInput→this.generateFilterModel('Title','text',filtervalues[])//(columnName, Filtertype,filtervalues)

输出:

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

游乐场: -https://stackblitz.com/edit/angular-ivy-qizcir?file=src/app/app.component.html

Answer 1

model

export interface filterModel {
OriginDate?: OriginDate;
Score?: Score;
Title?: Title;
}
export interface OriginDate {
dateFrom: string;
dateTo: string;
filterType: string;
type: string;
}
export interface Score {
filterType: string;
type: string;
filter: number;
filterTo: number;
}
export interface Title {
filterType: string;
type: string;
filter: string;
}

主文件

const originalObj = {
filterModel: {},
};
function generateFilterModel(
columnName: string,
filterType: any,
filtervalues: OriginDate | Score | Title
) {
const createObj = {
[columnName]: filtervalues,
};
Object.assign(originalObj['filterModel'], createObj);
console.log(originalObj);
}
const originDateObj = {
dateFrom: '2022-09-21 00:00:00',
dateTo: '2022-09-21 00:00:00',
filterType: 'date',
type: 'inRange',
};
generateFilterModel('OriginDate', 'Date', originDateObj);
const scoreObj = {
filterType: 'number',
type: 'inRange',
filter: 0,
filterTo: 90,
};
generateFilterModel('Score', 'number', scoreObj);
const titleObj = {
filterType: 'text',
type: 'contains',
filter: 'wire',
};
generateFilterModel('Title', 'text', titleObj);

Answer 2

基本方式:

您应该首先定义过滤器的接口:

type FilterType = "number" | "text" | "date"
interface FilterBase {
filterType: FilterType
type: string
}
interface NumberFilter extends FilterBase {
filterType: "number"
filter: string
filterTo: string
}
interface TextFilter extends FilterBase {
filterType: "text"
filter: string
}
interface DateFilter extends FilterBase {
filterType: "date"
dateFrom: ""
dateTo: ""
}
type Filter = NumberFilter | TextFilter | DateFilter

然后应用到你的函数

function generateFilterModel(columnName: string, filterType: FilterType, filtervalues: any[]): Record<string, Filter> {
// do what you want here
}

在这种情况下，返回类型将变成Record<string, Filter>，它很宽，但已经适合大多数用法。

一些高级方法:

如果类型需要更正确，如columnName必须在类型中知道，它可以是:

function generateFilterModel<T extends string>(columnName: T, filterType: FilterType, filtervalues: any[]): Record<T, Filter> {
// do what you want here
}

此外，如果Filter的类型必须更精确，则需要首先定义一个映射:

interface FilterMap {
number: NumberFilter
text: TextFilter
date: DateFilter
}

，函数为:

function generateFilterModel<T extends string, U extends FilterType>(columnName: T, filterType: U, filtervalues: any[]): Record<T, FilterMap[U]> {
// do what you want here
}