New TypeScript version does not include 'window.navigator.msSaveBlob'

user_1108098 0
Viewed 8430

I have a TypeScript project (https://github.com/jmaister/excellentexport) and it is working fine.

After adding the dependabot process, it suggests upgrading typescript:

Bump typescript from 4.3.4 to 4.4.3

However, because the library that I am maintaining has references to Internet Explorer to old Internet Explorer properties, it fails building with the new version.

Here is a sample of the build errors:

src/excellentexport.ts:143:30 - error TS2339: Property 'msSaveBlob' does not exist on type 'Navigator'.
143         if (window.navigator.msSaveBlob) {
                                 ~~~~~~~~~~
src/excellentexport.ts:145:30 - error TS2339: Property 'msSaveBlob' does not exist on type 'Navigator'.
145             window.navigator.msSaveBlob(blob, filename);
                                 ~~~~~~~~~~
src/excellentexport.ts:278:34 - error TS2339: Property 'msSaveBlob' does not exist on type 'Navigator'.

Should I remove the support for old Internet Explorer? Is the a way to continue using those IE specific properties?

typescript dependencies
2 Answers

I ran into the exact same issue recently, and the solution I arrived at was to extend the Navigator interface in the global namespace so it still includes msSaveBlob, based on how msSaveBlob is documented by TypeScript here: MSFileSaver

Here is the code I used:

declare global {
    interface Navigator {
        msSaveBlob?: (blob: any, defaultName?: string) => boolean
    }
}

if (navigator.msSaveBlob) {
    // use navigator.msSaveBlob
}
user_17105230

I declared global namespace in my appmodule.ts file since its used in multiple files like this

 declare global{
 interface Navigator{
    msSaveBlob:(blob: Blob,fileName:string) => boolean
    }
 }

And calling file looks like this**//It was throwing build errors like you mentioned,

if (navigator.msSaveBlob) {
   // IE 10+
   navigator.msSaveBlob(blob, fileName);
}
user_39827010
Related