One particular line of code is causing the issue at hand.
const t: GridType = gridDef.find( a => { a.GridName == core.GridStyle; return a; } );
The error message that I am encountering reads as follows
ERROR in src/app/grid-builder/builder-scratch.ts(255,43): error TS2345: Argument of type '(this: void, a: GridType) => void' is not assignable to parameter of t ype '(this: void, value: GridType, index: number, obj: GridType[]) => boolean'. Type 'void' is not assignable to type 'boolean'.
The objective behind setting up a class to extend to Angular Components for the purpose of dynamically creating grids is as follows.
export class GridBuilder{
Settings : GridInit;
GridData : GridType[];
Grid : string = '';
constructor() {
this.Settings.GridStyle = 'SiteGridA';
this.GridData = GridDefs;
this.buildGrid( this.Settings, this.GridData );
}
buildGrid( core: GridInit, gridData: GridType[] ) {
const w: number = multiply( core.Size.Width, core.Size.PixelRatio );
const h: number = multiply( core.Size.Height, core.Size.PixelRatio );
const o: string = checkOrientation( w, h );
const c: CellSpecs = calcCell( o, w );
const t: GridType = gridData.find( a => { a.GridName == core.GridStyle; return a; } );
const cols: string = calcArea( t.Columns, c );
const rows: string = calcArea( t.Rows, c );
this.Grid = cols + '/' + rows;
}
}
The array GridType[] mentioned in the code snippet above is structured in the following manner
export interface GridType {
GridName : string;
Columns : GridLine[];
Rows : GridLine[];
}
//other interfaces chaining into it
export interface GridLine {
Names : LineName[];
Type : string;
CalcType : string;
CSize : CellSize;
}
export interface LineName { Name: string; }
export interface CellSize {
Size? : number;
Repeat? : number;
Min? : number;
Max? : number;
}
Returning to the constructor
constructor() {
this.Settings.GridStyle = 'SiteGridA';
this.GridData = GridDefs;
this.buildGrid( this.Settings, this.GridData );
}
The intentions are
- Set the parameter to
SiteGridAto be matched within the.find()method to retrieve grid data. - Save the grid data to a variable that will be used by the
.find()method. - Pass variables into the function to construct the grid.
The GridDefs constitutes the grid definitions structured as shown below
export const GridDefs: GridType[] = [
{
GridName : 'SiteGridA',
Columns : [
{
Names : [ { Name: 'left-bleed-start' } ],
Type : 'normal',
CalcType : 'divide',
CSize : { Size: 4 }
},
...
],
Rows : [
{
Names : [ { Name: 'top-bleed-start' } ],
Type : 'normal',
CalcType : 'divide',
CSize : { Size: 4 }
},
...
]
},
{
GridName : 'LinkContainerA',
Columns : [
{
Names : [ { Name: 'main-link-col-start' } ],
Type : 'normal',
CalcType : 'none',
CSize : { Size: 0 }
},
...
],
Rows : [
{
Names : [ { Name: 'content-row-sart' } ],
Type : 'normal',
CalcType : 'none',
CSize : { Size: 0 }
},
...
]
}
]
The property GridName is what needs to match the GridStyle parameter in the Settings variable within the line of code causing the error.
Various attempts have been made like adding OnInit to ensure that the grid Data is loaded before the constructor is triggered. Tried different combinations of = signs, also experimented with swapping const for let. Despite these efforts, the issue still persists. The .find() method has been used in similar scenarios without issues. Any suggestions on how to resolve this?