Command Palette

Search for a command to run...

Hectal
Phase 8Intermediate9 of 18 in TypeScript

Type Operators

Build new types from old ones: keyof, typeof, indexed access, mapped types and key remapping, with the real type each operator produces.

Until now you wrote types by hand: a User here, a union there. In this phase the compiler writes types for you. Each type operator takes a type you already have and produces a new one: the keys of an object, the type of a value, one field's type, or a whole new object type made by transforming every field.

The big idea is one source of truth. If a User type has five fields, a type for "the form where every field is optional" or "the list of field names" should not be typed out again by hand, because the two copies would drift apart. Operators keep the copies in sync: change User once and everything built from it changes too.

Almost every example here asks the compiler a question with // ^? and shows the answer in the Types panel. Read the answers carefully: seeing exactly what type an operator produced is the fastest way to learn it. Topic 8.4 builds Partial, Required and Readonly from scratch, and Topic 10.1 shows the finished versions TypeScript ships.

0/5 · 0%
5 topics ~2 h 20 code blocks & diagrams
Start with the first topic
1
8.1

The keyof Operator

keyof T turns an object type into a union of its key names, so you can say "any valid key of this type" and let the compiler keep that list up to date for you.

24 min 4 code practice

2
8.2

typeof in Types

Inside a type, typeof value asks the compiler "what type does this value have?" so you can derive types from real values and configs instead of writing them twice.

22 min 4 code practice

3
8.3

Indexed Access Types

T["key"] looks up the type of one property inside another type, the same way obj["key"] looks up a value, and T[number] pulls out what an array holds.

21 min 4 code practice

4
8.4

Mapped Types

A mapped type loops over a list of keys and builds a new object type with one property for each, so you can make "the same type, but every field optional" without typing it all again.

23 min 4 code practice

5
8.5

Key Remapping and Filtering

Adding as to a mapped type lets you rename each key, drop some keys by mapping them to never, or build getter-style names from a type.

21 min 4 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Keys and values from a constant object

A palette object maps colour names to hex codes. The type ColorName should be the union of the palette's key names, and ColorHex the union of its values. Both must be **derived from palette**, not typed by hand.

Beginner
2

A getProp that can't be wrong

Write a generic function getProp(obj, key) that returns the property called key. The key must be a real key of obj, and the return type must be the type of that property.

Beginner
3

The type of one cart line

A Cart has a list of lines. Without retyping the line shape, define Line (one entry of Cart["lines"]) and Price (the type of a line's price).

Beginner
4

Optional, locked and complete: three mapped types

Write three mapped types and use them on Profile:

Intermediate
5

Getters without the password

Build PublicGetters<T>: for every key of T except password, a getter function named get + the key with a capital first letter. For Account, id becomes getId: () => number, name becomes getName: () => string, and password is dropped.

Intermediate