Advanced TypeScript ​

Get familiar with some of Typescript's greatest advanced features. ​

Typescript is awesome. It offers so many great features. Here’s a summary of some of the greatest advanced Typescript features.

• Union and intersection types
• Keyof
• Typeof
• Conditional types
• Utility types
• Infer type
• Mapped types

By the end of this blog post, you should have a base understanding of each of those operators and you should be able to use them in your projects.

Union and intersection types ​

Typescript allows us to combine multiple types to create a new type. This approach is similar to logical expressions in JavaScript where we can use the logical OR || or the logical AND && to create new powerful checks.

Union types ​

A union type is similar to Javascripts OR expression. It allows you to use two or more types (union members) to form a new type that may be any of those types.

function orderProduct(orderId: string | number) {
  console.log('Ordering product with id', orderId)
}

// 👍
orderProduct(1)

// 👍
orderProduct('123-abc')

// 👎 Argument is not assignable to string | number
orderProduct({ name: 'foo' })

We type the orderProduct method with a union type. TypeScript will throw an error once we call the orderProduct method with anything that is not a number or a string.

Intersection types ​

An intersection type, on the other hand, combines multiple types into one. This new type has all the features of the combined types.

interface Person {
  name: string
  firstname: string
}

interface FootballPlayer {
  club: string
}

function tranferPlayer(player: Person & FootballPlayer) {}

// 👍
transferPlayer({
  name: 'Ramos',
  firstname: 'Sergio',
  club: 'PSG',
})

// 👎 Argument is not assignable to Person & FootballPlayer
transferPlayer({
  name: 'Ramos',
  firstname: 'Sergio',
})

The transferPlayer method accepts a type that contains all features of both Person and FootballPlayer. Only an object containing the name, firstname and the club property is valid.

Keyof ​

Now that we know the union type. Let’s have a look at the keyof operator. The keyof operator takes the keys of an interface or an object and produces a union type.

interface MovieCharacter {
firstname: string;
name: string;
movie: string;
}

type characterProps = keyof MovieCharacter;

Got it! But when is this useful. We could also type the `characterProps` out.

type characterProps = 'firstname' | 'name' | 'movie';

Yes, we could. `keyof` makes our code more robust and always keeps our types up to date. Let’s explore this with the following example.

interface PizzaMenu {
starter: string;
pizza: string;
beverage: string;
dessert: string;
}

const simpleMenu: PizzaMenu = {
starter: 'Salad',
pizza: 'Pepperoni',
beverage: 'Coke',
dessert: 'Vanilla ice cream',
};

function adjustMenu(
menu: PizzaMenu,
menuEntry: keyof PizzaMenu,
change: string,
) {
menu[menuEntry] = change;
}

// 👍
adjustMenu(simpleMenu, 'pizza', 'Hawaii');
// 👍
adjustMenu(simpleMenu, 'beverage', 'Beer');

// 👎 Type - 'bevereger' is not assignable
adjustMenu(simpleMenu, 'bevereger', 'Beer');
// 👎 Wrong property - 'coffee' is not assignable
adjustMenu(simpleMenu, 'coffee', 'Beer');

The adjustMenu function allows you to change a menu. For example, imagine you like the menuSimple but you prefer to drink beer over a Coke. In this case, we call the adjustMenu function with the menu, the menuEntry and the change, in our case, a Beer.

The interesting part of this function is that the menuEntry is typed with the keyof operator. The nice thing here is that our code is very robust. If we refactor the PizzaMenu interface, we don’t have to touch the adjustMenu function. It is always up to date with the keys of the PizzaMenu.

Follow me on Twitter because you will get notified about new TypeScript blog posts and cool frontend stuff!😉 ​

Typeof ​

typeof allows you to extract a type from a value. It can be used in a type context to refer to the type of a variable.

let firstname = 'Frodo';
let name: typeof firstname;

Of course, this doesn’t make much sense in such simple scenarios. But let's look at a more sophisticated example. In this example, we use `typeof` in combination with `ReturnType` to extract typing information from a functions return type.

function getCharacter() {
return {
firstname: 'Frodo',
name: 'Baggins',
};
}

type Character = ReturnType<typeof getCharacter>;

 /*
equal to

type Character = {
firstname: string;
name: string;
}
*/

In the example above, we create a new type based on the return type of the getCharacter function. Same here, if we refactor the return type of this function changes, our Character type is up to date.

Conditional types ​

The conditional ternary operator is a very well-known operator in Javascript. The ternary operator takes three operands. A condition, a return type if the condition is true, and a return type is false.

condition ? returnTypeIfTrue : returnTypeIfFalse;

The same concept also exists in TypeScript.

interface StringId {
  id: string
}

interface NumberId {
  id: number
}

type Id<T> = T extends string ? StringId : NumberId

let idOne: Id<string>
// equal to let idOne: StringId;

let idTwo: Id<number>
// equal to let idTwo: NumberId;

In this example, we use the Id type util to generate a type based on a string. If T extends string we return the StringId type. If we pass a number, we return the NumberId type.

Utility types ​

Utility types are helper tools to facilitate common type transformations. Typescript offers many utility types. Too many to cover in this blog post. Below you can find a selection of the ones I use the most.

The official TypeScript documentation offers a great list of all utility types.

Partial ​

The Partial utility type allows you to transform an interface into a new interface where all properties are optional.

interface MovieCharacter {
  firstname: string
  name: string
  movie: string
}

function registerCharacter(character: Partial<MovieCharacter>) {}

// 👍
registerCharacter({
  firstname: 'Frodo',
})

// 👍
registerCharacter({
  firstname: 'Frodo',
  name: 'Baggins',
})

