TypeScript: Reference subtype of type definition (interface)

Question

I am using the following type in my TypScript:

interface ExerciseData {
    id : number;
    name : string;
    vocabulary : {
        from : string;
        to : string;
    }[];
}

Now I'd like to create a variable that is of the same type as the attribute vocabulary, trying the following:

var vocabs : ExerciseData.vocabulary[];

But that is not working. Is it possible to reference to a subtype somehow? Or would I have to do something like this?

interface ExerciseData {
    id : number;
    name : string;
    vocabulary : Vocabulary[];
}

interface Vocabulary {
        from : string;
        to : string;
}

var vocabs : Vocabulary[];

Thanks a lot for hints.

You are correct. You should do what you did in the last code block. — Wayne Ellery
– Wayne Ellery, Commented Jan 10, 2015 at 11:42
Thank you @WayneEllery - so you would say this is definitely not possible? — Mathias Bader
– Mathias Bader, Commented Jan 10, 2015 at 12:07

Duncan Lukkenaer · Accepted Answer · 2021-05-27 10:27:37Z

123

You can reference interface subtypes using lookup types, added in TypeScript 2.1:

interface ExerciseData {
    id: number;
    name: string;
    vocabulary: Array<{
        from: string;
        to: string;
    }>;
}

type Name = ExerciseData['name']; // string

These lookup types can also be chained. So to get the type of a vocabulary item you can do this:

type Vocabulary = ExerciseData['vocabulary'][number]; // { from: string; to: string; }

Or with even more chaining, the from field:

type From = ExerciseData['vocabulary'][number]['from']; // string

For complex scenarios it's also possible to base the lookup type on another type. For example, on a string literal union type:

type Key = 'id' | 'name';
type FieldTypes = ExerciseData[Key]; // number | string

edited May 27, 2021 at 10:27

answered Jun 30, 2017 at 10:17

Duncan Lukkenaer

14.2k19 gold badges75 silver badges109 bronze badges

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

4 Comments

xperiments Over a year ago

Any way of do this dinamically? Like in JS ExerciseData[xxx][]

GeorgeButter Over a year ago

How about if you want to access a child of vocabulary, can thus be chained?

Duncan Lukkenaer Over a year ago

@xperiments I have added an example of basing the lookup type on another type. If with dynamically you actually meant using a string value, then no, it wouldn't be possible because the TypeScript compiler cannot know what that value will be in runtime.

Duncan Lukkenaer Over a year ago

@Buts Yes, this is possible. I've added an example in my answer.

Vladimir Tolstikov · Accepted Answer · 2020-05-22 17:15:48Z

8

I found it's working in the next way these days:

interface User {
  avatar: string;
}

interface UserData {
  someAvatar: User['avatar'];
}

very useful if you don't want to export all the things.

answered May 22, 2020 at 17:15

Vladimir Tolstikov

2,71325 silver badges14 bronze badges

Comments

daleyjem · Accepted Answer · 2024-03-20 03:16:45Z

8

Something to keep in mind if you are trying to access by Interface['index'], but index is possibly undefined (optional).

Note the vocabulary? below:

interface ExerciseData {
    id: number;
    name: string;
    vocabulary?: {
        from: string;
        to: string;
    }[];
}

Use the NonNullable utility type like so...

type Test = {
    prop: NonNullable<ExerciseData['vocabulary']>[number]['from']
}

edited Mar 20, 2024 at 3:16

answered Sep 29, 2023 at 1:45

daleyjem

2,7241 gold badge31 silver badges42 bronze badges

Comments

Dick van den Brink · Accepted Answer · 2015-01-10 15:58:19Z

7

Not exactly what you want but you can hack around this with the typof keyword but only if you have a var that is declared as your interface type like below. Note that I think what you did in your last codeblock is a lot better :)

interface ExerciseData {
    id : number;
    name : string;
    vocabulary : {
        from : string;
        to : string;
    }[];
}
var x: ExerciseData;
var vocabs : typeof x.vocabulary[];

answered Jan 10, 2015 at 15:58

Dick van den Brink

14.7k3 gold badges35 silver badges44 bronze badges

1 Comment

Mathias Bader Over a year ago

Hmmm, that's a quite interesting possibility indeed - though not quite what I was looking for. Thank you for mentioning it.

Collectives™ on Stack Overflow

TypeScript: Reference subtype of type definition (interface)

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related