TypeScript class Date property returns a string [d

Question

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

Answer 1

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