Command Palette

Search for a command to run...

Hectal
Phase 7Intermediate8 of 18 in TypeScript

Generics

Write one function, class or type that works for many types and keeps the exact type: type parameters, constraints, defaults, inference control and variance.

A generic is a template with a blank in it. You write the code once, leave a blank for the type, and each caller fills the blank in. A function that returns the first item of an array should work for numbers, text and users, and it should tell you which one you got. Without generics you must pick between copying the code for every type or giving up the types with any.

This phase starts with the problem generics solve, then builds up: type parameters and inference, constraints ("any type, as long as it has a length"), generic interfaces, aliases and classes, real patterns (a typed fetchJson, an event emitter, a cache, groupBy), ways to steer inference when the compiler guesses wrong, and finally variance: why an array of dogs is not quite an array of animals.

Every example is checked by the real TypeScript compiler. Use the // ^? lines and the Types panel often: with generics, seeing what the compiler worked out is half the lesson.

0/7 · 0%
7 topics ~3 h 27 code blocks & diagrams
Start with the first topic
1
7.1

Why Generics

A generic function has a blank for the type. The caller fills the blank, and TypeScript remembers it, so what goes in is exactly what comes out, with no copying and no any.

26 min 3 code practice

2
7.2

Generic Functions and Inference

A generic function can have several type parameters, and TypeScript usually works them out from the arguments. You write the type arguments by hand only when there is nothing to infer from.

26 min 3 code practice

3
7.3

Generic Constraints

A constraint (T extends Something) limits which types may fill a blank, and in return the function body can use everything the constraint promises, while still returning the caller's exact type.

27 min 4 code practice

4
7.4

Generic Interfaces, Type Aliases and Classes

Interfaces, type aliases and classes can have type parameters too, so one definition describes a Box<number>, a Box<string>, a Result<User, Error>, a Stack<Order>. Defaults let callers leave a blank empty.

27 min 4 code practice

5
7.5

Real-World Generic Patterns

Four generics you'll meet in real projects: a typed fetchJson<T>, an event emitter whose payloads depend on the event name, a generic cache and the array helpers groupBy, unique and chunk.

29 min 4 code practice

6
7.6

Controlling Inference

Inference is usually right, and sometimes too wide, too narrow or from the wrong place. const type parameters keep exact literals, NoInfer stops an argument from steering the type, and you can read where inference gives up.

27 min 4 code practice

7
7.7

Variance

Variance answers one question: if a Dog can be used where an Animal is expected, can a Box<Dog> be used where a Box<Animal> is expected? The answer depends on whether the type produces values, consumes them, or both.

28 min 5 code practice

Practise this phase

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

1

Make first Generic

first returns the first item of an array, but its signature uses unknown, so the caller gets unknown back and can't use the value without checking it.

Beginner
2

Pluck a Property

pluck should return one property from every item in a list. Right now it takes any object and a plain string key, so it returns unknown[] and accepts keys that don't exist.

Intermediate
3

A Generic Result Type

safeDivide returns a Result that is either a success with a number or a failure with a text. The type is written for numbers only, so it can't be reused.

Intermediate
4

A Generic Stack

The Stack class stores unknown, so every value you take out has to be checked. The program already writes new Stack<number>(), which is an error until the class has a type parameter.

Intermediate
5

Write groupBy

groupBy should sort a list into piles, one per key. The current version works only for unknown items and string keys, so the callback (w) => w[0] doesn't even compile.

Intermediate
6

Build a Typed Event Emitter

The Emitter below works, but its handlers and payloads are any: nothing checks that "login" carries a { user }, and a typo in an event name goes unnoticed.

Advanced