Template Literal Types

type World = "world";
type Greeting = `hello ${World}`;   // "hello world"

type UserId = `user_${number}`;
const u1: UserId = "user_42";    // ✅
// const u2: UserId = "guest";   // ❌

type Coordinates = `${number}, ${number}`;

type Vertical = "top" | "bottom";
type Horizontal = "left" | "right";

type Position = `${Vertical}-${Horizontal}`;
// "top-left" | "top-right" | "bottom-left" | "bottom-right"

const pos: Position = "top-right";   // ✅

type Id = `id_${number}`;
type UppercaseId = Uppercase<Id>;    // `ID_${number}`

type EventType = "click" | "hover" | "scroll";
type HandlerName = `on${Capitalize<EventType>}`;
// "onClick" | "onHover" | "onScroll"

const handler: Record<HandlerName, () => void> = {
  onClick: () => {},
  onHover: () => {},
  onScroll: () => {},
};

// CSS-শৈলী key validation
type CssFont = `font-${"small" | "medium" | "large"}`;

// ইভেন্ট listener প্যাটার্ন
type EventNames = `on${Capitalize<EventType>}`;

function addListener(name: EventNames, fn: () => void): void {
  // ...
}

addListener("onClick", () => console.log("click"));
// addListener("onDoubleClick", fn);   // ❌ টাইপেই আটকায়