Flowtype类中通过参数调用方法报错：缺失索引器属性如何解决？

Hey there! Let's break down what's going on with your code and fix that Flow error.

First, the Root Cause #

Flow is a static type checker, and it's complaining because when you use this[command], it can't guarantee that the string stored in command actually maps to a valid method on your Commander class. By default, JavaScript classes don't have an index signature defined, so Flow has no way to validate that this[command] is a callable function.

Also, I noticed a small bug in your original code: args.slice(0) returns the entire args array, not the first element. That means command would be an array instead of a string, which would definitely break when you try to call this[command].apply(). Let's fix that first!

Solution 1: Add an Index Signature to the Class #

You can explicitly tell Flow that any string key on Commander maps to a function that accepts arbitrary arguments and returns void. Here's how:

class Commander {
  // Define an index signature for string keys
  [key: string]: (...args: any[]) => void;

  constructor() {}
  create() {}
  test() {}
  undo() {}
  redo() {}
  execute(...args): void {
    // Fix: Get the first argument as the command string
    const command: string = args[0];
    const rest: any[] = args.slice(1);
    this[command].apply(this, rest);
  }
}

This index signature satisfies Flow's type checks by clarifying what to expect when accessing properties via string keys.

Solution 2: Use a Strict Union Type (Better for Type Safety) #

If you want tighter type safety (to prevent invalid command strings from being passed), define a union type that lists all valid command names. Flow will then enforce that command can only be one of those valid method names:

// Define a union type of all valid command names
type CommandName = 'create' | 'test' | 'undo' | 'redo';

class Commander {
  constructor() {}
  create() {}
  test() {}
  undo() {}
  redo() {}
  execute(...args): void {
    const command: CommandName = args[0];
    const rest: any[] = args.slice(1);
    // Flow now knows `command` is a valid method name, so no error!
    this[command].apply(this, rest);
  }
}

This approach is better because it catches typos or invalid commands at compile time, not just runtime. For example, if someone accidentally passes 'creat' instead of 'create', Flow will throw an error immediately.

Which Should You Choose? #

• Use the index signature if you need flexibility (e.g., dynamically adding methods to the class later).
• Use the union type for stricter type safety and better developer experience, since it limits commands to only the methods you've defined.

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