web-dev-qa-db-fra.com

Dactylographié: n'est pas attribuable à l'erreur de type

Je suis nouveau dans l'utilisation de TypeScript avec angular 2. J'utilise la version 1 de angular 2-cli. Lors de la compilation, j'obtiens cette erreur en disant "n'est pas assignable to type Assignment [] ". J'ai examiné les types de données et cela semble correct jusqu'à présent, mais je ne sais pas exactement quelle est l'erreur. Merci de votre aide.

Voici une photo de l'erreur depuis la console. enter image description here

fichier data.ts - ce sont deux des éléments qui apparaissent dans le tableau 

export const Assignments: Assignment[] = [
  {
    "a_type": "one",
    "a_title": "Assignment 1",
    "symbol": 1,
    "show": false,
    "tooltip": {
        "left": 82
    },
    "buttonPos":{
        "left": 130
    },
    "printTop": 0,
    "instructions": "Instructions here",
    "due_date": "sept-15.png",
    "percentage": "10.png",
    "taskA": {
        "name": "Option A",
        "a_title": "Task A",
        "information": "Instructions for task A",
        "selectA": true
    }
}, {
    "a_type": "two",
    "a_title": "Assignment 2",
    "symbol": 2,
    "show": false,
    "sub_a_title": "Assignment Information",
    "tooltip": {
        "left": 200
    },
    "buttonPos":{
        "left": 250
    },
    "printTop": 250,
    "instructions": "Instructions here",
    "due_date": "29.png",
    "percentage": "10.png",
    "taskA": {
      "a_title": "Assignment 2 info",
        "name": "Option A",
        "information": "Instructions for task A",
        "selectA": false
    },
    "taskB": {
      "a_title": "Assignment 2 info",
        "name": "Option B",
        "information": "Instructions for task B",
        "selectB": false
    }
}
]

assignation.ts - voici les types de données 

export class Assignment {
    a_type: string;
    a_title: string;
    symbol: any;
    show: boolean;
    tooltip: any;
    left: number;
    buttonPos:any;
    printTop: number;
    instructions: string;
    due_date: string;
    percentage: string;
    taskA: any;
    name: string;
    information: string;
    selectA: boolean;
    taskB: any;
    selectB: boolean;
  }
javascriptangulartypescriptangular2-cli
12
LadyT

C'est parce que la structure des littéraux d'objet ne correspond pas à la structure Assignment.

TypeScript est structurellement typé, ce qui signifie que si vous souhaitez utiliser un type, la structure doit correspondre au type. Cela signifie que si vous voulez créer Assignments en créant des littéraux d'objet, les littéraux doivent avoir toutes les propriétés du type.

Quelques choses que je vois mal

  1. Il vous manque name et information car ils sont imbriqués dans le typeA. Cela ne fonctionne pas car ils doivent être dans la structure principale, car c'est ce qui est défini dans Assignment

  2. Vous avez besoin de taskB dans le premier objet

  3. Il vous manque selectA et selectB dans la structure principale des objets.

Il y a probablement d'autres choses, mais j'espère que vous obtenez le point

Si vous souhaitez rendre les choses facultatives, vous pouvez utiliser le ? opérateur

interface Assignment {
  name?: string;
}

Si vous voulez imbriquer, vous pouvez aussi le faire

interface Assignment {
  taskA?: { name: string },
  taskB?: { name: string }
}
18
Paul Samsotha

L'erreur est assez claire:

La propriété "gauche" est manquante ...

Votre classe Assignment déclare un membre nommé left mais vos deux objets json ne l'ont pas.
Vous avez quelques autres propriétés que vous n'avez pas définies dans vos objets json, voici une version de travail dans l'aire de jeux .

Vous pouvez déclarer que les propriétés sont facultatives si vous le souhaitez:

class Assignment {
    a_type?: string;
    ...
}

Mais même sans les erreurs, vous avez un problème.
Vous ne créez pas d'instances de la classe Assignment, vous créez uniquement des objets qui correspondent aux propriétés de la classe.
Cela fonctionne parce que TypeScript utilise typage canard , mais si vous aurez des méthodes dans Assignment, vos objets n'en auront pas.
Tu peux le faire:

export const Assignments: Assignment[] = [new Assignment(), new Assignment()];

Object.assign(Assignments[0], FIRST_JSON_OBJ);
Object.assign(Assignments[1], SECOND_JSON_OBJ);

Ou vous pouvez avoir un constructeur dans Assignment qui reçoit cet objet json et s'initialise.

3
Nitzan Tomer