Required ​

Required does the opposite of Partial. It takes an existing interface with optional properties and transforms it into a type where all properties are required.

interface MovieCharacter {
  firstname?: string
  name?: string
  movie?: string
}

function hireActor(character: Required<MovieCharacter>) {}

// 👍
hireActor({
  firstname: 'Frodo',
  name: 'Baggins',
  movie: 'The Lord of the Rings',
})

// 👎
hireActor({
  firstname: 'Frodo',
  name: 'Baggins',
})

In this example the properties of MovieCharacter were optional. By using Required we transformed into a type where all properties are required. Therefore only objects containing the firstname, name and movie properties are allowed.

Extract ​

Extract allows you to extract typing information from a type. Extract accepts two Parameters, first the Interface and second the type that should be extracted.

type MovieCharacters =
| 'Harry Potter'
| 'Tom Riddle'
| { firstname: string; name: string };

type hpCharacters = Extract<MovieCharacters, string>;
// equal to type hpCharacters = 'Harry Potter' | 'Tom Riddle';

type hpCharacters = Extract<MovieCharacters, { firstname: string }>;
// equal to type hpCharacters = {firstname: string; name: string };

`Extract<MovieCharacters, string>` creates a union type `hpCharacters` that consists only of strings. `Extract<MovieCharacters, {firstname: string}>` on the other hand, it extracts all object types that contain a `firstname: string` type.

Exclude ​

Exclude does the opposite of extract. It allows you to generate a new type by excluding a type.

type MovieCharacters =
  | 'Harry Potter'
  | 'Tom Riddle'
  | { firstname: string; name: string }

type hpCharacters = Exclude<MovieCharacters, string>
// equal to type hpCharacters = {firstname: string; name: string };

type hpCharacters = Exclude<MovieCharacters, { firstname: string }>
// equal to type hpCharacters = 'Harry Potter' | 'Tom Riddle';

First, we generate a new type that excludes all strings. Next, we generate a type that excludes all object types containing firstname: string.

Infer type ​

infer allows you to create a new type. It's similar to creating a variable in Javascript with the keyword var, let or const.

type flattenArrayType<T> = T extends Array<infer ArrayType> ? ArrayType : T

type foo = flattenArrayType<string[]>
// equal to type foo = string;

type foo = flattenArrayType<number[]>
// equal to type foo = number;

type foo = flattenArrayType<number>
// equal to type foo = number;

Wow, the getArrayType looks pretty complicated. But actually, it’s not. Let’s go through it.

T extends Array<infer ArrayType> checks if T extends an Array. Furthermore, we use the infer keyword to get a hold of the array type. Think of it as storing the type in a variable.

We then use the conditional type to return the ArrayType if T extends Array. If not, we return T.

Mapped types ​

Mapped types are a great way of transforming existing types into new types. Therefore the term map. Mapped types are compelling and allow us to create custom utility types.

interface Character {
  playInFantasyMovie: () => void
  playInActionMovie: () => void
}

type toFlags<Type> = { [Property in keyof Type]: boolean }

type characterFeatures = toFlags<Character>

/*equal to

type characterFeatures = {
playInFantasyMovie: boolean;
playInActionMovie: boolean;
}
*/

We create the toFlags helper type that takes a type and maps all properties to be of return type boolean.

Pretty cool. But it gets even more powerful. We can add or remove the ? or the readonly modifier by prefixing them with a simple + or -.

Let’s have a look at an example where we create a mutable utility type.

type mutable<Type> = {
  -readonly [Property in keyof Type]: Type[Property]
}

type Character = {
  readonly firstname: string
  readonly name: string
}

type mutableCharacter = mutable<Character>
/*
equal to

type mutableCharacter = {
firstname: string;
name: string;
}

*/

Each property of the Character type is readonly. Our mutable interface removes the readonly property because we prefix it with a -.`

The same works in the other direction. If we add a + we can create a helper type that takes an interface and transforms it into an interface where every property is optional.

type optional<Type> = {
  [Property in keyof Type]+?: Type[Property]
}

type Character = {
  firstname: string
  name: string
}

type mutableCharacter = optional<Character>

/*
equal to

type mutableCharacter = {
firstname?: string;
name?: string;
}
*/

Of course, those two approaches can also be combined. Look at the next example where the optionalAndMutable type removes the readonly property and adds a ? which makes each property optional.

type optionalAndMutable<Type> = {
  -readonly [Property in keyof Type]+?: Type[Property]
}

type Character = {
  readonly firstname: string
  readonly name: string
}

type mutableCharacter = optionalAndMutable<Character>

/*
equal to

type mutableCharacter = {
firstname?: string;
name?: string;
}
*/

It even gets more powerful. Let’s check out the following example where we create type util that transforms an existing type into a type of setters.

type setters<Type> = {
[Property in keyof Type as `set${Capitalize<
string & Property

> }`]: () => Type[Property];
> };

type Character = {
firstname: string;
name: string;
};

type character = setters<Character>;

 /*
equal to

type character = {
setFirstname: () => string;
setName: () => string;
}
*/

There are no limitations. We can even reuse everything we saw so far. How about a mapped type that uses the Exclude utility type?

type nameOnly<Type> = {
  [Property in keyof Type as Exclude<Property, 'firstname'>]: Type[Property]
}

type Character = {
  firstname: string
  name: string
}

type character = nameOnly<Character>

/*
equal to

type character = {
name: string;
}
*/

That’s it. TypeScript is awesome, and it offers even more features. Once mastered the concepts described in this article are very powerful and can make your code more robust and therefore easier to refactor.