Typescript: is not assignable to type error
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
andinformation
because they are nested in thetypeA
. This doesn't work as they need to be in the main structure, as that is what is defined inAssignment
You need
taskB
in the first objectYou're missing
selectA
andselectB
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
The error is pretty clear:
Property 'left' is missing ...
Your Assignment
class declares a member named left
but both of your json objects don't have it.
You have a few more properties you haven't set in your json objects, here's a working version in playground.
You can declare the properties is optional if you want:
class Assignment {
a_type?: string;
...
}
But even without the errors, you have a problem.
You're not creating instances of the class Assignment
, you only create objects that match the class properties.
It works because typescript is using duck typing, but if you'll have methods in the Assignment
then your objects won't have those.
You can do this:
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
who receives this json object and intialize itself.