3

on this piece of code

export interface Field {
  selected:  boolean;
  value: any;
}

export interface ConflictingVersionModel {
  [key: string]: Field;
  selected: boolean;
}

I get this error: TS2411: Property 'selected' of type 'boolean' is not assignable to 'string' index type 'Field'.

the same one if I try:

export interface ConflictingVersionModel {
  [key: string]: {
    selected:  boolean;
    value: any;
  };
  selected: boolean;
}

Any ideas on what might be wrong?

shalamel_bartalogonos
  • 73
  • 6
  • When you add an indexer to a type, like `[key: string]: Field;`, it means that **all** properties have to return `Field`. In JavaScript you can't override the indexer operator `[]`: it always maps string keys to actual `object` properties. – Dai Jun 18 '22 at 13:49
  • @Dai And there is no way to add another property? It seems awful for me to be like this – shalamel_bartalogonos Jun 18 '22 at 13:50
  • You could do `interface ConflictingVersionModel { fields: { [key: string]: Field }; selected: boolean; }` – Dai Jun 18 '22 at 13:51
  • See https://stackoverflow.com/questions/14841598/implementing-an-indexer-in-a-class-in-typescript – Dai Jun 18 '22 at 13:52
  • Don't forget to use `readonly` where-appropriate. – Dai Jun 18 '22 at 13:53

1 Answers1

4

Yeah that won't work. An index signature means 'all properties of this object have this type'.

You can however achieve what it looks like you are trying to do using an intersection type

export interface Field {
  selected:  boolean;
  value: any;
}

type ConflictingVersionModel = {
  [key: string]: Field;
} & { selected: boolean }
Ben Wainwright
  • 4,224
  • 1
  • 18
  • 36
  • But if I do `const val: ConflictingVersionModel = { selected: true }` it will complain `Type 'boolean' is not assignable to type 'Field'.` – Yihao Gao Aug 11 '22 at 03:01
  • Well yeah - because `{ selected: true }` is a more specific type than `{ selected: boolean }`. You can't assign a type _where selected can only be true_ to a type where _selected can be either true or false_ – Ben Wainwright Aug 11 '22 at 15:23
  • This example does not seem to work. Here is my test code: https://gist.github.com/martian17/03b7933ca4d3b981c2c8895831ec5d82 – martian17 Mar 18 '23 at 23:36