'Multiple indexer in Indexable types in TypeScript

I was reading Indexable Types in TypeScript. I was going through this example.

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

// Error: indexing with a numeric string might get you a completely separate type of Animal!
interface NotOkay {
  [x: number]: Animal;
// Numeric index type 'Animal' is not assignable to string index type 'Dog'.
  [x: string]: Dog;
}

I am not able to swallow why the above code will create a problem. I went through many articles online but to no avail. Can anyone explain me in simple words with at least an example how above code will create a problem while doing this won't.

interface Okay {
      [x: string]: Dog;
      [x: number]: Animal;
}

It will be much appreciated if correlation with languages like C++, Java (superclass, subclass) is made here too.

javascripttypescripttypesinterfacehtmlc++webview2


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions