javascripttypescripttyping

TypeScript: Reference subtype of type definition (interface)


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.


Solution

  • 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