Published lesson · 30 minutes

Understand narrowing and generics

Objective: Narrow a union safely and use a simple generic function to preserve the type of its input.

Understand the idea

Understand narrowing and generics works best when the learner can explain the reason behind each step, not just copy a result. Narrowing follows a runtime check such as `typeof` or a literal tag; a generic parameter lets a function express that its output depends on its input type.

A small helper returns the first item in a list. The caller should still know whether the list contains a number or a label. Treat the names and details as invented practice information; the example is for learning a method and does not describe a live service.

A dependable sequence is: Check for an empty list, return a meaningful optional result and keep the generic parameter on both the input and output. Write down the important decision before you begin so another person can follow the reasoning.

Do not use a type assertion to silence a value you have not checked. A safe result may need to include `undefined`. Compare the result with the objective, then change one thing at a time if the first attempt does not work.

Call the helper with two different list types and inspect the inferred result. Explain one assumption that would need checking before anyone used a similar result outside the classroom.

Keep a short record of the choices you made and the evidence you used to check them. A useful practice result is understandable by another learner, stays within the stated scope and makes its limitations visible before anyone relies on it.

Worked examples

Understand narrowing and generics: practice example

Explore how understand narrowing and generics supports the lesson objective with a small synthetic example.

main.ts

function first<T>(items: T[]): T | undefined { return items[0]; }
const label = first(["home", "sessions"]);
const count = first([2, 4, 6]);
console.log(label, count);

Practice tasks

  1. Explore understand narrowing and generics

    Use the worked example for “Understand narrowing and generics”. Change one small detail to suit a different synthetic community situation, then explain what you expected and how you checked whether the change still met the lesson objective.

  2. Build a TypeScript practice example

    Create a small practice result that demonstrates this objective: Narrow a union safely and use a simple generic function to preserve the type of its input. Use only synthetic information, keep the first version focused, and write down one limitation that a later version should address.

  3. Review and explain the result

    Review your “Understand narrowing and generics” result as if another learner will use it without your explanation. Identify one strength, one exact point that may be unclear, and a revision that would make the result easier to understand or use.

Understand narrowing and generics becomes easier when you check for an empty list, check the result and explain the choice to another learner.

Course overview