Create Interface in Typescript without specifying property name

Question

I remember there is a way to create, inside an interface, a field without specifying its name, something like this:

export interface myInterface{
 [propName:string]:string;
}

If I remember well, that sinthax means I can create a field with whatever name I want, something like this:

ob:myInterface = {customName: "value"}

What I'm trying to do now is to add a new field to that interface, with a specific name, something like this:

export interface myInterface{
 [propName:string]:string;
 secondProperties: boolean;
}

When I try the code above I get this error:

Property 'secondProperties' of type 'boolean' is not assignable to string index type 'string'

What is my error?

Could you please share your problem with stackblitz.com ?

Jaypal Sodha
– Jaypal Sodha

2021-05-31 12:15:17 +00:00
Commented May 31, 2021 at 12:15 — Jaypal Sodha
– Jaypal Sodha, Commented May 31, 2021 at 12:15

LaytonGB · Accepted Answer · 2021-05-31 12:23:11Z

2

You need to define all possible types for [propName: string] So you need to do it in this way

export interface myInterface{
  secondProperties: boolean
  [propName:string]: string | boolean;
}

edited May 31, 2021 at 12:23

LaytonGB

1,4041 gold badge10 silver badges23 bronze badges

answered May 31, 2021 at 12:20

CyberEternal

2,5952 gold badges16 silver badges37 bronze badges

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

Comments

Akxe · Accepted Answer · 2021-05-31 14:02:26Z

2

I never found a good solution but the problem arises from this.

You are trying to force a property to be of type boolean & string, which equals to never.

type myInterface = {
    [propName:string]: string;
} & {
    secondProperties: boolean;
};

const obj: myInterface = {
    secondProperties: true,
};

playground

Thanks to @LaytonGB for hinting, that | can be used to make almost the type we wanted.

type myInterface = {
    [propName:string]: string;
} | {
    secondProperties: boolean;
};

const obj: myInterface = {
    secondProperties: 'string' || true,
    otherProps: 'string only', // booleans will result in error.
};

edited May 31, 2021 at 14:02

answered May 31, 2021 at 12:24

Akxe

11.8k6 gold badges43 silver badges80 bronze badges

3 Comments

LaytonGB Over a year ago

With the example you have used here, changing the & to a vertical line | seems to work like OP required.

Matt Over a year ago

Solutions provided by LaytonGB e CyberEternal seem to work

LaytonGB Over a year ago

Though the other methods work, they do not perform the same ideal type-checking. If you create an object, { propName1: "foo", secondProperties: true, propName3: false } then this method (when using an | instead of & on line 3) will show propName3 to be an error. The other methods will not.

LaytonGB · Accepted Answer · 2021-05-31 12:18:08Z

1

Because you have defined any string-named-property of your objects to have a value of string, you can only give secondProperties a string value, because secondProperties itself is a string.

Alternatively consider this:

interface myInterface {
  [propName: string]: string | boolean;
  ["secondProperties"]: boolean;
}

Because secondProperties is a string, and its value returns a boolean, it is not throwing errors.

answered May 31, 2021 at 12:18

LaytonGB

1,4041 gold badge10 silver badges23 bronze badges

1 Comment

Matt Over a year ago

Thank you, your explanation is really clear :)

Collectives™ on Stack Overflow

Create Interface in Typescript without specifying property name

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related