TypeScript class Date property returns a string [d

This question already has an answer here:

Promise not returning a valid class instance [duplicate] 1 answer

I've a model class in typeScript:

export class Season {
    ID: number;
    Start: Date;
}

And this is my component:

export class SeasonsComponent{

seasons: Season[];
selectedSeason: Season;

constructor( 
    private configService: ConfigService,
    private notificationsService: NotificationsService,
) { }

ngOnInit(): void {
    this.selectedSeason = new Season();
    this.getSeasons();
}

getSeasons(): void {
    this.configService.getSeasons().subscribe(
        response => {
            this.seasons= response.Data;
            // Data: { Id: 1, Start: '2018-01-01T00:00:00' }
        },
        error => {
            this.notificationsService.show("error", error.error.error, error.error.error_description);
        }
    );
}

selectSeason(season: Season): void {
    this.selectedSeason = season;
}

}

template:

<p-dataList [value]="seasons">
    <ng-template let-season pTemplate="item">
         <div class="ui-g ui-fluid text-capitalize item-list" (click)="selectSeason(season)" 
                            [class.selected]="season === selectedSeason">
                        <div class="ui-md-3 text-center">
                            <div class="pt-4"><h5>{{ season.ID }}</h5></div>
                        </div>
                        <div class="ui-g-12 ui-md-9">
                            <div class="ui-g">
                                <div class="ui-g-2 ui-sm-6">Start: </div>
                                <div class="ui-g-10 ui-sm-6">{{ season.Start | date: 'MMM d' }}</div>

                            </div>
                        </div>
                    </div>
         </ng-template>
    </p-dataList>
    <form class="bg-white p-4" *ngIf="selectedSeason">
        <div class="row">
            <div class="form-group col">
                <label>Start</label>
                <p-calendar name="startDate" [required]="true"
                      [ngModel]="selectedSeason?.Start"
                      [inline]="true"
                      [style]="{'max-width': '85%'}">
                </p-calendar>
            </div>
        </div>
    </form>

And apparently the value of the Start property is a string which is causing me problems with a component that requires a Date object as it's ngModel.

If I add this line:

this.selectedSeason.Start = new Date(this.selectedSeason.Start);

I get:

console.log(typeof this.selectedSeason.Start); // object

I could just cast it beforehand but then what is the purpose of using types?

Does this have something to do with my class not being fully instantiated or something?

Thanks

I like that the service return the data transformed, so your service can be like

getSeasons()
{
    this.httpClient.get(...).map(result=>{
       //Not return the result, instead return result.Data
       //Moreover, we change all the result.Data to return in Start, a Date Object
       return result.Data.map(d=>{
            Id:d.Id,
            Start:New Date(d.Start)
       }
    }
}

Then your component subscribe is like

this.configService.getSeasons().subscribe(
        response => {
            this.seasons= response;  //<--just response
        },
        error => {
            this.notificationsService.show("error", error.error.error, error.error.error_description);
        }
    );