Enable automatic conversion of interfaces to JsonData

Is it possible to tweak this Json data type definition to allow json-compatible types to automatically convert to it?

type JsonValue =
    | string
    | number
    | boolean
    | null
    | { [property: string]: JsonValue }
    | JsonValue[];

Consider the following type:

interface AttachedFile {
  id: string
  name: string
  size: number
  type: string
}

Now imagine trying to assign it like this:

const q : JsonValue = someAttachedFile

Unfortunately, an error is thrown: 

     Type 'AttachedFile' is not assignable to type '{ [property: string]: JsonValue; }'. Index signature is missing in type 'AttachedFile'.

typescript

Answer №1

In programming, JsonValue is different from JSON

type JsonValue =
    | string
    | number
    | boolean
    | null
    | { [property: string]: Json }
    | Json[];

interface JSON {
    readonly [Symbol.toStringTag]: string;
}

When dealing with JavaScript, you are working with javascript objects

interface AttachedFile {
  id: string
  name: string
  size: number
  type: string
}

To convert to json, use the following code:

const q = JSON.stringify(someAttachedFile)

This will output a String!

"{                       
  id: "some id"
  name: "some name"
  size: 1
  type: "some type"
}"

JsonValue is mainly utilized by Visual Studio Code to assist in working with JSON files, not by developers directly

The typescript documentation uses JsonValue to illustrate recursive types using JSON

You can convert a JSON object to AttachedFile using the code below:

const q: AttachedFile = JSON.parse(someJsonString) // convert json string to AttachedFile

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

Learn how to hide the dropdown menu in Angular 8 by detecting clicks outside of the menu area

Is there a way to hide the custom dropdown menu whenever I click outside of it? After trying the code below, I noticed that it hides even if I click on an element inside the dropdown menu: <button class="btn btn-primary btn-sm mt-1" type="button" id= ...

angulartypescript

What is the best way to instantiate objects, arrays, and object-arrays in an Angular service class?

How can I nest an object within another object and then include it in an array of objects inside an Angular service class? I need to enable two-way binding in my form, so I must pass a variable from the service class to the HTML template. trainer.service. ...

javascripthtmlangulartypescript

The type 'LoadableComponent<unknown>' cannot be assigned to type 'ReactNode'

Currently in the process of migrating from react-router-dom v5 to v6. // Original code using react-router-dom v5 <Route exact path="/" component={router.Home} /> // Updated code for react-router-dom v6 <Route path="/*" element ...

reactjstypescriptreact-router-dom

Challenges in mimicking the search functionality of Angular's Tour of Heroes due to issues with Observers

I'm facing an issue while trying to incorporate a search bar with autocomplete suggestions in Angular 9. It worked perfectly in the tour of heroes tutorial, but when I attempt to replicate it, the searchTerms pipe seems to be inactive (the service is ...

typescriptrxjsangular9

The utilization of functions from a implemented interface results in the generation of a 'non-function' error

I recently created an interface that includes variables and a function. However, I encountered an issue when trying to utilize the implemented function for a specific class as it resulted in an 'ERROR TypeError: ...getPrice is not a function" Below ...

angulartypescriptangular8

Issue Arising from Printing a Custom Instruction in a Schema Generated Document

When dynamically adding a directive, the directive is correctly generated in the output schema. However, it seems to be missing when applied to specific fields. Here is how the directive was created: const limitDirective = new graphql.GraphQLDirective({ na ...

javascripttypescriptgraphqlgraphql-jsgraphql-tools

Update the component to display the latest information from the Bryntum grid table

In the Vue component, I have integrated a Bryntum grid table along with a bar chart. Clicking on one of the bars in the chart should update the data displayed in the Bryntum grid table. However, I've encountered difficulty in reloading the entire Bryn ...

typescriptvue.jsvue-componentbryntum-grid

Click on a link to open it in the current tab with customized headers

In my Angular project, I am attempting to open a link by clicking a button that redirects to the specified URL using the following code: window.open(MY_LINK, "_self"); However, in this scenario, I also need to include an access token in the header when t ...

javascripthtmlangularajaxtypescript

Determining the return type based on the parameter type

Here is an example of my function: const safeIdCastToNumber = (id: string | null | undefined) => isNil(id) ? id : Number(id) When calling safeIdCastToNumber, I can use an id parameter with a type union string | null | undefined, as well as one with a t ...

typescripttypesnarrowing

NestJS RabbitMQ Microservice Integration

Currently, I am attempting to establish a connection to a Rabbit MQ docker container through NestJS microservice. The setup involves running it using vagrant. Unfortunately, I keep encountering the following error: [1601171008162] ERROR (32761 on local): D ...

typescriptrabbitmqmicroservicesnestjs

A TypeScript example showcasing a nested for-of loop within several other for loops

Is it possible to generate values from an Array of objects in the following way? const arr = [ { type: "color", values: [ { name: "Color", option: "Black", }, { name: "C ...

javascripttypescript

Can a single shield protect every part of an Angular application?

I have configured my application in a way where most components are protected, but the main page "/" is still accessible to users. I am looking for a solution that would automatically redirect unauthenticated users to "/login" without having to make every ...

javascriptangulartypescriptangular-routing

Configuring the array interval in an Angular application

I'm facing an issue while attempting to use the setInterval() function to update text for the user every 3 seconds. My attempt at looping with a for loop has not been successful - I only see 'test 03' and nothing else. I'm struggling ...

javascriptangulartypescriptsetinterval

Leveraging Services in Classes Outside of Angular's Scope

I have a scenario where I am working with Angular v7.3.5 and I need to utilize a Service in a non-Angular class. Below is an example of what I'm trying to achieve: foo.model.ts import { Foo2Service } from './foo2.service'; // Definition fo ...

angulartypescriptangular-services

Creating a Bottom Sliding Menu in Ionic 2

Hey there! I'm working on something that might not fit the typical definition of a sliding menu. It's not for navigation purposes, but rather to house some data. My idea for this actually comes from Apple Maps: https://i.stack.imgur.com/hL1RU.jp ...

angulartypescriptionic2ionic3

Setting a Validator for a custom form control in Angular: A step-by-step guide

I need to apply validators to a specific control in formGroup from outside of a custom control component: <form [formGroup]="fg"> <custom-control formControlName="custom"> </custom-control> </form> this. ...

angulartypescriptangular-reactive-formsformgroups

Angular Material Datatables - Issue with Paginating Data from Firestore

Data has been retrieved from Firestore and transformed into an Observable array with the InvoiceItem type. The data loads correctly onto the datatable, but there seems to be an issue initializing the paginator with the array's length. This could poss ...

angulartypescriptasynchronousdatatablegoogle-cloud-firestore

In Angular, the process of duplicating an array by value within a foreach function is not

I have been attempting to duplicate an array within another array and make modifications as needed. this.question?.labels.forEach((element) => { element["options"] = [...this.question?.options]; // I've tried json.stringify() as wel ...

javascriptarraysangulartypescriptdeep-copy

Maintaining the order of subscribers during asynchronous operations can be achieved by implementing proper synchronization

In my Angular setup, there is a component that tracks changes in its route parameters. Whenever the params change, it extracts the ID and triggers a function to fetch the corresponding record using a promise. Once the promise resolves, the component update ...

javascriptangulartypescriptrxjs

NextImage's ImageProps is overriding src and alt properties

I've created a wrapper called IllustrationWrapper that I'm utilizing in different components. import Image, { ImageProps } from 'next/image'; const getImageUrl = (illustrationName: string) => { return `https://my-link.com/illustra ...

typescriptnext.js