#How to type Resolved Data correctly?

7 messages · Page 1 of 1 (latest)

jovial finch
#

Hello everyone,
I want to know how I can type the resolved data correctly.

I got this resolve function:

import {inject} from '@angular/core';
import {ResolveFn} from '@angular/router';
import {UserService} from '~/app/service/user.service';
import {WordCollectionEntity} from '~/shared/word-collection/word-collection.entity';

export const wordCollectionResolver: ResolveFn<WordCollectionEntity[]> = async (route, state) => {
    const userId = localStorage.getItem('userId');
    const userService = inject(UserService);
    const users = await userService.getUserWordCollections(Number(userId));
    return users;
};

In my component I can access the data like this:

import {ChangeDetectionStrategy, Component, inject, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {CardComponent} from '~/app/common/card/card.component';
import {CollectionCardComponent} from '~/app/components/collection-card/collection-card.component';
import {WordPairCardComponent} from '~/app/components/word-pair-card/word-pair-card.component';
import {UserService} from '~/app/service/user.service';
import {WordCollectionEntity} from '~/shared/word-collection/word-collection.entity';

interface OverviewRouteData {
    collections: WordCollectionEntity[];
}

@Component({
    selector: 'overview',
    standalone: true,
    imports: [WordPairCardComponent, CardComponent, CollectionCardComponent],
    templateUrl: './overview.component.html',
    styleUrl: './overview.component.scss',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class OverviewComponent implements OnInit {
    resolvedData: any;

    constructor(private readonly activatedRoute: ActivatedRoute, private readonly userService: UserService) {
    }

    ngOnInit(): void {
        this.activatedRoute.data.subscribe((data: OverviewRouteData) => {
            this.resolvedData = data;
        });
        console.log(this.resolvedData.collections);
    }
}
#

As you can see this works since "resolvedData" is of type "any". Now I'm wondering how I can type the returned data correctly since it doesn't seem to inherit the type of the resolvers return type.

#

I want the resolved data to be of type "Array<WordCollectionEntity>" but I can't type the data value in "this.activatedRoute.data.subscribe".

civic shoal
jovial finch
#

I can't type the data object like this:

this.activatedRoute.data.subscribe((data: {collections: WordCollectionEntity[]}) => {
    this.resolvedData = data;
});

Ideally the resolved data already comes with the correct type as defined in the resolver function.

#

I want to get rid of the "resolvedData: any" and instead have the correct type so I can access the properties without "guessing"

#

I mean I could assert the type like this:

interface OverviewResolvedData {
    collections: WordCollectionEntity[];
}

this.activatedRoute.data.subscribe(data => {
   this.resolvedData = data as OverviewResolvedData;
});

But I feel like there has to be a better way?