TypeScript : comment éviter l'erreur Type 'XX' is missing the following properties from type 'Y[]' ?

Le langage TypeScript a été conçu par Microsoft. Il s'agit d'une surcouche du langage JavaScript donc le principal apport est l'ajout d'un typage fort. Dans le langage JavaScript, le type d'une variable est détecté lors de sa déclaration et il peut changer au cours d'un programme. Ce n'est pas le cas si l'on utilise les nomenclatures du TypeScript. On peut déclarer le type d'une variable, et si on lui assigne une valeur ne correspondant pas au type défini, il y aura un message d'erreur. C'est notamment le cas du message "Type 'XX' is missing the following properties from type 'Y[]'".

Le langage JavaScript est asynchrone. Il utilise beaucoup le concept de fonctions "callbacks", des fonctions qui sont appelées une fois que le code de la première fonction a été exécuté. C'est notamment le cas du framework Angular. Ce framework, créé par Google, utilise notamment un système d'observables, des éléments sur lesquels interviennent des évènements et la méthode "subscribe" qui permet de "s'abonner" à un observable pour que le code soit exécuté quand un évènement se produit. Le framework Angular utilise le langage TypeScript pour structurer davantage le code. Vous devez donc bien faire attention entre le code de la méthode de l'observable et celui contenu dans la méthode "subscribe".

//Le code suivant va donner un message d'erreur "Type 'Voiture' is missing the following properties from type 'Voiture[]'"
//Observable
public getVoitures(): Observable {
    return this.http.get(`api/products/v1/`);
}

//Composant avec la méthode subscribe
export class concessionnaire implements OnInit {
    public tableauVoiture: Voiture[];
    
    ngOnInit() {
        this.VoitureService.getVoitures().subscribe(res => {
          this.tableauVoiture = res;
        });
    }
}

Le code ci-dessus va produire une erreur car l'observable retourne une voiture alors que le composant stocke le résultat dans un tableau de voiture. Le message d'erreur fait référence aux méthodes des tableaux en JavaScript, qu'il ne retrouve pas dans l'objet qu'il a récupéré. Il faut donc adapter votre code pour que les 2 types de variables soient les mêmes. Vous pouvez modifier le code de la méthode de l'observable pour qu'il renvoie un tableau de voiture.

//Observable
public getVoitures(): Observable {
    return this.http.get(`api/products/v1/`);
}

L'autre solution est de modifier le code de votre composant pour qu'il stocke le résultat de l'observable dans un objet de type "Voiture".

//Composant avec la méthode subscribe
export class concessionnaire implements OnInit {
    public maVoiture: Voiture;
    
    ngOnInit() {
        this.VoitureService.getVoitures().subscribe(res => {
          this.maVoiture = res;
        });
    }
}