Converting a TypeScript array into a generic array of a specific class

Question

Converting a TypeScript array into a generic array of a specific class

I am attempting to convert a JSON source array with all string values into another array of typed objects, but I keep encountering errors. How can I correct this code properly? Thank you.

Error 1: There is an issue with converting type '({ Id: string; CompanyName: string; ...)[]' to type 'Dest'. The two types do not have sufficient overlap, which may result in an error. If this conversion was intentional, consider first converting the expression to 'unknown'.

Error 2: In '../grid-second.component.ts:12', there is a TypeScript error (TS2740) indicating that the type 'Dest' is missing essential properties present in type 'any[]': length, pop, push, concat, and more. 12 public gridData: any[] = destination;

export const source = [{
    'Id': 'ALFKI',
    'CompanyName': 'Alfreds Futterkiste',
    'DOB': '01/31/2000' // optional field
}, {
    'Id': 'ANATR',
    'CompanyName': 'Ana Bokov Emparedados y helados',
}, 

export class Dest{
    public Id: string = "";
    public CompanyName: string = "";
    public DOB?: Date
}

export const destination = <Dest>source;  // Error 1.

Within the Angular component:

public gridData: any[] = destination;  // Error 2.

https://i.sstatic.net/UuHza.png

arrays json angular typescript class

Answer 1

Answer №1

To create instances of your class, you can add a constructor and utilize the map function:

class Dest {
    public Id: string = "";
    public CompanyName: string = "";
    public DOB?: Date;

    constructor(id: string, companyName: string, dob: string | undefined) {
        this.Id = id;
        this.CompanyName = companyName;

        // TODO: not seeing Timezone in source objects.
        this.DOB = dob ? new Date(dob): undefined;
    }
}

const destination: Dest[] = source.map(x => new Dest(x.Id, x.CompanyName, x.DOB));

If you prefer to work without creating a class or using new, Interfaces or Types can be used. In any case, conversion from string DOB to Date DOB is necessary:

interface IDest {
    Id: string;
    CompanyName: string;
    DOB?: Date;
}

const destination: IDest[] = source.map(x => ({...x, DOB: x.DOB ? new Date(x.DOB) : undefined}));

Playground: click

Answer 2

To create instances of your class, you can add a constructor and utilize the map function:

class Dest {
    public Id: string = "";
    public CompanyName: string = "";
    public DOB?: Date;

    constructor(id: string, companyName: string, dob: string | undefined) {
        this.Id = id;
        this.CompanyName = companyName;

        // TODO: not seeing Timezone in source objects.
        this.DOB = dob ? new Date(dob): undefined;
    }
}

const destination: Dest[] = source.map(x => new Dest(x.Id, x.CompanyName, x.DOB));

If you prefer to work without creating a class or using new, Interfaces or Types can be used. In any case, conversion from string DOB to Date DOB is necessary:

interface IDest {
    Id: string;
    CompanyName: string;
    DOB?: Date;
}

const destination: IDest[] = source.map(x => ({...x, DOB: x.DOB ? new Date(x.DOB) : undefined}));

Playground: click

Answer 3

Answer №2

When I need to accomplish this task, my go-to method is using Object.assign(). Typically, I implement this within an RXJS Map operation while fetching data from a server.

Alternatively, you can also employ the array map function like so:

newData = data.map(item => Object.assign(new Target(), item));

In your specific case, where you're hardcoding an array, it might be more efficient to directly create the values as part of initializing the array instead of manipulating them later:

export const data = [Object.assign(new Target, {
    'Id': 'ALFKI',
    'CompanyName': 'Alfreds Futterkiste',
    'DOB': '01/31/2000' // potentially not available
}), Object.assign(new Target, {
    'Id': 'ANATR',
    'CompanyName': 'Ana Bokov Emparedados y helados',
})
]

Answer 4

When I need to accomplish this task, my go-to method is using Object.assign(). Typically, I implement this within an RXJS Map operation while fetching data from a server.

Alternatively, you can also employ the array map function like so:

newData = data.map(item => Object.assign(new Target(), item));

In your specific case, where you're hardcoding an array, it might be more efficient to directly create the values as part of initializing the array instead of manipulating them later:

export const data = [Object.assign(new Target, {
    'Id': 'ALFKI',
    'CompanyName': 'Alfreds Futterkiste',
    'DOB': '01/31/2000' // potentially not available
}), Object.assign(new Target, {
    'Id': 'ANATR',
    'CompanyName': 'Ana Bokov Emparedados y helados',
})
]

Converting a TypeScript array into a generic array of a specific class

Answer №1

Answer №2

Similar questions

Attempting to invoke a promise within a function yields an error message stating that it lacks call signatures

Encoding a JSON representation of an HTML list where all children are displayed at each parent item

typescript optimizing initial load time

bundle.js encountered a TypeError when attempting to read a property that was undefined, specifically while trying to access the PriceIndexationDataControlStandard

Error with Array type encountered in Typescript's find method

What is the best way to download a file with a specific name using Angular and TypeScript?

Jhipster entity authentication

Creating a ref in React with TypeScript to access the state of a child component

What is the process of integrating socket.io with Angular and how can we establish persistent communication using a socket service in Angular?

Using TypeScript to set an HTMLElement in a web page

Multiple subscriptions without having to recalculate the shared components

What could be causing my function to not successfully retrieve elements based on their text content?

Structuring an Angular 2 Project

pick out particular values from an array

Passing a variable from one Bash file to a JQ command in a separate Bash script

Click on an element in Angular to toggle it

Creating a new object in Typescript with properties that are a subset of another object's properties, determined by an array

Steps for launching a stackblitz project

Unable to display label in form for Angular 2/4 FormControl within a FormGroup

How can I iterate through a JavaScript object in a recursive manner?