How to fix Type 'X' is not assignable to template literal type 'Y' in TypeScript

type PixelValue = `${number}px`;

// Error: Type 'string' is not assignable to type '`${number}px`'
const width: PixelValue = `22px`;

// Fix: Use type assertion
const width: PixelValue = `22px` as PixelValue;

// Or with angle bracket syntax
const height = <PixelValue>`44px`;

type StatusMessage = `Status: ${string}`;

// Instead of this (causes error):
const message: StatusMessage = `Status: ${status}`;

// Use this if the value is static:
const message: StatusMessage = 'Status: Success';

// Or construct it differently:
function createStatusMessage(status: string): StatusMessage {
  return `Status: ${status}` as StatusMessage;
}

type PixelValue = `${number}px`;

function createPixelValue(value: number): PixelValue {
  return `${value}px` as PixelValue;
}

// Type-safe usage
const width = createPixelValue(22); // PixelValue

// With validation
function toPixelValue(input: string): PixelValue | null {
  const match = input.match(/^(\d+)px$/);
  if (!match) return null;
  return input as PixelValue;
}

type EventName = `on${Capitalize<string>}`;

// This works - literal is preserved
const event1: EventName = 'onClick';

// This fails even with as const on the variable
const eventBase = 'click' as const;
const event2: EventName = `on${eventBase}`; // Error

// Fix: Use satisfies operator (TypeScript 4.9+)
const event3 = `onClick` satisfies EventName;

// Or assertion on the full expression
const event4: EventName = 'onClick' as const;

// Complex pattern that may cause issues
type Complex = `${string}:${number}:${string}`;

// Simplify or use union types instead
type SimplePrefix = `prefix:${string}`;
type SimpleSuffix = `${string}:suffix`;
type Combined = SimplePrefix | SimpleSuffix;

// Or use a broader type
type Flexible = `${string}:${string}`;

# Check your TypeScript version
npx tsc --version

# Upgrade to latest version
npm install -D typescript@latest

# Or upgrade to specific version
npm install -D typescript@^5.0.0

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext"
  }
}