LadyT LadyT - 1 month ago 6
TypeScript Question

Typescript: is not assignable to type error

I am new to using typescript with angular 2. I am using version 1 of angular 2-cli. When compiling, I get this error saying "is not assignable to type Assignment[]". I looked at the data types and it looks okay so far, but I am not sure what the error is exactly. Thanks for your help.

Here is a photo of the error from the console.
enter image description here

data.ts file - these are two of the items that appear in the array

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
}
}
]


assignment.ts - here's the data types

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

Answer

It's because the structure of the object literals don't match the Assignment structure.

Typescript is structurally typed, which means that if you want to use a type, than the structure needs to match the type. This means that if you want to make Assignments by making object literals, the literals need to have all the properties in the type.

A couple things I see wrong

  1. You're missing name and information because they are nested in the typeA. This doesn't work as they need to be in the main structure, as that is what is defined in Assignment

  2. You need taskB in the first object

  3. You're missing selectA and selectB from the main structure of the objects.

There's probably other stuff, but hopefully you get the point

If you want to make things optional, you can use the ? operator

interface Assignment {
  name?: string;
}

If you want nesting you can do that too

interface Assignment {
  taskA?: { name: string },
  taskB?: { name: string }
}