Learn: Advance Typescript - Part 1

Overview

Welcome to our deep dive into advanced TypeScript concepts! In this article, we'll explore a range of powerful features and patterns that frequently arise in interviews and real-world TypeScript development. By the end, you'll have a stronger grasp of topics like conditional and mapped types, utility types, type inference, type narrowing, and more—enabling you to write safer, more expressive, and maintainable code.

Concept-by-Concept Deep Dive

Conditional Types and Type Inference (infer)

Conditional types in TypeScript allow you to create types that depend on a condition. They're written like T extends U ? X : Y, meaning: if type T extends type U, the result is type X; otherwise, it's type Y.

Using infer in Conditional Types

The infer keyword lets you introduce a new type variable within a conditional type. It’s often used to "pull out" or "infer" a type from a structure. For example, T extends (infer U)[] ? U : T means: if T is an array of something, extract the element type as U; otherwise, just use T.

How to Reason About It:

• Identify the shape you’re checking (T extends (infer U)[]).
• If T fits that pattern, U becomes the element type.
• If not, fallback to the default.

Common Misconceptions:

• Thinking infer can be used outside conditional types—it cannot.
• Not realizing that infer can extract types from functions, arrays, promises, etc.

Utility Types: Partial, Omit, ReturnType, keyof

TypeScript provides several built-in utility types to transform or extract information from other types.

Partial<T>, Omit<T, K>, and ReturnType<T>

• Partial<T>: Makes all properties in T optional.
• Omit<T, K>: Constructs a type by picking all properties from T except those in K.
• ReturnType<T>: Extracts the return type of a function type.

keyof and Mapped Types

The keyof operator yields a union of property names (as string or symbol types) for a given type. Mapped types, such as { [K in keyof T]: ... }, allow you to iterate over these keys and build new types.

Reasoning Steps:

• Use keyof to get keys.
• Use mapped types to transform each property.
• Use utility types to combine or exclude properties as needed.

Common Misconceptions:

• Confusing Partial and Omit.
• Forgetting that Omit removes properties, while Partial makes them optional.

Literal Types and as const

TypeScript lets you create types that represent exact values (literals), not just general types like string or number.

The as const Assertion

Using as const transforms an array or object into a "readonly" structure with exact literal types for its values, rather than widening them to string, number, etc.

Benefits:

• Preserves specific values for type safety (e.g., for discriminated unions or enums).
• Prevents mutation (readonly).

Common Misconceptions:

• Assuming as const is just syntactic sugar—it actually changes the type shape.

Type Narrowing and Type Guards

Type narrowing is the process of refining a variable's type within a block of code, typically using typeof, instanceof, or custom type guard functions.

Custom Type Guards

A function returning a type predicate (e.g., arr is string[]) lets TypeScript know how to narrow types inside control flow. For example, you can check if a variable is an array of strings, and then safely treat it as such after the check.

How to Write:

• Return a boolean.
• Use a type predicate in the return type (x is SomeType).