Determine the data type of a property within a JavaScript object

Question

Determine the data type of a property within a JavaScript object

I am currently working with a javascript object that looks like this:

 venue = {
    id: 0,
    name: '',
    venueimage_set: [
      {
        imageurl: '',
      },

    ]...

At a later point in my code, I need to modify the object as follows:

 this.venue.venueimage_set[+image] = this.venue.venueimage_set[+image].imageurl;

In order for an image viewer to function properly, I require only the URL of the image and not the key associated with it. Therefore, I extract the value stored within the key from the array position specified by the key, which contains the image URL.

However, when performing this operation, I encounter the following error message:

ERROR in mainroot/venuepage/venuepage.component.ts(171,25): error TS2322: Type 'string' is not assignable to type '{ imageurl: string; }'.
mainroot/venuepage/venuepage.component.ts(175,127): error TS2339: Property 'imageurl' does not exist on type 'string'.

Instead of dealing with typing issues, I simply want TypeScript to ignore them and allow me to proceed. How can I achieve this?

javascript angular typescript casting typescript-typings

Answer 1

Answer №1

Here is a safer way to achieve your goal with type safety:

function convertToVenue<T>({id, name, venueimage_set}: T) {
  return {
    id,
    name,
    venueImageSet: venueimage_set.map(el => el.imageurl)
  };
}

This function can be utilized like so when setting venue:

const venue = convertToVenue({
    id: 0,
    name: '',
    venueimage_set: [{
       imageurl: '',
    }]
});

On the other hand, here's an unsafe way of achieving the same result (not recommended):

this.venue.venueimage_set[+image] = this.venue.venueimage_set[+image].imageurl as any;

Answer 2

Here is a safer way to achieve your goal with type safety:

function convertToVenue<T>({id, name, venueimage_set}: T) {
  return {
    id,
    name,
    venueImageSet: venueimage_set.map(el => el.imageurl)
  };
}

This function can be utilized like so when setting venue:

const venue = convertToVenue({
    id: 0,
    name: '',
    venueimage_set: [{
       imageurl: '',
    }]
});

On the other hand, here's an unsafe way of achieving the same result (not recommended):

this.venue.venueimage_set[+image] = this.venue.venueimage_set[+image].imageurl as any;

Determine the data type of a property within a JavaScript object

Answer №1

Similar questions

Cross-Origin Resource Sharing (CORS): The preflight request response does not satisfy the access control check

"Looking to spice up your website with a dynamic background-image

Is selectpicker acting up?

Is the jqm flipswitch with the label on the left and the switch on the right?

Prevent mouse over scrolling for every <select> element on a webpage using JQuery

Organizing the website's files and extensions

Is it possible to asynchronously access a JSON object that has been retrieved from a local file on a global scale using the XMLHttpRequest method and

Disappearing modal in Bootstrap 5 does not eliminate the backdrop

Automatically include the date as a column heading along with name and ID

Deeply nested .map function to update state value

Ways to broaden the type signature of a Typescript comparator in order to facilitate sorting by properties nested within objects?

Parallel Execution Issue with RxJS Observable forkJoin

Creating a unique Nest.js custom decorator to extract parameters directly from the request object

What is the best way to showcase the organized values according to their attributes?

The behavior of TypeScript class inheritance differs from that of its ES6 equivalent

Implementing Google Places reviews on a website with the help of JavaScript

Error encountered in NextJS API: "TypeError: res.status is not a function"

Spinning a tetrahedron in three.js along the proper axis

How can I programmatically close the Date/Time Picker in Material UI Library?

Create custom components by wrapping npm components and exporting them as a single custom component