Advanced Types

What this module covers

4 steps · TypeScript

1. Step 1. Advanced Types

   The deep end of TypeScript: conditional types, mapped types, template literal types, and infer. type IsString<T> = T extends string ? "yes" : "no"; type MyPartial<T> = { [K in keyof T]?: T[K]; }; type Getters<T> = { [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]; }; type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never; Conditional types: T extends U ? X : Y — a ternary for types. Mapped types transform every property of a type. Template literal types build dynamic string types. infer captures a type portion inside a conditional type.

   Conditional types run entirely at compile time — `IsArray<string>` is resolved to the literal type `"no"` the moment TypeScript checks it, with zero runtime cost. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Create two type aliases testing IsArray with different inputs.

2. Step 2. Quiz: Advanced Types

   Answer these questions about conditional, mapped, and template literal types.

   Conditional types act like a ternary for types; mapped types iterate over keyof T; infer captures a type from within another type. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Answer the quiz below.

3. Step 3. Advanced Type Challenge

   Create a conditional type IsStringLiteral<T> that resolves to "yes" if T extends string, or "no" otherwise. Test it with interface User's name field and a number.

   This is the exact conditional-type pattern from the concepts step, applied to real interface fields via indexed access types (User["name"]) — the same technique libraries use to derive types from existing ones. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Is IsStringLiteral a conditional type tested against both a string and a number?

4. Step 4. Mini project: Advanced Types

   Create a conditional type IsStringLiteral<T> that resolves to "yes" if T extends string, or "no" otherwise. Test it with interface User's name field and a number. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   This is the exact conditional-type pattern from the concepts step, applied to real interface fields via indexed access types (User["name"]) — the same technique libraries use to derive types from existing ones. This project stage asks you to apply the same idea without step-by-step scaffolding. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Is IsStringLiteral a conditional type tested against both a string and a number?