Question

6

Typescript: is not assignable to type error

rated 0 times [ 10] [ 4] / answers: 1 / hits: 71818 / 8 Years ago, sun, october 16, 2016, 12:00:00

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.

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;

  }

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

noe

Add To Favorites

Follow

Total Points: 149

Total Questions: 91

Total Answers: 91

Location: Namibia

Member since Mon, Feb 21, 2022

2 Years ago

answered 8 Years ago zahrafrancisr · Accepted Answer

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

Typescript is a structurally typed language, which means that a class' type and properties are defined by its structure. An object literal can be considered a type of a class if the structure maches. For example, say we have this class

class Person {

  firstName: string;

  lastName: string;

}

Instead of the normal way on instantiating a class with the new keyword,

let person: Person = new Person();

person.firstName = "Stack";

person.lastName = "Overflow";

we could use the following:

let person: Person = {

  firstName: "Stack",

  lastName: "Overflow"

}

If we didn't include the lastName property, we would get a compile error as the structure does not match that of the Person class and we tried to type it as a Person.

As far as your code, a few things I see wrong are:

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

You need taskB in the first object

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

There are probably more errors also, 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 }

}

See also:

TypeScript docs on Type Compatibility

TypeScript docs in Interfaces