Why do I get the error Type 'undefined' is not assignable to type ...?

Question

I have created a new angular application.

In the app.component.html I have

<bryntum-scheduler
    #scheduler
    [resources] = "resources"
    [events] = "events"
    [columns] = "schedulerConfig.columns"
    [startDate] = "schedulerConfig.startDate!"
    [endDate] = "schedulerConfig.endDate!"
></bryntum-scheduler>

the app.component.ts looks like

import { Component, ViewChild } from '@angular/core';
import { BryntumSchedulerComponent } from '@bryntum/scheduler-angular';
import { schedulerConfig } from './app.config';

@Component({
    selector    : 'app-root',
    templateUrl : './app.component.html',
    styleUrls   : ['./app.component.scss']
})
export class AppComponent {
    resources = [
        { id : 1, name : 'Dan Stevenson' },
        { id : 2, name : 'Talisha Babin' }
    ];

    events = [
        { resourceId : 1, startDate : '2022-01-01', endDate : '2022-01-10' },
        { resourceId : 2, startDate : '2022-01-02', endDate : '2022-01-09' }
    ];

    schedulerConfig = schedulerConfig;

    @ViewChild('scheduler') schedulerComponent!: BryntumSchedulerComponent;
}

and this is the app.config.ts (in the same folder as app.component.ts):

import { SchedulerConfig } from '@bryntum/scheduler';

export const schedulerConfig: Partial<SchedulerConfig> = {
    columns : [
        { text : 'Name', field : 'name', width : 160 }
    ],
    startDate : new Date(2022, 10, 17),
    endDate   : new Date(2022, 10, 23)
};

When I try to compile my app, I get the error

Type 'undefined' is not assignable to type 'object | object[] | ColumnStore | Partial | Partial[]'.

5 [columns] = "schedulerConfig.columns"

I do not seen the cause of this error. Can someone help me?

Answer 1

Based on the official docs, ColumnStore has many properties, some of them you have defined (text, field, width), so you could "soft" cast columns to ColumnStore when passing to this component like so:

<bryntum-scheduler
    #scheduler
    [resources] = "resources"
    [events] = "events"
    [columns] = "schedulerConfig.columns as ColumnStore" <!--here-->
    [startDate] = "schedulerConfig.startDate!"
    [endDate] = "schedulerConfig.endDate!"
></bryntum-scheduler>