Question

问题来自这行代码。

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

我得到的错误就是这个

src / app / grid-builder / builder-scratch.ts（255,43）中的错误：错误TS2345：参数类型'（this：void，a：GridType）=＆gt; void'不能赋值给t的参数 ype'（this：void，value：GridType，index：number，obj：GridType []）=＆gt;布尔”。类型'void'不能赋值为'boolean'。

我正在定义一个类，以扩展到我的Angular Components，以动态创建到目前为止看起来像这样的网格。

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

被引用的GridType[]看起来像这样

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

如果我们重点关注constructor

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

我正在努力完成的是

将参数设置为SiteGridA以在.find()方法中匹配，以检索有关网格的数据。
将网格数据保存到.find()方法将搜索的变量。
将变量传递给函数以构建网格。

GridDefs是网格的定义，看起来非常像这个

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

我正在尝试将GridName属性与GridStyle变量中的Settings参数匹配到导致错误的代码行内。

到目前为止，我已尝试添加OnInit以查看是否可能在构造函数启动之前加载网格数据会有所帮助。我尝试了1个和3个=符号，我尝试将const切换为let。我真的不知道该怎么做。我在类似的情况下使用了.find()方法并且没有遇到任何问题。我怎样才能解决这个问题？

Answer 1

在填写所有缺失的部分后，我得到的错误与您提出的错误不同：

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

现在它说Type 'GridType' is not assignable to type 'boolean'。这是因为您要传递给find

的回调

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

返回a GridType，find期望返回boolean的回调。

你问题中的错误是

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

那可能是因为它最初写成

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

当你在没有return语句的大括号中使用代码时，假定它返回void。

如果您需要查找具有特定样式的网格，则需要返回比较结果a.GridName == code.GridStyle。你可以使用一个简单的表达式，而不是在=>之后用括号括起来，就像这样：

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

或使用返回正确（和正确类型）值的大括号和return语句，如下所示：

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

使用.find（）方法获取'Void not assignable to boolean'错误

1 个答案: