Michael Hladky & Stefan Baumgartner

The Art and Craft of Type Development

Stop guessing object paths. Use recursive types and template literals to get full auto-completion and compile-time safety for any nested property.

The Art and Craft of Type Development
#1about 6 minutes

The challenge of typing deeply nested object properties

Manually creating function overloads for each level of object nesting is not a scalable or dynamic solution for property selection.

#2about 9 minutes

Setting up a playground for advanced type development

Isolate type development by using the TypeScript playground, a sample data object, and a declared function to focus solely on type signatures.

#3about 13 minutes

Recursively generating a union type for nested keys

Build a recursive helper type using string literals and conditional types to generate a union of all possible dot-notation paths for a nested object.

#4about 8 minutes

Inferring the return type from a string path

Use a recursive conditional type with the `infer` keyword to parse a dot-notation string and correctly determine the type of the selected nested property.

#5about 6 minutes

Recapping the workflow and current TypeScript limitations

The development process involves isolating the problem, using helper types, and understanding current limitations like variadic tuple types for dynamic argument lists.

Related jobs
Jobs that call for the skills explored in this talk.

Angular Developer

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior

Featured Partners

Related Videos

See all videos
Vuejs and TypeScript- Working Together like Peanut Butter and Jelly44:31

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

Rob Richardson

Lies we Tell Ourselves As Developers31:13

Lies we Tell Ourselves As Developers

Stefan Baumgartner

Advanced Typing in TypeScript28:44

Advanced Typing in TypeScript

Lars Hupel

Hello generics, goodbye boilerplate!42:16

Hello generics, goodbye boilerplate!

Miroslav Jonaš

Typescript, React and Atomic Design - a match made in heaven40:05

Typescript, React and Atomic Design - a match made in heaven

Nathalia Rus

All you need is types48:56

All you need is types

Tal Joffe

Where we're going we don't need JavaScript - Programming with Type Annotations29:30

Where we're going we don't need JavaScript - Programming with Type Annotations

Peter Kröner

Front-End Micro Apps35:17

Front-End Micro Apps

Serg Hospodarets

From learning to earning

Jobs that call for the skills explored in this talk.