Error: Type '{}' is missing the following properties from type

Question

interface Person {
  name: string;
  surname: string;
}
let person1: Person = {};

person1.name = "name"
person1.surname = "surname"

When I declare person1 I get this error:

Type '{}' is missing the following properties from type Person

Solution 1

This is a better way:

let person1: Person = {name: '', surname: ''};

But if you want exactly empty object than you can hack it like this:

let person1: Person = {} as Person;

Update after comment:

Look at this unpredictableFunction:

const unpredictableFunction = (): string|number|string[] => {
  return Math.random() > 0.5 ? 'string' : Math.random() > 0.5 ? 9999 : ['1', '2', '3']
};

It may return number or it may return string or it may return array of strings

const person: Person = {name: '', surname: ''};
person.name = unpredictableFunction (); // this is a case you are talking about

In this case you will see

Type 'string | number | string[]' is not assignable to type 'string'.

Answers are:

Look at your code and ensure that you assign only strings to a Person properties,

Or update interface to be ready to a different values:

interface Person {
  name: string | number | string[];
  surname: string; 
}

Solution 2

You have defined an interface with two required properties. So when you define an object with the type of the Person interface you must define these properties right away like this:

let person: Person = {
    name: '',
    surname: ''
}

However if you believe these properties are not required but are rather optional you can change your interface to this:

interface Person {
    name?: string;
    surname?: string;
}

Using the ? syntax you mark the property as optional. The following code should then work:

let person: Person = {};

Solution 3

in Typescript 2.0 we can do this better

let person1 ! : Person;

this "!" is Non-null assertion operator

according to documentation

A new ! post-fix expression operator may be used to assert that its operand is non-null and non-undefined in contexts where the type checker is unable to conclude that fact. Specifically, the operation x! produces a value of the type of x with null and undefined excluded. Similar to type assertions of the forms x and x as T, the ! non-null assertion operator is simply removed in the emitted JavaScript code.

Comments

[Michael]

Why don't you inline the setting of the name and surname properties - an empty object isn't a person, and by casting to any you're kinda defeating the point of typescript

[Mischa]

Thats what interfaces are good for, right? To define the required properties of an object. if u want them to be optional you can do it like so: name?: string;

[Acdn]

That worked but then on assigning the values i get this error : (property) Person.name: stringType 'string | number | string[]' is not assignable to type 'string'.

[ShamPooSham]

Are you assigning literally "name", or something else?

[qiAlex]

@ShamPooSham, not sure I'm following you

[ShamPooSham]

@qiAlex You're saying in your question that you're doing person1.name = "name". Is that what you actually do, or do you do this: person1.name = someVariableName?

[Acdn]

thanks @qiAlex, great explanation. Just find it weird that my value is definitely a string but for some reason it still gives me this error. In my real project my value comes from an input so it is a string! Once I add to.String(value) that works but i find this redundant. Any thoughts on why this is happening?

[qiAlex]

@ShamPooSham "You're saying in your question" ? The author of the question is @Alinacdn, not me, I'm not sure how he do it. but I guess that simple person1.name = "name" should not cause any problems

[ShamPooSham]

Oh, sorry. I meant to tag Alinacdn

[qiAlex]

@Alinacdn, thanks for your comment, you're welcome. to string is the bet way to ensure variable type

[ShamPooSham]

"In my real project my value come from an input so it is a string" Well that depends how you get that input

[ShamPooSham]

We would need to see more of your code to help you with that I think

[Acdn]

@ShamPooSham no this is just for this example. I am assigning the value of an input. With Jquery. I think Typescript thinks this is a number for some reason and it gives me an error saying it is a number although it is a string.

[Acdn]

object.amount = input.val(); // Type 'string | number | string[]' is not assignable to type 'string'. Type 'number' is not assignable to type 'string'. @ShamPooSham i have checked and type is string.

[ShamPooSham]

@Alinacdn That makes sense. input.val() returns string, number or array according to the jquery documentation. The reason it can be a number is that the input could be a <input type="number">. The reason it can be an array is because the jquery selector could theoretically return many elements.

[ShamPooSham]

You can write object.amount = input.val() as string

[Acdn]

@ShamPooSham your comment about depending how you get the value made me think and helped me understand now why this error happens!!! Thanks so much, I've used 'as string' in the end but I know the reason behind it! You are a star!

[ShamPooSham]

@Alinacdn I'm happy to help :) An important part to understand here is that .toString() actually does something in runtime, while as string just tells the typescript compiler that you know the result is a string and that it shouldn't bother you about it. as string won't result in any javascript code when it compiles.

[Acdn]

@ShamPooSham yes, I got it! Thank you again for taking the time to explain :)