How to fix Rest element must be last in tuple type in TypeScript

// CORRECT: Rest element at the end
type ValidTuple1 = [string, ...number[]];           // ✓ string, then any number of numbers
type ValidTuple2 = [string, boolean?, ...number[]]; // ✓ string, optional boolean, then numbers
type ValidTuple3 = [...string[]];                   // ✓ Only rest element (zero or more strings)

// WRONG: Rest element not at the end
type InvalidTuple1 = [...string[], number];         // ✗ Error: Rest element must be last
type InvalidTuple2 = [string, ...number[], boolean]; // ✗ Error: Rest element must be last
type InvalidTuple3 = [...string[], ...number[]];    // ✗ Error: Multiple rest elements

// Also wrong: Rest element with fixed elements after it
type InvalidTuple4 = [string, ...number[], boolean, string]; // ✗ Multiple errors

// BEFORE: Error - rest element in middle
type UserData = [id: string, ...tags: string[], name: string];  // ✗ Error

// AFTER: Fixed - rest element at end
type UserData = [id: string, name: string, ...tags: string[]];  // ✓ Correct

// BEFORE: Multiple elements after rest
type Config = [...paths: string[], debug: boolean, port: number];  // ✗ Error

// AFTER: All fixed elements before rest
type Config = [debug: boolean, port: number, ...paths: string[]];  // ✓ Correct

// BEFORE: Rest element at beginning with elements after
type Problematic = [...headers: string[], body: string];  // ✗ Error

// AFTER: Move fixed element before rest
type Problematic = [body: string, ...headers: string[]];  // ✓ Correct

// Extract types to create correct ordering
type ReorderTuple<T extends any[]> = T extends [infer First, ...infer Middle, infer Last]
  ? [First, Last, ...Middle]  // Example: move last to second position
  : T;

// Example: Transform [string, ...number[], boolean] to [string, boolean, ...number[]]
type Original = [string, ...number[], boolean];  // ✗ Error
type Fixed = ReorderTuple<Original>;             // [string, boolean, ...number[]] ✓

// Utility to check if a type is a valid tuple
type IsValidTuple<T> = T extends [...any[], ...any[]] ? false : true;

// Conditional type for safe tuple creation
type SafeTuple<T, U extends any[]> = [...T[], ...U] extends [...infer R]
  ? R
  : never;

// For function parameters that need complex ordering
function createProcessor<T extends any[]>(...args: [...T, ...string[]]) {
  // args is valid because string[] rest element is at end
  return args;
}

// Usage with type inference
const result = createProcessor(1, 2, 3, "a", "b", "c");
// Type: [number, number, number, ...string[]]

// Option 1: Multiple parameters instead of complex tuple
function processItems(
  fixedParam: string,
  ...variableParams: string[]
) {
  // variableParams is already an array
  return { fixedParam, variableParams };
}

// Option 2: Object parameter for named elements
interface ProcessOptions {
  required: string;
  optional?: number;
  variable: string[];
}

function processWithObject(options: ProcessOptions) {
  const { required, optional, variable } = options;
  // Work with named properties
}

// Option 3: Builder pattern for complex configurations
class QueryBuilder {
  private fields: string[] = [];
  private filters: string[] = [];

  select(...fields: string[]): this {
    this.fields.push(...fields);
    return this;
  }

  where(...filters: string[]): this {
    this.filters.push(...filters);
    return this;
  }

  build() {
    return { fields: this.fields, filters: this.filters };
  }
}

// Clean usage
const query = new QueryBuilder()
  .select("id", "name", "email")
  .where("active = true", "created > NOW()")
  .build();

// Option 4: Curried functions for staged parameters
function createEndpoint(method: string) {
  return function(path: string) {
    return function(...handlers: Function[]) {
      return { method, path, handlers };
    };
  };
}

const getUser = createEndpoint("GET")("/users");
const endpoint = getUser(authMiddleware, getUserHandler);

// What you might want (but can't do with single tuple):
// function process(id: string, ...middle: string[], action: string)

// Solution with overloads:
function process(id: string, action: string): void;
function process(id: string, ...args: [string, ...string[]]): void;
function process(id: string, ...args: string[]): void {
  let action: string;
  let middle: string[] = [];

  if (args.length === 1) {
    // First overload: id, action
    action = args[0];
  } else {
    // Second overload: id, action, ...middle
    action = args[0];
    middle = args.slice(1);
  }

  console.log({ id, action, middle });
}

// Usage matches both patterns:
process("user123", "delete");           // id + action
process("user123", "update", "field1", "field2"); // id + action + middle

// For more complex patterns with type safety:
type ProcessArgs =
  | [id: string, action: string]
  | [id: string, action: string, ...options: string[]];

function processSafe(...args: ProcessArgs) {
  const [id, action, ...options] = args;
  console.log({ id, action, options });
}

// Both are valid:
processSafe("user123", "delete");
processSafe("user123", "update", "opt1", "opt2");

# Check your TypeScript version
npx tsc --version

# Update to latest
npm install typescript@latest --save-dev

# Or update globally
npm install -g typescript@latest

type Start = [string, number];
   type Rest = boolean[];
   type Combined = [...Start, ...Rest];  // [string, number, ...boolean[]]

type Join<T extends string[], S extends string> =
     T extends [] ? "" :
     T extends [string] ? `${T[0]}` :
     T extends [string, ...infer R] ?
       `${T[0]}${S}${Join<R, S>}` : never;

declare function foo<T extends any[]>(...args: [...T, number]): T;
   const result = foo("a", "b", 42);  // T inferred as [string, string]