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.

Answer 1

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 

Answer 2

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.