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

Question

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?

Answer 1

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
}