Motivation

Can use used to collect the type of some property e.g.

export type SubmitRequest = {
  transactionId: string,
  personal: {
    title: string,
    driverFirstName: string,
    driverMiddleName: string,
    driverLastName: string,
    email: string,
    phone: string,
    previousAliases: {
      firstName: string,
      middleName: string,
      lastName: string,
    }[],
    gender: string,
    dob: string,
    birthCountry: string,
  },
  payment: {
    creditCardToken: string,
  }
};

// Lookup type
type PaymentRequest = SubmitRequest['payment'];

export function getPayment(): PaymentRequest {
  return {
    creditCardTokens: '124q234n12l!@#$3412n34!@#$'
  }
}

Nesting

You can nest further and even use array indexes e.g.:

export type SubmitRequest = {
  transactionId: string,
  personal: {
    title: string,
    driverFirstName: string,
    driverMiddleName: string,
    driverLastName: string,
    email: string,
    phone: string,
    previousAliases: {
      firstName: string,
      middleName: string,
      lastName: string,
    }[],
    gender: string,
    dob: string,
    birthCountry: string,
  },
  payment: {
    creditCardToken: string,
  }
};

// Lookup types chain
type PreviousAliasRequest = SubmitRequest['personal']['previousAliases'][number];

Transcript

00:00

I once worked on an application where the backend needed a bunch of information specified by a type called submit request similar to what is shown over here. Then different portions of the UI would collect portions of this request and send it back to the backend. For example, a portion of the UI was dedicated to the purpose of collecting the credit card token. Now, in order to ensure consistency between the return type of the get payment method and the payment portion of the submit request, we could extract that portion out into its own name type for example, payment request,

00:34

and then export that from the common library and then use it in our UI application. But this leads to two problems. First, we need to start asking the backend team to make modifications to their type definitions, and additionally, we will probably start asking that for other portions of the submit request as well. A second issue with this approach is that now for someone looking at just the submit request, they would see various members pointing to different types and it would not be immediately clear to them why these types need to be split out. These additional types are essentially type noise in the common library.

01:07

The solution to both of these problems is provided by typescripts lookup types. So we get rid of the return type annotation, get rid of this extra type within our common library duty, and then revert submit request to all be in line. Now, using typescripts lookup types, we can look up the type of the payment member from submit request on the fly. The syntax for looking up the type of a particular member is similar to the syntax of looking up a member from a JavaScript object. Here we are saying that the return type of the get payment method should be the same as the type of the payment member of submit request.

01:42

This return type annotation ensures that we return the correct type and if you make any silly typos, for example, add an extra S, you can see that TypeScript points it out as a mistake. Now we have used this lookup type in line, but if you find yourself using the same type again and again, you are still free to create a type alias using a lookup type. This is still better than our previous solution because a submit request is still one cohesive type. And additionally, this particular utility type can live in our UI project and not in the common library.

02:15

Now, lookup types can also be used to look up the type of the items in an array. Within our type submit request, we have a member personal that has a member previous aliases, which is an array of items as indicated by these square brackets. So a previous alias is something that has three members, first name, middle name, and last name. Let's see how we can get that type. So we jump back to the UI portion of our code, and the first thing that we will do is that from submit request, we look up the member personal, and then from the type types of metric request personal,

02:49

we look up the member previous aliases as we saw before, this particular member is an array. So to get the type of the items in the array, all we need to do is to look up the first item by using an index zero. And now our previous alias request is exactly what we wanted. That is a type with three members, first name, middle name, and last name.

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional TypeScript Masterclass Lessons

Lookup Types

Subscription Required

Motivation

Nesting

Transcript

Professional TypeScript Masterclass