TypeScript Error: Property '0' is missing in type

Question

I have my interface like this

export interface Details {
  Name: [{
    First: string;
    Last: string;
  }];
}

I have an observable config variable:

Configuration: KnockoutObservable<Details> = ko.observable<Details>();

and I would like to assign it a value in the constructor as follows:

config = {
  Name: [{
    First: "ABC",
    Last: "DEF"
  },
  {
    First: "LMN",
    Last: "XYZ"
  }]
};

this.Configuration(config);

and I am getting an error:

Types of property 'Name' is incompatible and property '0' is missing in type.
Type '{ First:string; Last:string; }[]' is not assignable to 
type '[{ First: string; Last:string; }]'

I don't have control on changing the interface as it is being used elsewhere.
What is the correct way to initialize this config variable ?

Thanks in advance.

RyanA91 · Accepted Answer · 2017-09-26 07:51:21Z

86

I came across the same issue and got around it by changing the interface to:

    interface Details {
        Name: {
            First: string;
            Last: string;
        }[];
    }

I know you may not want the interface changed but hope this helps for anyone that is in this situation.

answered Sep 26, 2017 at 7:51

RyanA91

9437 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Joseph Hamilton Over a year ago

I want to kiss you! I fought this for so long without any answers. Thanks you so much!

RyanA91 Over a year ago

Ha! I am glad this helped because I definitely found myself in the same boat some time ago.

Simon_Weaver Over a year ago

Just in case it isn't obvious the solution here is to move the [] to immediately follow {} instead of being [ { } ]. This is a change in syntax with recent typescript version.

RyanA91 Over a year ago

No problem! Glad to see this is still helping people years down the line!

Greg Gum · Accepted Answer · 2021-01-10 12:14:03Z

68

This error can come from incorrectly typing an array (like I just did):

myArray:[]; //Incorrect, results in error message of `Property '0' is missing in type`

myArray: Array<string>; //Correct

myArray: string[]; //Also correct

The reason is that brackets denote a tuple in Typescript, not an array.

The Docs

edited Jan 10, 2021 at 12:14

answered Mar 22, 2019 at 1:44

Greg Gum

38.8k46 gold badges183 silver badges269 bronze badges

1 Comment

Toskan Over a year ago

brackets? braces? what you mention for me are brackets [] braces are for me{} at best the terms are overloaded. And honestly, why the heck would TS use [] to denote a tuple? that's just wayyyy beyond me.

dbandstra · Accepted Answer · 2017-06-09 05:29:58Z

16

In this type definition:

interface Details {
  Name: [{
    First: string;
    Last: string;
  }];
}

Name is not an array at compile-time. It's a tuple with one element. Tuples in Typescript are allowed to have extra elements, but they can't have missing elements. As a 1-tuple, Name is essentially an array which must have at least one element.

However, in this value:

const config = {
  Name: [{
    First: "ABC",
    Last: "DEF"
  },
  {
    First: "LMN",
    Last: "XYZ"
  }]
};

Since there is no explicit typing, the Name property here defaults to array type. Arrays can have any number of elements, including zero - which doesn't fit in a 1-tuple. Hence your error.

Your error can be fixed by giving the compiler a hint that your literal is actually a tuple:

const config: Details = { Name: [{...}, {...}] };

If you do need to be able to take in an array of names, you'll have to do some casting, maybe something like this:

if (names.length > 0) {
  const config = {
    Name: names as Details['Name']
  };
  Configuration(config);
}

(You could remove the if check if you can determine that the tuple was simply a mistake by whoever wrote the typings.)

Tuples reference: https://www.typescriptlang.org/docs/handbook/basic-types.html

answered Jun 9, 2017 at 5:29

dbandstra

1,3149 silver badges10 bronze badges

1 Comment

royse41 Over a year ago

great answer! just helped me out.

Rajaram Nayak · Accepted Answer · 2018-04-04 14:00:41Z

11

Updating the interface to following should fix the issue :

 interface Details {
        Name: Array<{
            First: string;
            Last: string;
        }>;
    }

answered Apr 4, 2018 at 14:00

Rajaram Nayak

1531 silver badge4 bronze badges

2 Comments

CharliePrynn Over a year ago

Can you explain why this fixes the issue please?

Rajaram Nayak Over a year ago

I believe, [] in typescript refers to tuple type , Array<> is a closer representation of javascript arrays. That's my understanding .

Collectives™ on Stack Overflow

TypeScript Error: Property '0' is missing in type

4 Answers 4

4 Comments

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related