Property 'showSaveFilePicker' does not exist on type 'Window & typeof globalThis'

Question

const opts = {
      suggestedName: 'data',
      types: [
        {
          description: 'NewCSV',
          accept: { 'text/csv': ['.csv'] },
        },
      ],
    };
    const handle = await (window).showSaveFilePicker(opts);

now I have the type error Property 'showSaveFilePicker' does not exist on type 'Window & typeof globalThis', providing type as any solves the issue of type error.

const handle = await (<any>window).showSaveFilePicker(opts);

But still it will show the eslint error Unsafe call of an any typed value. So the only solution I know is to disable eslint for the file. Is there any other way to avoid both the type error and eslint error ?

Warlock

Answer 1

It seems like TypeScript's type definitions for the file system access API are currently broken: https://github.com/microsoft/vscode/issues/141908

For now, try installing the package @types/wicg-file-system-access to fix the types:

# Yarn
yarn add --dev @types/wicg-file-system-access

# NPM
npm install --save-dev @types/wicg-file-system-access

You will also need to update the types field of the tsconfig.json with:

  "compilerOptions": {
    "types": [ "@types/wicg-file-system-access"]
   }

Donnettedonni

I use Angular, not ReactJS. In my case this does not help, I'm still getting "Property 'showDirectoryPicker' does not exist on type 'Window & typeof globalThis'" error – Patrickpatrilateral

This solution worked for me on Angular – Aidoneus

@Patrickpatrilateral Just realized, it worked for me in Angular, but by adding the type to compilerOptions in tsconfig.app.json, not tsconfig.json – Aidoneus

This solution worked for me in a Svelte project, as well. – Infarct

Answer 2

had to npm i @types/wicg-file-system-access in my Angular project home directory.

Novikoff