Command Palette

Search for a command to run...

Hectal
Phase 9Advanced10 of 18 in TypeScript

Conditional and Template Literal Types

Types that make decisions: conditional types, distribution over unions, infer, template literal types and recursive types, built one small step at a time.

Until now, you have written types by hand. In this phase, types start to compute. A conditional type asks a yes/no question about a type and answers with a different type. **infer pulls a piece out of a type. Template literal types** build text types like onClick from smaller pieces. Recursive types let a type refer to itself, so it can describe a tree of any depth.

This is the part of TypeScript that library authors use to make ReturnType, Awaited, typed event names and typed route parameters work. It looks scary at first, so every type here is built step by step, and you will check each step with // ^? in the live editor. Nothing is guessed: if you can read what the Types panel says, you can understand the type.

Be careful too. Clever types are code that other people must read, and the compiler has hard limits on how deep they may go. Topic 9.5 shows the limits with real error messages, and Topic 10.6 comes back to when to stop.

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

Conditional Types

A conditional type, written T extends U ? X : Y, asks whether a type fits another type and picks one of two answers, so a type can change depending on what you give it.

28 min 3 code practice

2
9.2

Distributive Conditional Types

When a conditional type is given a union, it runs once for each member and joins the answers; wrapping the type in [T] turns that off, and never (an empty union) gives an empty answer.

27 min 2 code practice

3
9.3

The infer Keyword

Inside the extends part of a conditional type, infer X says "whatever type sits here, call it X", so you can pull out element types, return types and promise values.

27 min 3 code practice

4
9.4

Template Literal Types

Template literal types build string types from pieces, with the same backtick syntax as template strings, so you can describe text patterns like user-${number} and generate names like onClick from a union.

26 min 5 code practice

5
9.5

Recursive Types

A recursive type refers to itself, so it can describe data of any depth (JSON, nested configs) and can loop over strings and tuples, as long as it stays inside the compiler's depth limits.

27 min 3 code practice

Practise this phase

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

1

Pull Out the Item Type

Write a generic type ElementOf<T> that gives the type of the items when T is an array, and never when it is not.

Advanced
2

Remove null and undefined from a Union

Write NoNulls<T> that removes null and undefined from a union by using a distributive conditional type.

Advanced
3

Detect never Correctly

IsNever<T> should be true when T is never and false for every other type. The starter gives never for IsNever<never>.

Advanced
4

Typed Handler Names

Write Handler<E> that turns an event name such as "click" into the handler name "onClick", using a template literal type and Capitalize.

Advanced
5

Links That Demand the Right Parameters

A route like "/users/:id/posts/:postId" has parameters id and postId. Finish RouteParams<P> so it is the union of those names, then type link so its second argument must have exactly those keys.

Advanced