Typescript: Defining an interface with both dynamic and static keys

Question

Im working with data that looks like

{
 8533864186048: "4",
 8533864218816: "1",
 isExchange: true,
 returnType: "exchange",
}

where the first two keys are dynamic but will always be strings

so I tried to define the interface as such:

interface ReturnData {
  [key: string]: string; <- Applying this to whole interface for some reason
  isExchange?: boolean;
  returnType?: ReturnType;
  selectedVariant: Variant;
}

So am having the issue where trying to define a dynamic member on the interface causes ts to try and assign all the other members to type string

What would be the correct way to go about this?

Does this answer your question? Typescript how to mix dynamic([key: type]: type) and static typing for an interface — Corey
– Corey, Commented Jul 9, 2021 at 13:43

hnb · Accepted Answer · 2021-07-09 14:50:05Z

2

You could do something like:

interface ReturnData {
  isExchange?: boolean;
  returnType?: ReturnType;
  selectedVariant: Variant;
  [key: string]: string | boolean | ReturnType | Variant;
}

But instead of mixing dynamic and static property together, I think you should refactor your interface like this:

interface ReturnData {
  isExchange?: boolean;
  returnType?: ReturnType;
  selectedVariant: Variant;
  someProps: {
    [key: string]: string;
  }
}

so the interface is more readable.

edited Jul 9, 2021 at 14:50

answered Jul 9, 2021 at 14:14

hnb

1571 silver badge7 bronze badges

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

2 Comments

Todd Over a year ago

Welcome to StackOverflow! Please edit your answer to explain what this code does and how it answers the question, so that it is useful to people with similar issues. See: How do I write a good answer?

KylianMbappe Jan 17 at 15:11

I'm really surprised TypeScript doesn't support this.

captain-yossarian from Ukraine · Accepted Answer · 2021-07-10 16:49:03Z

1

You can just restrict all number keys to be a string: [key:number]: string

type CustomReturnType = string;
type Variant = string;

interface ReturnData {
  [key: number]: string; // <--- any number key should be a string
  isExchange?: boolean;
  returnType?: CustomReturnType;
  selectedVariant: Variant;
}

const data: ReturnData = {
  isExchange: true,
  returnType: 'hello',
  selectedVariant: 'variant',
  2334234234: 'sd',
  234234234:23 // expected error
}

answered Jul 10, 2021 at 16:49

captain-yossarian from Ukraine

33.5k5 gold badges41 silver badges78 bronze badges

Comments

Amir Saleem · Accepted Answer · 2021-07-09 13:49:30Z

0

You can define your interface like this

interface ReturnData {
    isExchange?: boolean;
    returnType?: ReturnType;
    selectedVariant: Variant;
    [key: string]: string | boolean | ReturnType | Variant;
}

Another approach is this if you only want numbered keys to be a string

type ReturnData = {
    [key in string | number]: key extends number ? string : string | boolean | ReturnType | Variant;
} & {
    isExchange?: boolean;
    returnType?: RT;
    selectedVariant: V;
};

const k: ReturnData = {
    8533864186048: "4",
    8533864186049: "3",
    8533864186048: true // invalid
};

Final Implementation will look like this

type ValidKeys = "isExchange" | "returnType" | "selectedVariant";

type ReturnData = {
    [key in string | number]: key extends ValidKeys ? string | boolean | ReturnType | Variant : string;
} & {
    isExchange?: boolean;
    returnType?: ReturnType;
    selectedVariant: Variant;
};

edited Jul 9, 2021 at 13:49

answered Jul 9, 2021 at 13:40

Amir Saleem

3,1604 gold badges25 silver badges36 bronze badges

2 Comments

Zenith Over a year ago

Is there no way to limit additional keys to just being of string type?

Amir Saleem Over a year ago

try the latest updated version. It should work

Collectives™ on Stack Overflow

Typescript: Defining an interface with both dynamic and static keys

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related