When defining a new Blob in TypeScript, an error is encountered stating that the argument of type '{ type: string; }' cannot be assigned to a parameter of type 'string'. This error occurs when trying to declare a new Blob

I'm attempting to send binary data in a POST request using XHR and TypeScript. When I try

new Blob (myData, {type:"text/plain"})
, I encounter the following error:

Error: Argument of type '{ type: string; }' is not assignable to parameter of type 'string'.

Any suggestions on how to solve this issue?

Answer №1

Check out this code snippet from the Mozilla Developer Network

var debugInfo = {message: "Hello, world!"};
var blobData = new Blob([JSON.stringify(debugInfo, null, 2)], {type : 'application/json'});

If you're encountering issues in the console, it might be related to the parameter "myData". The first argument for the constructor should be

An Array of ArrayBuffer, ArrayBufferView, Blob, USVString objects, or a mix of any of such objects, that will be put inside the Blob.

In case your myData is a string, consider trying this approach:

new Blob ([myData], {type:"text/plain"});

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

typescript is failing to update CSSRule with the newly assigned background-color value

I am currently working on dynamically changing the CSS style (specifically background-color) for certain text on a webpage. To achieve this, I have been attempting to modify CSSRule by accessing the desired CSSRule based on selectedText. Here is the code s ...

Using logical operators with potential undefined values in TypeScript

I've encountered an error that I'm struggling to fully understand. It seems to be related to the fact that a certain value might be undefined, requiring me to check if it exists. However, when setting up the code as shown below, errors occur. Sur ...

Automate the vertical resizing of a div element using code

Currently, I am utilizing Angular4+. I am looking to dynamically resize a div vertically, but I am unsure of how to go about it. I am uncertain about where to even begin and how to accomplish this task without resorting to using jQuery. Are there any sugg ...

When interacting with input boxes in Ionic webview for Android, the entire section will shift upward

I am currently working with Ionic version 3.10 and have included the following login HTML code: <ion-content> <ion-grid> <ion-row> <ion-col col-12> <ion-list> <ion-ca ...

Immutable.Map<K, T> used as Object in Typescript

While refactoring some TypeScript code, I encountered an issue that has me feeling a bit stuck. I'm curious about how the "as" keyword converts a Map<number, Trip> into a "Trip" object in the code snippet below. If it's not doing that, the ...

Exporting HTML to an image using Angular 5

Is there a method to export HTML as an image using Angular 5? Could you suggest a bookstore or similar resource for this task? Is it possible to achieve this using Angular 5? ...

Using type values in TypeScript

I am trying to assign interfaces as values within a config object: export interface RouterConfig { startEvents?: typeof RouterEvent[]; completeEvents?: typeof RouterEvent[]; } The intended usage is as follows: private config: RouterConfig = { star ...

When attempting to build the iOS app with Ionic, the error "Unable to access property toLowerCase of undefined" is

When attempting to build ios in Ionic3 using the command: ionic cordova build ios, I encounter the error "Cannot read property toLowerCase of undefined". Below is the log output with the --verbose flag: > ionic-app-scripts build --target cordova --pla ...

Having trouble troubleshooting React Typescript in Visual Studio Code?

I am currently facing a challenge while debugging a React Typescript application in VS Code. I am struggling to configure the launch.json file in order to enable TSX debugging. For bundling everything into a single JS file, I am utilizing webpack. Below ...

Extract Data from Pipe in Angular 4 and Retrieve it Using Behavior Subject

Welcome to my DetailService.ts: Send Detail() sendDetail(id: number) { console.log("Sending detail"); const url = this.rootUrl + 'api/Details/Select?ID=' + id; this.http.get(url).pipe( retry (3) ).toPromise() .then(( ...

"Implementing a jQuery plugin in Angular 7: A step-by-step

I recently began using a JavaScript plugin that utilizes jQuery to convert XML to JSON. You can find the plugin here. Initially, this plugin worked smoothly within my older AngularJs application. However, after upgrading to Angular7, I am facing challenge ...

Combine a pair of select statements to utilize the RxJS store within an Angular Guard

When working on an Angular Guard, I encountered a challenge where I needed to select two fields from the ngrx store. Here is the code snippet for reference: @Injectable() export class RoleGuard implements CanActivate { constructor( public router: A ...

How can you dynamically disable a radio option button using Angular rendering without relying on an ID?

Is there a way to disable the male radio button without using an id, and utilizing angular rendering2? It seems like it's not working for me. I need to make this change only in the form.ts file, without altering the HTML code. form.html <label& ...

The status of the Mat-checkbox is determined by the response from the modal dialog

In my project, I have a list of users stored in an array. Using HTML, I utilized the *ngFor directive to create a checkbox for each user element. Additionally, there is an @Input assignedAccountIds[] which contains the IDs of default selected users. The c ...

How do you update state in a React component with React-Router and RouteComponentProps in TypeScript?

Currently, I am immersing myself in learning React and React-Router with the intention of creating a simple login page that allows users to access a secret page. My implementation utilizes TypeScript. You can view a working example of my project here: htt ...

Guide on how to specify the return type for useMutation in the 'react-query' library

Here is the code snippet provided: const setFriendCode = (data: Params) => api({ data }) const [mutateSetFriendCode, state] = useMutation<Response, Params>( setFriendCode ) An issue arises with the type of parameters in the code. The compiler ...

Exploring the potential of AssemblyScript in creating immersive WebXR

I have been exploring three.js and webXR for some time now, and I wanted to incorporate it into assembly script. While I know how to make webXR work in TypeScript, I encounter an error when trying to use it in assembly script with the import statement. Her ...

The behavior of the Ionic checkbox in version 5 seems to be quite delayed

I am facing an issue with binding the checked attribute value on an ion-checkbox, as the behavior seems to be delayed. In my .ts file, I have an array variable named user_id. In my checkbox list, I am trying to populate this array based on which checkboxe ...

What is the significance of the colon before the params list in Typescript?

Consider the following code snippet: import React, { FC } from "react"; type GreetingProps = { name: string; } const Greeting:FC<GreetingProps> = ({ name }) => { // name is string! return <h1>Hello {name}</h1> }; Wha ...

Received less hooks than anticipated. This issue could be due to an inadvertent premature return statement within HeadlessUI tabs

In the process of developing an admin panel for a shop, I've decided to utilize HeadlessUI along with <Tab> instead of traditional pages. While implementing this approach, the tabs function correctly. Subsequently, I introduced Roles for adminis ...