升级旧React TypeScript项目时遭遇TS7053索引类型错误的技术求助

Hey there, let's figure out how to fix that TypeScript error you're seeing in your FyreVM-web project!

What's causing the error? #

The TS7053 error is telling you that TypeScript doesn't recognize the storyFile (or quetzalData) property on this.FyreVMData, because right now it's typed as an empty object {}. TypeScript enforces strict type checking here—you can't just add arbitrary properties to an object that's been declared as empty.

Solutions to fix this #

Here are a few approaches you can take, ordered from most recommended to quick-and-dirty:

1. Define a proper interface for FyreVMData (best practice)

Create a TypeScript interface that describes exactly what properties FyreVMData should have, then assign that type to your class property. This keeps type safety intact and makes your code clearer.

// First, define the interface outside your class (or inside if preferred)
interface FyreVMDataType {
  storyFile: ArrayBuffer; // Adjust this type if storyFile isn't an ArrayBuffer!
  quetzalData: ReturnType<typeof FyreVM.EngineWrapper.prototype.saveGame>; // Use the actual return type of saveGame()
}

// Then in your class declaration:
class FyreVMMem {
  // Use ! since you're handling the no-constructor initialization as you mentioned
  FyreVMData!: FyreVMDataType;

  // ... your existing class code ...

  loadStory(storyFile: ArrayBuffer) {
    this.wrapper = FyreVM.EngineWrapper.loadFromArrayBuffer(storyFile, true);
    this.ProcessCommand(this.wrapper.run());
    this.FyreVMData.storyFile = storyFile; // You can also use dot notation now!
    this.FyreVMData.quetzalData = this.wrapper.saveGame();
    return this.FyreVMData;
  }
}

If you don't know the exact return type of saveGame(), you can replace that with any temporarily, but try to find the actual type later to keep type checking working.

2. Use type assertion (quick fix)

If you need a fast solution without defining an interface, you can use a type assertion to tell TypeScript that FyreVMData can hold any properties. Note that this bypasses TypeScript's type checks, so it's less ideal long-term.

loadStory(storyFile: ArrayBuffer) {
  this.wrapper = FyreVM.EngineWrapper.loadFromArrayBuffer(storyFile, true);
  this.ProcessCommand(this.wrapper.run());
  // Assert FyreVMData is a record of string keys to any value
  (this.FyreVMData as Record<string, any>)['storyFile'] = storyFile;
  (this.FyreVMData as Record<string, any>)['quetzalData'] = this.wrapper.saveGame();
  return this.FyreVMData;
}

3. Initialize FyreVMData with optional properties

Instead of declaring it as an empty object, initialize it with optional properties so TypeScript knows those properties might exist later:

class FyreVMMem {
  // Initialize with optional properties
  FyreVMData: { storyFile?: ArrayBuffer; quetzalData?: any } = {};

  loadStory(storyFile: ArrayBuffer) {
    this.wrapper = FyreVM.EngineWrapper.loadFromArrayBuffer(storyFile, true);
    this.ProcessCommand(this.wrapper.run());
    this.FyreVMData.storyFile = storyFile;
    this.FyreVMData.quetzalData = this.wrapper.saveGame();
    return this.FyreVMData;
  }
}

A quick note on the ! operator #

You mentioned using ! to fix the no-constructor initialization issue—this works, but if you can, initializing FyreVMData in the class constructor would be more aligned with TypeScript best practices (even if it's just setting it to an empty object that matches your interface).

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