Intermediate Typescript

7 min read

I’ve been delving deeper into the Typescript language to learn more advanced types. Here are some notes from a recent course I did.

Type Queries

`keyof`

Get the type representing all of the property keys on an interface.
From here, you can filter the return type further by using the intersection operator (&).

type StringNames = keyof String

type StringPropertyNames = StringNames & string
// "toString" | "charAt" | "charCodeAt" | ...
type SymbolPropertyNames = StringNames & symbol
// typeof Symbol.iterator

`typeof`

Get the type of a value.
A good use case for this could be the response type from an API call.

async function doSomething() {
  const response = await Promise.all([fetch('https://test.com'), Promise.resolve(1), Promise.resolve('Hurrah')])

  type ResponseType = typeof response
  // [Response, number, string]
}

Conditional Types

We can conditionally set a type using the ternary operator syntax, generics and the extends keyword.
extends is currently the only mechanism in Typescript that allows us to express a condition.

class Cat {
  startChasingMouse() {}
  stopChasingMouse() {}
}

class Fish {
  startSwimming() {}
}

type Pet<T> = T extends 'cat' ? Cat : Fish

let pet_cat: Pet<'cat'>
// pet_cat: Cat
let pet_fish: Pet<'notacat'>
// pet_fish: Fish

The way I read it is:
- T extends "cat" is the condition i.e. in this case, does T have the value “cat”.
- If it does, return the class Cat (which in Typescript also means the type Cat).
- Otherwise, return Fish.

Utility Types

Extract

Used to define a new type that’s a sub-section of an existing type.

type Animals = 'lion' | 'tiger' | 'cat' | [string, string, string] | { puppy: string; dog: string }

type StringAnimals = Extract<Animals, string>
// "lion" | "tiger" | "cat"
type ObjectAnimals = Extract<Animals, { dog: string }>
// { puppy: string; dog: string; }
type TupleAnimals = Extract<Animals, [string, string, string]>
// [string, string, string]

The way I read Extract<Animals, string> is:
- Extract from Animals , a subset that is assignable to string.
The way it works:

type Extract<T, U> = T extends U ? T : never

Exclude

This is the opposite of Extract in that it filters out a sub-section of an existing type.

type Animals = 'lion' | 'tiger' | 'cat' | [string, string, string] | { puppy: string; dog: string }

type NonStringAnimals = Exclude<Animals, string>
// [string, string, string] | { puppy: string; dog: string; }

The way it works:

type Exclude<T, U> = T extends U ? never : T

Inference with conditional types

The infer keyword lets us extract and obtain type information from a larger type. It can only be used in an extends clause.
For example, if we wanted to infer the type for a function’s second argument:

type FunctionSecondArg<T> = T extends (first: any, second: infer SecondArgument, ...args: any[]) => any
  ? SecondArgument
  : never

type NewType = FunctionSecondArg<(name: string, numberOfSpecies: number) => void>
// number

Another example is to infer a promise return type:

type PromiseReturnType<T> = T extends Promise<infer Return> ? Return : T

type NewType = PromiseReturnType<Promise<string>>
// string

Indexed Access Types

Allows us to get parts of an array or object type with indices.

interface Animal {
  species: string
  habitat: string
  numberOfSubSpecies: number
  continentsFoundIn: {
    africa: string
    asia: string
    europe: string
  }
}

let continents: Animal['continentsFoundIn']
// { africa: string; asia: string; europe: string; }

let continent: Animal['continentsFoundIn']['africa']
// string

We can also use the union operator:

let continentsOrNumberSubSpecies: Animal['numberOfSubSpecies' | 'continentsFoundIn']
// number | { africa: string; asia: string; europe: string; }

Mapped Types

More flexible than using the index to define new types.

Dictionary type

type Pet = {
  name: string
  species: string
  friends: number
}

type MyDict<T> = { [k: string]: T } // <- index signature

const petStore: MyDict<Pet> = {}
petStore.cat // <- Has type Pet

Mapped type

The example above works, but allows any key to be added to the petStore object. We can be more specific about the keys allowed with a mapped type.

type MyRecord = { [PetKey in 'cat' | 'dog']: Pet } // <- mapped type

function getPetStore(petStore: MyRecord) {
  petStore.cat // <- Has type Pet
  petStore.dog // // <- Has type Pet

  petStore.house // <- Error: Property 'house' does not exist on type 'MyRecord'
}

Differences between mapped type and index signatures:
- Use of the in keyword, rather than :
- Index signatures must be all on string or number, and not a subset of strings or numbers.
To make our example generic, we’d do this:

type MyRecord<KeyType extends string, ValueType> = {
  [Key in KeyType]: ValueType
}

// Which is a built-in Typescript type
type Record<K extends keyof any, T> = {
  [P in K]: T
}

Note that keyof any just gives us string | number | symbol.

Combining mapped types and indexed access types

We can use the index to define the value types e.g.

type PickDateProperties<Keys extends keyof Date> = {
  [Key in Keys]: Date[Key]
}

type DateSubset = PickDateProperties<'getDay' | 'getHours' | 'getTime'>
// { getTime: () => number; getDay: () => number; getHours: () => number; }

To make our example generic, we’d do this:

type PickProperties<ValueType, Keys extends keyof ValueType> = {
  [Key in Keys]: ValueType[Key]
}

type DateSubset = PickProperties<Date, 'getDay' | 'getHours' | 'getTime'>

// Which is a built-in Typescript type
type Pick<T, K extends keyof T> = {
  [P in K]: T[P]
}

Applying modifiers

We can modify each value type to make them readonly and / or optional (?). Note that (-) before readonly or ? indicates the removal of the modifier.
These are already in-built into Typescript.

/**
 * Make all properties in T optional
 */
type Partial<T> = {
  [P in keyof T]?: T[P]
}

/**
 * Make all properties in T required
 */
type Required<T> = {
  [P in keyof T]-?: T[P]
}

/**
 * Make all properties in T readonly
 */
type Readonly<T> = {
  readonly [P in keyof T]: T[P]
}

Template literal types

Uses the same syntax as the ECMAScript template literal, within a type expression.

type Pets = 'cat' | 'dog' | 'snake'

type Colours = 'brown' | 'black' | 'green' | 'yellow'

type PetColours = `my_${Colours}_${Pets}`
// "my_brown_cat" | "my_brown_dog" | "my_brown_snake" | "my_black_cat" | ...

Typescript provides some helper types for use with template literal types.
- UpperCase
- LowerCase
- Capitalize
- Uncapitalize

type CamelCasePetColours = `my${Capitalize<Colours>}${Capitalize<Pets>}`
// "myBrownCat" | "myBrownDog" | ...

This can come in handy when you want to perform key mapping, using the as keyword to redefine the type.

type NewType = {
  [K in keyof I as `set${Capitalize<K>}`]: I[K]
}

Another use case would be to combine with Extract to filter for specific key names e.g. in this case, to return only the methods starting with query

type QueryKeys = Extract<keyof Document, `query${string}`>

Ciao, I'm Julia.

Intermediate Typescript

Type Queries

keyof

typeof

Conditional Types

Utility Types

Extract

Exclude

Inference with conditional types

Indexed Access Types

Mapped Types

Dictionary type

Mapped type

Combining mapped types and indexed access types

Applying modifiers

Template literal types

`keyof`

`typeof`