TypeScript Generics: From Basics to Advanced Patterns | DevPrep

TypeScript Generics: From Basics to Advanced Patterns | DevPrep

interface HasLength { length: number; }

function logLength<T extends HasLength>(item: T): T {
  console.log(item.length);
  return item;
}
logLength("hello"); // OK
logLength([1, 2]); // OK
logLength(42); // Error: number has no length

type IsString<T> = T extends string ? true : false;
type A = IsString<string>; // true
type B = IsString<number>; // false

// Practical: Extract promise value
type Unwrap<T> = T extends Promise<infer U> ? U : T;
type X = Unwrap<Promise<string>>; // string

type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<"click">; // "onClick"

type CSSProperty = `${string}-${string}`;
const valid: CSSProperty = "font-size"; // OK