Typescript: not assigned to type error

Question

I am new to using typescript with angular 2. I am using version 1 of angular 2-cli. When compiling, I get this error: “it is not assigned to the type“ Destination [] ”. I looked at the data types and it still looks fine, but I'm not sure what the error is. Thanks for your help.

Here is a photo of the error from the console.

data.ts file - these are two elements that are displayed in an 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 } } ] 

assign.ts - data types here

 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 1

This is because the structure of object literals does not match the structure of Assignment .

Typescript is structurally typed, which means that if you want to use a type, then the structure must match the type. This means that if you want to make Assignment by creating object literals, literals must have all the properties in the type.

A few things that I see wrong

• You are missing name and information because they are nested in typeA . This does not work, as they must be in the main structure, as this is what is defined in Assignment

• You need taskB in the first object

• You are missing selectA and selectB from the main structure of objects.

There are probably other things, but hopefully you get the point

If you want to make things optional, can you use a statement ?

 interface Assignment { name?: string; } 

If you want nesting, you can do it too

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

Answer 2

The error is pretty clear:

The 'left' property is missing ...

Your Assignment class declares a member named left , but both of your json objects don't have one.
You have a few more properties that you did not set in your json objects, here is the working version on the playground .

You can declare that properties are optional if you want:

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

But even without errors, you have a problem.
You do not create instances of the Assignment class, you create objects that correspond to the properties of the class.
This works because typescript uses duck printing , but if you have methods in Assignment , then your objects will not have these.
You can do it:

 export const Assignments: Assignment[] = [new Assignment(), new Assignment()]; Object.assign(Assignments[0], FIRST_JSON_OBJ); Object.assign(Assignments[1], SECOND_JSON_OBJ); 

Or you can have a constructor in Assignment that gets this json object and initializes itself.