How can I create interface in Typescript for array

Question

I want to create an interface in typescript to receive this values:

{
  "ABANDONED VEH": 4,
  "ADMINISTRATION": 4,
  "ALARM-BUS/RES": 4
}

When I try to use the correct interface that I create, I'm getting the error:

Type string is not assignable to IMapping

What I'd already tried:

export interface IMapping {
  [key: string]: { value: string };
}

export interface IMapping {
  key: any;
}

[key: string]: string;

PS. Here's my real code:

file interface.ts:

export interface IMapping {
  [key: string]: number;
}

file that use this interface:

import { IMapping } from '../interfaces';
const mapping: IMapping =  '{'
  + '"ABANDONED VEH": 4,'
  + '"ADMINISTRATION": 4"}';

[key: string] is not special is just any prop that is string (it's dynamic key from ES6 + type - where key is variable not value), you don't use the same for value. — jcubic
– jcubic, Commented Apr 4, 2019 at 10:56
The error probably is because your code have var a: IMapping[] = ["foo", {"ABANDONED VEH": 20,...}]; or something like this. — jcubic
– jcubic, Commented Apr 4, 2019 at 11:07
The problem you have is that you use JSON string, you need to parse the string to get the object using JSON.parse (that probably just return any). — jcubic
– jcubic, Commented Apr 4, 2019 at 11:09

Hitmands · Accepted Answer · 2019-04-04 10:54:31Z

1

This looks like the typing for your data.

interface IMapping {
  [key: string]: number;
}

const data: IMapping = {
  "ABANDONED VEH": 4,
  "ADMINISTRATION": 4,
  "ALARM-BUS/RES": 4
};

however, is not clear why you're talking about arrays (indexeed ones), in that case you might want a list of IMapping

const list: IMappings[] = [
  {
    "ABANDONED VEH": 4,
    "ADMINISTRATION": 4,
    "ALARM-BUS/RES": 4
  },
  {
    "ABANDONED VEH": 5,
    "ADMINISTRATION": 5,
    "ALARM-BUS/RES": 5
  },
];

answered Apr 4, 2019 at 10:54

Hitmands

14.2k4 gold badges41 silver badges78 bronze badges

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

Comments

jo_va · Accepted Answer · 2019-04-04 11:30:06Z

1

According to the shape of your data, the value type in your interface should be number and not { value: string }:

export interface IMapping {
  [key: string]: number;
}

Or if you want to specify the properties:

export interface IMapping {
  'ABANDONED VEH': number,
  'ADMINISTRATION': number,
  'ALARM-BUS/RES': number
}

However, according to your error message and your code, you are assigning a string to an object of type IMapping which is invalid.

Type string is not assignable to IMapping

const mapping: IMapping =  '{'
  + '"ABANDONED VEH": 4,'
  + '"ADMINISTRATION": 4"}';
//                      ^ remove this and use JSON.parse()

If you know the object at compile-time, then use a literal expression to define it:

const mapping: IMapping = {
  "ABANDONED VEH": 4,
  "ADMINISTRATION": 4,
  "ALARM-BUS/RES": 4
}

If your data comes from an API in a string format, then use JSON.parse() on it:

const mapping: IMapping = JSON.parse('{"ABANDONED VEH": 4,"ADMINISTRATION": 4,"ALARM-BUS/RES": 4}');

Note however that your string is not valid JSON, you have a trailing " after the last 4.

edited Apr 4, 2019 at 11:30

answered Apr 4, 2019 at 10:54

jo_va

14.1k3 gold badges25 silver badges49 bronze badges

4 Comments

jo_va Over a year ago

@Rajesh, I don't see what you mean, can you explain ?

Rajesh Dixit Over a year ago

Check my answer. Just explained it there

jo_va Over a year ago

@Rajesh, the error message is not about a property assignment but about assigning a string directly to an object typed to this interface (const obj: IMapping = 'string')

Rajesh Dixit Over a year ago

I did not think about that... Nice. I'll wait for OP to clarify and would remove my answer if this is the case

Dennis · Accepted Answer · 2019-04-04 11:09:36Z

0

Your values are numbers, not strings. You should try:

export interface IMapping {
  [key: string]: number;
}

Your second version with the any type will not work because you did not use the brackets - that will expect a property with name key, not a dictionary-like object.

EDIT:

After your edit, it is obvious that you are trying to assign a string. You should assign the object directly:

const mapping: IMapping =  {
  "ABANDONED VEH": 4,
  "ADMINISTRATION": 4};

edited Apr 4, 2019 at 11:09

answered Apr 4, 2019 at 10:52

Dennis

14.5k3 gold badges37 silver badges56 bronze badges

8 Comments

Rajesh Dixit Over a year ago

If you have [key"...]: {...} you cannot assign a primitive value

Andre Moraes Over a year ago

I change for it and stills

Andre Moraes Over a year ago

Do have any way to do this? @Rajesh

Dennis Over a year ago

right, I adapted with the hint from @Rajesh: I did not realize that you expected complex objects as values in the object - thanks!

Dennis Over a year ago

@Rajesh Correct, but being picky my edit was done before that answer - and I'd still keep my answer for the short explanation of why the version with any in the question would not work.

|

Collectives™ on Stack Overflow

How can I create interface in Typescript for array

3 Answers 3

Comments

4 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related