TypeScript - Element implicitly has an 'any' type because expression of type '“storyFile”' can't be used to index type '{}'

Question

I'm trying to upgrade an old React Typescript project and still running into problems.

I resolved not having a constructor with the ! after each class level variable. Now it's complaining about the storyFile parameter. This is from the GitHub repo fyrevm-web. For the exact file see: https://github.com/ChicagoDave/fyrevm-web/blob/master/src/FyreVMWeb/FyreVMMem.ts

Any clues?

Element implicitly has an 'any' type because expression of type '"storyFile"' can't be used to index type '{}'.
  Property 'storyFile' does not exist on type '{}'.  TS7053

    25 |             this.wrapper = FyreVM.EngineWrapper.loadFromArrayBuffer(storyFile, true);
    26 |             this.ProcessCommand(this.wrapper.run());
  > 27 |             this.FyreVMData['storyFile'] = storyFile;
       |             ^
    28 |             this.FyreVMData['quetzalData'] = this.wrapper.saveGame();
    29 |             return this.FyreVMData;
    30 |         }

Answer 1

You need to declare the properties you're trying to assign on the FyreVMData type.

FyreVMData: {
  storyFile: ArrayBuffer;
  quetzalData: any; // or whatever the type `this.wrapper.saveGame()` returns
};

Answer 2

Read the error message carefully

Element implicitly has an 'any' type because expression of type '"storyFile"' can't be used to index type '{}'.
  Property 'storyFile' does not exist on type '{}'.  TS7053

Now, let's have a closer look at your code:

 // the type of this variable is {}
 FyreVMData: {};

 // ...after some lines, you have
 this.FyreVMData['storyFile'] = storyFile;
 this.FyreVMData['quetzalData'] = this.wrapper.saveGame();
  

The type of the FyreVMData is {} but you are trying to insert keys storyFile and quetzalData which are not there in type {}

To solve this, you first need to know the type of FyreVMData .

1. If the FyreVMData variable has predefined keys, then use following

FyreVMData: {
  storyFile: ArrayBuffer;
  quetzalData: any; // or what is returned by this.wrapper.saveGame();
};

2. If you want to insert dynamic keys into your FyreVMData object, then you need to define your object as follows

// the key of FyreVMData object will be string, and value will be any
// you can modify the type of key/value based on your requirement.
FyreVMData: { [key: string]: any }

// now we can add dynamic keys to our FyreVMData object as follows:

FyreVMData["name"] = "stackoverflow"
FyreVMData["value"] = {}

If you want to allow implicit any you can update your tsconfig like this

noImplicitAny: false