Property 'text' does not exist on type 'File'

Question

I have the following code to handle a user's file upload:

17  const onFileDrop =
18    (files: File[]) => {
19      files.forEach(file => file.text().then(content => console.log(content)));
20    },
21  );

VS Code is not showing any errors and I can properly access the File interface, which contains a text() function.

However, when running npm start I see the following errors:

[tsl] ERROR in {omitted}/RawCommandOutputs.tsx(19,34)
      TS2339: Property 'text' does not exist on type 'File'.


[tsl] ERROR in {omitted}/RawCommandOutputs.tsx(19,46)
      TS7006: Parameter 'content' implicitly has an 'any' type.

Answer 1

The difference in behaviour was due to different versions of Typescript being used by webpack and VS Code.

The project had a dependency on on Typescript version 3.5.2. In this version, the File interface doesn't contain a text() function. Hence, running npm start was showing the aforementioned errors.

VS Code appears to use the latest version of Typescript by default (3.9.5 in my case), which contains the updated File interface.

To make VS Code use the same version of Typescript as my project, I added
"typescript.tsdk": "./node_modules/typescript/lib" to my settings.json file. Then, I ran the Select Typescript Version command and chose the Use Workspace Version option.