Typescript types definitions - inheritance

Question

I have a typescript interface that represent my data in database, like :

interface Foo {
  bar: {
    fish: {
       _id: string,
       name: string,
    }[],
  },

  starwars: string[],
}

I would like to be able to reference parts of this interface. In the following example, I want to pass the data behind the key fish as parameters.

I succedded to make it work doing :

interface Fish {
  _id: string,
  name: string,
}

interface Foo {
  bar: {
    fish: Fish[],
  },

  starwars: string[],
}

function killTheFish(fish: Fish) { ... }

But I would prefer doing something like :

type Fish = Foo.bar.fish;

Do you know any way to reference a part of an interface ?

jcalz · Accepted Answer · 2020-01-21 16:36:09Z

4

Yes, you want lookup types, aka indexed access types. It uses the square bracket notation instead of dot notation (which would collide with namespaces):

type FishArray = Foo["bar"]["fish"]
/*
type FishArray = {
    _id: string;
    name: string;
}[]
*/

type Fish = Foo["bar"]["fish"][number];
/* type Fish = {
    _id: string;
    name: string;
} */

If you have a property-having type T and a keylike type K which is part of the keys of T (K extends keyof T), then T[K] is the type of the property of T at that key K. So Foo["bar"]["fish"] is the type you get if you have a foo object of type Foo and read foo.bar.fish.

That's an array in your example; if you want the element type, you can get that. Arrays have a numeric index signature, so if you have a key of type number, then you'll get the element type. So Foo["bar"]["fish"][number] is that element type.

Okay, hope that helps; good luck!

Playground link

answered Jan 21, 2020 at 16:36

jcalz

339k29 gold badges452 silver badges450 bronze badges

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

1 Comment

Orelsanpls Over a year ago

Magnificent. Note that when there are arrays of same elements, example of syntax is : Foo['bar'][0]['obiwan'][0]['kenobi']

Maciej Sikora · Accepted Answer · 2020-01-21 16:48:34Z

1

Without further ado - we can access mapped type member types by index/key using lookup type syntax ['prop']

type FishArr = Foo['bar']['fish'];

Array type is also mapped type Array<X> = {[k:number]: X}, so all keys have a type number, then by the same way we take a member type from any other mapped type, we can use number for array type element

type Fish = Foo['bar']['fish'][number];

edited Jan 21, 2020 at 16:48

answered Jan 21, 2020 at 16:42

Maciej Sikora

20.3k4 gold badges52 silver badges50 bronze badges

Collectives™ on Stack Overflow

Typescript types definitions - inheritance

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related