The updated release of TypeScript no longer supports the 'window.navigator.msSaveBlob' feature

My TypeScript project (https://github.com/jmaister/excellentexport) is currently functioning well.

Recently, after integrating the dependabot process, a suggestion was made to upgrade the TypeScript version:

Bump typescript from 4.3.4 to 4.4.3

However, due to the fact that the library I am maintaining contains references to older Internet Explorer properties, upgrading to the new TypeScript version has caused build failures.

Here are some of the errors encountered during the build process:

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'.

Considering these errors, should I remove support for old versions of Internet Explorer? Is there a workaround that would allow me to continue using these IE specific properties?

typescriptdependencies

Answer №1

I encountered a similar issue recently and found a solution by extending the Navigator interface in the global namespace to include msSaveBlob. This was based on the documentation of msSaveBlob in TypeScript, which can be found here.

Below is the code snippet I utilized:

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

if (navigator.msSaveBlob) {
    // utilize navigator.msSaveBlob
}

Answer №2

In order to ensure compatibility across multiple files, I have declared the global namespace in my appmodule.ts. Here is an example of how it is implemented:

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

The code snippet for calling this file and handling potential build errors is as follows:**//I had encountered similar issues as you mentioned,

if (navigator.msSaveBlob) {
   // This section is designed for IE 10+
   navigator.msSaveBlob(blob, fileName);
}

Answer №3

  const isMsSaveBlobSupported = typeof (window.navigator as any).msSaveBlob === 'function';
      if (isMsSaveBlobSupported) {
        (window.navigator as any).msSaveBlob(blob, filename);
      }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for obtaining the form of an item and then adjusting the characteristics of each individual leaf property?

Consider this scenario: interface SomeObject { prop1: number; prop2: string; prop3: { innerProp1: number[]; innerProp2: string[]; innerProp3: { deeperProp1: string[]; deeperprop2: boolean; }, innerProp4: { [key: ...

typescript

Having trouble with the removeEventListener OnDestroy not functioning properly in Angular 6 using Javascript?

I have been experimenting with using the removeEventListener function in my Angular component. I came across a helpful discussion on this topic: Javascript removeEventListener not working ... ngOnInit() { document.addEventListener('v ...

angulartypescriptangular-routing

What's the best way to group rows in an angular mat-table?

I am working on a detailed mat-table with expanded rows and trying to group the rows based on Execution Date. While looking at this Stackblitz example where the data is grouped alphabetically, I am struggling to understand where to place the group header c ...

javascripthtmlangulartypescriptangular-material

After encountering an error, the puppeteer promptly shuts down the page

During my page testing, an error is thrown by a dependency. Although the error is not critical and does not impact my application, when testing with Puppeteer and encountering this error, it abruptly closes the tested page. How can I bypass this error to c ...

reactjstypescriptpuppeteerjest-puppeteer

Prisma Hack: excluding properties in type generation

EDIT hiding fields in the TypeScript definitions may pose a hidden danger: inaccessible fields during development with intellisense, but accidentally sending the full object with "hidden" fields in a response could potentially expose sensitive data. While ...

javascripttypescriptnext.jsprisma

The Validator in Angular Formbuilder must have a specific character requirement

Can someone help me with a regex validator pattern in Angular Formbuilder to ensure that the field CityStateZip contains at least one comma as a special character? this.editAddressForm = this.formBuilder.group({ 'CustomerName': [null, ...

angulartypescriptangular-reactive-formsangular8

Ways to properly exit a function

What is the best way to pass the apiKey from the createUser function in User.ts to Test.ts in my specific scenario? User.ts interface User { url: string, name: string, } class User{ async createUser( user: User ):Promise<void> { le ...

javascripttypescripttestingtypes

Is it possible to toggle between namespace and class using parentheses?

While working with older javascript code, I stumbled upon the following snippet: // module1.js class Class { constructor() { console.log('hello') } } const exported = { Class: Class, } module.exports = exported This code is then ...

typescriptvisual-studio-code

How do I specify a data type when using a function expression to declare a class?

const Foo: new () => unknown = class { constructor() {} bar(): string { return ‘Hello World!’; } }; const instance = new Foo(); I need to replace 'any' with 'unknown' below due to my configuration settings. new () =&g ...

typescriptfunctionclassfunction-expression

Apply a CSS class when the tab key is pressed by the user

Currently in my Angular 14 project, I am working on a feature where I need to apply "display: block" to an element once the user reaches it using the tab key. However, I am struggling with removing the "display: block" when the user tabs out of the element ...

javascriptangulartypescript

TypeScript's attempt to replicate Scala's underscore feature has been implemented, but it proves to

I've been working on a personal project for the past 2 years trying to implement Scala's underscore in TypeScript, but haven't been successful. Here is my attempted implementation and its effect. The only thing that I really care about typi ...

typescripttypescript-typings

Can we define the input and return types for functions using httpsCallables?

I have implemented a callable function in my app to update user claims. The functions are written in Typescript and I have used an interface to define the required data shape for the function. My objective is to make it easier for any developer on the tea ...

typescriptfirebasegoogle-cloud-functions

What is a simple method to convert TypeScript to JavaScript?

Is it possible to eliminate TypeScript-specific keywords from a JavaScript file without using the tsc command, while ensuring that the file remains readable by humans and maintains JSX syntax? ...

javascriptreactjstypescriptjsx

The ng-bootstrap typeahead is encountering an error: TypeError - Object(...) is not functioning correctly

Hey there! I'm trying to integrate the Angular Bootstrap typeahead component in my Angular 5 application by following the linkToTypeahead. However, I'm encountering some errors along the way. Here's what I'm seeing: ERROR TypeError: Ob ...

angulartypescripttypeaheadng-bootstraptypeerror

Typescript - Keeping a log of object keys along with their corresponding key type values

Imagine having the following scenario where you need to create an object with keys that are transformed versions of the original type's values: export type CCDTypes = { AuthorisationCaseEvent: AuthorisationCaseEvent, AuthorisationCaseField: Author ...

typescript

Issue: Unable to locate the name 'ContactField' in Ionic 2

While attempting to use Ionic2 to save a contact, an error occurs when running the app through the command line. The cordova-plugin-contacts has been properly installed. Below is the code snippet: import { Component } from '@angular/core'; impo ...

cordovaangulartypescriptcordova-pluginsionic2

How to conditionally apply a directive to the same tag in Angular 4

I am implementing angular 4 and have a directive in my template for validation purposes. However, I would like to first check if a specific condition is true before applying the directive. Currently, my code looks like this: <div *ngIf="groupCheck; els ...

angulartypescriptdirectiveangular-ng-if

Anticipating the completion of post requests

I am currently working on implementing a file upload feature in Angular. I have tackled the issue of file size restrictions by creating an API endpoint that can receive file chunks. Once all the chunks are received, another endpoint needs to be triggered ...

javascriptangulartypescript

Error with Typescript types when using Styled Components

After successfully setting up styled-components in react-native, I encountered an issue while trying to use it in a simple example with react-native-web: import * as React from 'react'; import styled from 'styled-components'; export d ...

reactjstypescriptreact-nativestyled-components

syncfusion export pdf demonstrating the toggle button's current state

Currently, I am using syncfusion for converting my page to PDF format. I have a toggle button that is default set to true. However, regardless of the actual state of the toggle button, it always appears as on (true) when exported to PDF. I attempted to s ...

typescriptsyncfusion