TypeScript中如何规避类构造函数可选参数的顺序限制？

Great question! This is a super common frustration when dealing with positional optional parameters in TypeScript. Luckily, there are a couple of clean, idiomatic ways to get around this so you can pass optional parameters in any order without needing undefined placeholders.

1. Use an Options Object (Recommended) #

The most flexible and readable approach is to refactor your constructor to accept a single configuration object instead of multiple positional parameters. This lets you explicitly name which optional properties you want to set, regardless of order.

First, define an interface to enforce the shape of your config object:

// Define a type for your constructor configuration
interface AreaConfig {
  name: string;
  description: string;
  item?: Item;
  hazard?: Hazard;
}

export default class Area {
  private name: string;
  private description: string;
  private item?: Item;
  private hazard?: Hazard;

  constructor(config: AreaConfig) {
    // Destructure or directly assign from the config object
    this.name = config.name;
    this.description = config.description;
    this.item = config.item;
    this.hazard = config.hazard;
  }
}

Now you can instantiate Area with any combination of optional parameters, in any order:

// Minimal: only required fields
new Area({ name: "test", description: "test" });

// Skip `item` and pass only `hazard`
new Area({ name: "test", description: "test", hazard: myHazardInstance });

// Pass all parameters (order doesn't matter!)
new Area({ name: "test", description: "test", hazard: myHazardInstance, item: myItemInstance });

This approach is favored in TypeScript (and JavaScript) because it makes your code self-documenting—anyone reading the instantiation code immediately knows what each value corresponds to. It also scales really well if you add more optional parameters later.

2. Constructor Overloads (For Specific Scenarios) #

If you prefer to keep positional parameters for some reason, you can use constructor overloads to define valid parameter combinations. This lets TypeScript recognize when you're passing hazard as the third parameter instead of item.

export default class Area {
  private name: string;
  private description: string;
  private item?: Item;
  private hazard?: Hazard;

  // Overload signatures: define valid parameter combinations
  constructor(name: string, description: string);
  constructor(name: string, description: string, item: Item);
  constructor(name: string, description: string, hazard: Hazard);
  constructor(name: string, description: string, item: Item, hazard: Hazard);

  // Implementation signature: handles all cases
  constructor(name: string, description: string, arg3?: Item | Hazard, arg4?: Hazard) {
    this.name = name;
    this.description = description;

    // Determine if arg3 is an Item or Hazard
    if (arg3 instanceof Item) {
      this.item = arg3;
      this.hazard = arg4;
    } else if (arg3 instanceof Hazard) {
      this.hazard = arg3;
    }
  }
}

Now you can instantiate like this without undefined:

new Area("test", "test", myHazardInstance); // Works perfectly!

Note: This approach has limitations. It relies on being able to distinguish between Item and Hazard with instanceof (which won't work if they're plain objects without a prototype chain). Also, adding more optional parameters will require adding more overload signatures, which gets messy quickly. Stick with the options object unless you have a specific reason to use overloads.

内容的提问来源于stack exchange，提问作者ccforbes