Stop 07 · TypeScriptTopics · 11/12

Advanced Types

In short

Conditional types, infer and template literal types sound scary. You won't write them daily, but you'll read them in library code, so it helps to know what they do.

Conditional types, template literal types, and `infer` — TypeScript's most powerful (and advanced) tools for building precise, expressive type-level logic.

The jaadu mascot runs a sorting machine that sends a starred file and a plain file down different chutes.

Think of it like this

The fee calculator at admissions

If you're a scholarship student, fee is X. Otherwise, it's Y. The form doesn't need a person to decide, the rules decide. Conditional types are if/else for types: given an input type, the rules pick the output type.

Watch it happen

Solving ItemOf<number[]>

Input type

extends?

infer U

Result

1/4TypeScript starts with ItemOf<number[]>, so T is number[].

The big ideas

What you need to know

Conditional types

T extends string ? A : B reads as 'if T is a string, use A, otherwise B'.

infer pulls types out

infer lets you grab a type from inside another, like the item type of an array.

Template literal types

Build string types from other strings, like `on${Capitalize<Event>}` giving "onClick".

satisfies checks, keeps detail

satisfies checks a value against a type but keeps its exact inferred type, so you don't lose detail.

See it in code

Walk through the code

1type IsString<T> = T extends string ? "yes" : "no";2type A = IsString<"hi">;   // "yes"3 4type ItemOf<T> = T extends (infer U)[] ? U : never;5type B = ItemOf<number[]>; // number6 7type Side = "top" | "bottom";8type Margin = `margin-${Side}`; // "margin-top" | "margin-bottom"9 10const routes = {11  home: "/",12  courses: "/courses",13} satisfies Record<string, string>;14routes.courses; // still known, typos like routes.cources are errors

1/4A conditional type: "hi" is a string, so the answer is "yes".

With satisfies, routes is checked to be string values, but TypeScript still knows exactly which keys exist.

Save yourself the pain

Common mistakes

Oops

Writing clever type puzzles in app code that nobody on the team can read.

Do this instead

Keep app types simple. Save advanced tricks for shared helpers, with a comment and an example.

Oops

Using as const or a type annotation when you wanted both checking and exact keys.

Do this instead

Use satisfies. It checks the shape and keeps the precise inferred type.

Your mission

Decode library types

~25 min

Quick check

type T = ItemOf<string[]> where type ItemOf<X> = X extends (infer U)[] ? U : never. What is T?

Go deeper

1Read a few examples of conditional types (`T extends U ? X : Y`).
2Try a template literal type to model string patterns (e.g. route paths).
3Don't over-invest here early — revisit once you're comfortable with the basics.