How to fix Cannot use expression in template literal type in TypeScript

// WRONG - conditional type directly in template
type Message<T> = \`Value is \${T extends string ? T : never}\`;
// Error: Cannot use expression in template literal type

// CORRECT - extract conditional to separate type
type ExtractString<T> = T extends string ? T : never;
type Message<T> = \`Value is \${ExtractString<T>}\`;

// Example usage:
type StringMsg = Message<"hello">;  // "Value is hello"
type NumberMsg = Message<42>;       // "Value is never"

// VALID - type parameters
type Greeting<Name extends string> = \`Hello, \${Name}\`;
type MyGreeting = Greeting<"World">;  // "Hello, World"

// VALID - union types
type Size = "small" | "medium" | "large";
type SizeClass = \`size-\${Size}\`;  // "size-small" | "size-medium" | "size-large"

// VALID - intrinsic string types
type ShoutGreeting<T extends string> = \`HELLO, \${Uppercase<T>}\`;
type Loud = ShoutGreeting<"world">;  // "HELLO, WORLD"

// VALID - combining multiple unions
type Color = "red" | "blue";
type Shade = "light" | "dark";
type ColorShade = \`\${Shade}-\${Color}\`;
// "light-red" | "light-blue" | "dark-red" | "dark-blue"

// INVALID - property access
type User = { name: string };
type UserName<T> = \`User: \${T["name"]}\`;  // Error!

// INVALID - conditional in template
type Maybe<T> = \`\${T extends string ? T : "unknown"}\`;  // Error!

// WRONG - accessing property inside template
type Event = { type: "click" | "hover" };
type EventHandler = \`on\${Capitalize<Event["type"]>}\`;  // Error!

// CORRECT - extract property first
type Event = { type: "click" | "hover" };
type EventType = Event["type"];  // "click" | "hover"
type EventHandler = \`on\${Capitalize<EventType>}\`;  // "onClick" | "onHover"

// Another example with nested objects
type Config = {
  mode: {
    value: "light" | "dark";
  };
};

// WRONG
type ThemeClass = \`theme-\${Config["mode"]["value"]}\`;  // Error!

// CORRECT
type ModeValue = Config["mode"]["value"];
type ThemeClass = \`theme-\${ModeValue}\`;  // "theme-light" | "theme-dark"

// WRONG - mapped type in template
type Keys = "name" | "age";
type GetterNames = \`get\${Capitalize<{ [K in Keys]: K }[Keys]>}\`;  // Error!

// CORRECT - map first, then template
type Keys = "name" | "age";
type Getters = {
  [K in Keys as \`get\${Capitalize<K>}\`]: () => string;
};
// Result: { getName: () => string; getAge: () => string; }

// Another approach - iterate union directly
type GetterName<K extends string> = \`get\${Capitalize<K>}\`;
type GetterNames = GetterName<Keys>;  // "getName" | "getAge"

// Available intrinsic types (since TypeScript 4.1)
type Upper = Uppercase<"hello">;      // "HELLO"
type Lower = Lowercase<"WORLD">;      // "world"
type Cap = Capitalize<"typescript">;  // "Typescript"
type Uncap = Uncapitalize<"Hello">;   // "hello"

// Combining them in template literals
type EventName = "click" | "focus" | "blur";
type HandlerName = \`on\${Capitalize<EventName>}\`;
// "onClick" | "onFocus" | "onBlur"

// Chaining transformations
type Method = "getUserData" | "setUserData";
type SnakeCase<T extends string> = Lowercase<T>;
type ApiEndpoint<T extends string> = \`/api/\${SnakeCase<T>}\`;
type Endpoint = ApiEndpoint<Method>;
// "/api/getuserdata" | "/api/setuserdata"

// Complex example - converting camelCase to kebab-case (requires helper)
type KebabCase<S extends string> = S extends \`\${infer A}\${infer B}\`
  ? B extends Uncapitalize<B>
    ? \`\${Lowercase<A>}\${KebabCase<B>}\`
    : \`\${Lowercase<A>}-\${KebabCase<B>}\`
  : S;

type CssClass = KebabCase<"backgroundColor">;  // "background-color"