In my project, I have defined three interfaces: a base interface and two others that extend the base one with children as properties. One of the interfaces includes 'valueType' while the other includes 'returnType'. Here is how they are structured:
interface IBase {
id:string;
label:string;
value:string;
expanded:boolean;
isGroup:boolean;
}
interface IFieldDefinitions extends IBase {
children: Array<IFiedValues>;
}
interface ICustomFunctions extends IBase{
children: Array<ICustomFunction & {id:string;label:string;value:string;}>
}
interface ICustomFunction{
name:string;
args: Array<IFunctionArgs>;
returnType: string;
description: string;
array: boolean;
}
interface IFiedDefValues {
id: string;
name: string;
value: string;
label: string;
valueType: string;
columnType: string;
description: string;
}
I then created a function to group customFunctions and fieldDefinitions based on their returnType/valueType. Initially, I had separate functions for grouping but realized they were similar. So, I decided to create a single function like this:
public get groupFieldsByType(){
return computeGrouping(fields,"fields");
}
public get groupFunctionsByType(){
return computeGrouping(functions,"functions");
}
The function definition looks like this:
function computeGrouping(listItems:IFieldDefinitions[] | ICustomFunctions[],type:string ){
let modifiedFieldDefs = [] as IFieldListboxItem[];
listItems.forEach(items => {
const filteredStringValues = items.children.filter(item => type === 'fields' ? item.valueType === 'Text' : item.returnType === 'String');
const filteredNumericValues = items.children.filter(item => type === 'fields' ? item.valueType === 'Number' : item.returnType === 'Number');
// Other computations go here and I return the grouped array;
return modifiedFieldDefs;
}
}
When implementing this, TypeScript throws an error stating that "valueType" is not available on ICustomFunctions and "returnType" is not available on IFieldDefinitions. How can I define the interfaces and access them in the function to avoid this error?