Getting 'Void not assignable to boolean" error using .find() method

Question

The problem comes from this line of code.

const t: GridType   = gridDef.find( a => { a.GridName == core.GridStyle; return a; } );

The error I'm getting is this

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'.

I'm defining a class to extend to my Angular Components for dynamically creating grids which so far looks like this.

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 GridType[] being referred to looks like this

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;
}

If we focus back on the constructor

constructor() {
    this.Settings.GridStyle = 'SiteGridA';
    this.GridData = GridDefs;
    this.buildGrid( this.Settings, this.GridData );
}

what I'm trying accomplish is

1. Set parameter to SiteGridA to be matched in the .find() method to retrive data about the grid.
2. Saving the grid data to a variable that the .find() method will search through.
3. Pass variables into function to build grid.

The GridDefs is the definitions of the grids which looks pretty much like this

    export const GridDefs: GridType[] = [
    {
        GridName : 'SiteGridA',
        Columns  : [
            {
                Names    : [ { Name: 'left-bleed-start' } ],
                Type     : 'normal',
                CalcType : 'divide',
                CSize : { Size: 4 }
            },
            {
                Names    : [ { Name: 'left-bleed-end'}, { Name: 'content-col-start' } ],
                Type     : 'normal',
                CalcType : 'multiply',
                CSize : { Size: 32.5 }
            },
            {
                Names    : [ { Name: 'content-col-end' }, { Name: 'right-bleed-start' } ],
                Type     : 'normal',
                CalcType : 'divide',
                CSize : { Size: 4 }
            },
            {
                Names    : [ { Name: 'right-bleed-end' } ],
                Type     : 'end',
                CalcType : 'none',
                CSize : { Size: null }
            }
        ],
        Rows     : [
            {
                Names    : [ { Name: 'top-bleed-start' } ],
                Type     : 'normal',
                CalcType : 'divide',
                CSize : { Size: 4 }
            },
            {
                Names    : [ { Name: 'top-bleed-end' }, { Name: 'link-row-start' } ],
                Type     : 'normal',
                CalcType : 'multiply',
                CSize : { Size: 2 }
            },
            {
                Names    : [ {Name: 'link-row-end'}, { Name: 'content-row-start' } ],
                Type     : 'normal',
                CalcType : 'none',
                CSize : { Size: 0 }
            },
            {
                Names    : [ { Name: 'content-row-end' }, { Name: 'footer-row-start' } ],
                Type     : 'normal',
                CalcType : 'multiply',
                CSize : { Size: 4}
            },
            {
                Names    : [ { Name: 'footer-row-end' }, { Name: 'bottom-bleed-start' } ],
                Type     : 'normal',
                CalcType : 'divide',
                CSize : { Size: 4 }
            },
            {
                Names    : [ { Name: 'bottom-bleed-end' } ],
                Type     : 'end',
                CalcType : 'none',
                CSize : { Size: null }
            }
        ]
    },
    {
        GridName : 'LinkContainerA',
        Columns  : [
            {
                Names    : [ { Name: 'main-link-col-start' } ],
                Type     : 'normal',
                CalcType : 'none',
                CSize : { Size: 0 }
            },
            {
                Names    : [ { Name: 'main-link-col-end' }, { Name: 'feature-link-start' } ],
                Type     : 'normal',
                CalcType : 'percent',
                CSize : { Size: 50 }
            },
            {
                Names    : [ { Name: 'feature-link-end' } ],
                Type     : 'end',
                CalcType : 'none',
                CSize : { Size: null }
            }

        ],
        Rows     : [
            {
                Names    : [ { Name: 'content-row-sart' } ],
                Type     : 'normal',
                CalcType : 'none',
                CSize : { Size: 0 }
            },
            {
                Names    : [ { Name: 'content-row-end' } ],
                Type     : 'end',
                CalcType : 'none',
                CSize : { Size: null }
            }
        ]
    }
]

The GridName property is what I'm attempting to match the GridStyle parameter in the Settings variable to inside the line of code causing the error.

So far I've tried adding OnInit to see if maybe loading the grid Data before the constructor kicked in would help. I tried 1 and 3 = signs, I tried switching const for let. I really don't know what to do beyond this. I've used the .find() method in similar instances and haven't had a problem. How can I fix this?

Answer 1

After filling all the missing parts, I'm getting different error than the one in your question:

const t: GridType   = gridData.find( a => { a.GridName == core.GridStyle; return a; } );

Argument of type '(this: void, a: GridType) => GridType' 
   is not assignable to parameter of type 
     '(value: GridType, index: number, obj: GridType[]) => boolean'.
          Type 'GridType' is not assignable to type 'boolean'.

Now it says Type 'GridType' is not assignable to type 'boolean'. This is because the callback you are passing to find

{ a.GridName == core.GridStyle; return a; }

returns a which has GridType, and find expects a callback that returns boolean.

The error in your question says

Type 'void' is not assignable to type 'boolean'.

That's probably because originally it was written as

const t: GridType   = gridData.find( a => { a.GridName == core.GridStyle; } );

and when you have code in braces without return statement, it's assumed to return void.

If you need to find a grid with particular style, you need to return a result of comparison a.GridName == code.GridStyle. You can do that with a simple expression without surrounding braces after =>, like this:

const t: GridType   = gridData.find( a => a.GridName == core.GridStyle );

or with braces and return statement that returns correct (and correctly typed) value, like this:

const t: GridType   = gridData.find( a => { return a.GridName == core.GridStyle; } );