typescript interface definition with an unknown property key

Question

How to express an interface (IResponse), with one property has a string key (which is not known statically). Below, the key values can be anything like books, chairs, etc. All other keys and types are known statically. Below implementation gives error. I guess the error is because the index signature on the IResponse makes all the property values to be IValue[]. Is there a way to do this?

export interface IMeta{}
export interface IValue{}
export interface IResponse {
     meta: IMeta;
     [index: string]:IValue[];
}

 export class Response implements IResponse {
    meta:IMeta;
    values:IValue[];
    //books:IValue[];
    //anything:IValue[];
 }

Not that I know of. However, since the properties can be named anything and are defined on the class anyway, do they really need to be in an interface to begin with? — thoughtrepo
– thoughtrepo, Commented May 28, 2014 at 14:39
thanks. without the definition, I may not be able to access the property like d["books"], with implicit any set. It will give TS7017 "Index signature of object type implicitly has an 'any' type. The interface define input from an external source, which is of format jsonapi.org/format — bsr
– bsr, Commented May 28, 2014 at 15:34

laaksom · Accepted Answer · 2023-01-14 13:21:06Z

43

Old question, but here is how I solved the issue for myself.

export interface Foo {
    [key: string]: any;
}

{ something: 0 } as Foo => valid

{ other: 'hello' } as Foo => valid

Edit: January 14, 2023: There is a better way to do this for type safety if you know what the possible shapes are:

type ApiResponse<Type> = {
  [Property in keyof Type]: Type[Property];
};

type BookResponse = { title: string; }

const myBookResponse: ApiResponse<BookResponse> = { title: 'foo' } // OK
const myBookResponse: ApiResponse<BookResponse> = { title: 42 } // ERROR
const myBookResponse: ApiResponse<BookResponse> = { title: 'foo', taco: true } // ERROR

edited Jan 14, 2023 at 13:21

answered Aug 27, 2018 at 18:31

laaksom

2,2303 gold badges21 silver badges18 bronze badges

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

2 Comments

tmuecksch Over a year ago

This should be the selected answer. Thank you for sharing!

Alex Bausk Over a year ago

This amounts to turning off typechecking completely except for checking that key is a string. It is not a solution at all.

Fenton · Accepted Answer · 2014-05-28 18:41:11Z

13

If you define one interface for the known types and a separate one for the "unknown" types, you could use a type assertion to tell the compiler the one you wanted to use.

It isn't ideal, but you are working in a edge case (i.e. not entirely dynamic, not entirely static).

export interface IMeta{}
export interface IValue{}
export interface IFunkyResponse {
     [index: string]:IValue[];
}
export interface IResponse {
     meta: IMeta;
}

export class Response implements IResponse {
    meta:IMeta;
    values:IValue[];
    books:IValue[];
    anything:IValue[];
}

You can type-assert between <IResponse> resp and <IFunkyResponse> resp to access one or the other of the styles.

answered May 28, 2014 at 18:41

Fenton

253k74 gold badges404 silver badges414 bronze badges

2 Comments

bsr Over a year ago

Did you mean something like typescriptlang.org/Playground . Can you please show how to typecast.

Fenton Over a year ago

That's the idea - you won't like the type assertion, but bear in mind this isn't your typical case... var tmp = (<IFunkyResponse><any>d);

David DIVERRES · Accepted Answer · 2020-02-03 06:18:08Z

2

Without interface:

const myFunc = ((myObjectWithSomeKeys: { [key: string]: any }) => {
});

answered Feb 3, 2020 at 6:18

David DIVERRES

1,94122 silver badges32 bronze badges

Comments

Alex Bausk · Accepted Answer · 2021-07-21 16:12:51Z

-2

There seem to be no exact replies unfortunately, only approximations of a solution.

The solution is to use intersection type over two interfaces, one that defines static metadata and one that defines dynamic keys:

interface IStatic {
  staticflag: boolean;
}

interface IDynamic {
  [x: string]: string | number;
}

type Complex = IStatic & IDynamic;

const a: Complex = {
  staticflag: false,
  dynamic1: 'a',
};

answered Jul 21, 2021 at 16:12

Alex Bausk

7185 silver badges30 bronze badges

1 Comment

char bugs Over a year ago

This does not work. The compiler is complaining about staticflag being incompatible with string|number. See: typescriptlang.org/play?#code/…

Collectives™ on Stack Overflow

typescript interface definition with an unknown property key

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related