Comment analyser un objet JSON en un objet TypeScript

Je suis en train d'essayer de convertir mon reçu Objet JSON dans un Tapuscrit de classe avec les mêmes attributs, et je ne peux pas le faire fonctionner. Ce que je fais mal?

Classe D'Employés

export class Employee{
    firstname: string;
    lastname: string;
    birthdate: Date;
    maxWorkHours: number;
    department: string;
    permissions: string;
    typeOfEmployee: string;
    note: string;
    lastUpdate: Date;
}

Employé De La Chaîne De

{
    "department": "<anystring>",
    "typeOfEmployee": "<anystring>",
    "firstname": "<anystring>",
    "lastname": "<anystring>",
    "birthdate": "<anydate>",
    "maxWorkHours": <anynumber>,
    "username": "<anystring>",
    "permissions": "<anystring>",
    "lastUpdate": "<anydate>"
    //I will add note later
}

Ma Tentative

let e: Employee = new Employee();

Object.assign(e, {
    "department": "<anystring>",
    "typeOfEmployee": "<anystring>",
    "firstname": "<anystring>",
    "lastname": "<anystring>",
    "birthdate": "<anydate>",
    "maxWorkHours": 3,
    "username": "<anystring>",
    "permissions": "<anystring>",
    "lastUpdate": "<anydate>"
});

console.log(e);

Lien vers Tapuscrit de l'aire de Jeux

source d'informationauteur moessi774

La raison que le compilateur vous permet de convertir l'objet renvoyé de JSON.parse à une classe est parce que tapuscrit est basé sur des structures de sous-typage.

Vous n'avez pas vraiment une instance d'un Employee, vous disposez d'un objet (comme vous le voyez dans la console) qui a les mêmes propriétés.

Un exemple plus simple:

class A {
    constructor(public str: string, public num: number) {}
}

function logA(a: A) {
    console.log(`A instance with str: "${ a.str }" and num: ${ a.num }`);
}

let a1 = { str: "string", num: 0, boo: true };
let a2 = new A("stirng", 0);
logA(a1); //no errors
logA(a2);

(code dans l'aire de jeux)

Il n'y a pas d'erreur parce que a1 satisfait de type A car il a toutes ses propriétés, et la logA fonction peut être appelée avec aucun des erreurs d'exécution, même si ce qu'il reçoit n'est pas une instance de A tant qu'il a les mêmes propriétés.

Qui fonctionne très bien lorsque vos classes sont de simples objets de données et n'ont pas de méthodes, mais une fois que vous mettre en place des méthodes puis les choses ont tendance à se briser:

class A {
    constructor(public str: string, public num: number) { }

    multiplyBy(x: number): number {
        return this.num * x;
    }
}

//this won't compile:
let a1 = { str: "string", num: 0, boo: true } as A; //Error: Type '{ str: string; num: number; boo: boolean; }' cannot be converted to type 'A'

//but this will:
let a2 = { str: "string", num: 0 } as A;

//and then you get a runtime error:
a2.multiplyBy(4); //Error: Uncaught TypeError: a2.multiplyBy is not a function

(code dans l'aire de jeux)

Modifier

Cela fonctionne bien:

const employeeString = '{"department":"<anystring>","typeOfEmployee":"<anystring>","firstname":"<anystring>","lastname":"<anystring>","birthdate":"<anydate>","maxWorkHours":0,"username":"<anystring>","permissions":"<anystring>","lastUpdate":"<anydate>"}';
let employee1 = JSON.parse(employeeString);
console.log(employee1);

(code dans l'aire de jeux)

Si vous essayez d'utiliser JSON.parse sur votre objet lorsqu'il n'est pas une chaîne de caractères:

let e = {
    "department": "<anystring>",
    "typeOfEmployee": "<anystring>",
    "firstname": "<anystring>",
    "lastname": "<anystring>",
    "birthdate": "<anydate>",
    "maxWorkHours": 3,
    "username": "<anystring>",
    "permissions": "<anystring>",
    "lastUpdate": "<anydate>"
}
let employee2 = JSON.parse(e);

Vous obtenez le message d'erreur, car ce n'est pas une chaîne, c'est un objet, et si vous l'avez déjà dans cette forme, alors il n'y a pas besoin d'utiliser JSON.parse.

Mais, comme je l'ai écrit, si vous allez de cette façon, alors vous n'aurez pas une instance de la classe, juste un objet qui a les mêmes propriétés que les membres de la classe.

Si vous voulez un exemple alors:

let e = new Employee();
Object.assign(e, {
    "department": "<anystring>",
    "typeOfEmployee": "<anystring>",
    "firstname": "<anystring>",
    "lastname": "<anystring>",
    "birthdate": "<anydate>",
    "maxWorkHours": 3,
    "username": "<anystring>",
    "permissions": "<anystring>",
    "lastUpdate": "<anydate>"
});

Si vous utilisez un Tapuscrit interface au lieu d'un classeles choses sont plus simples:

export interface Employee {
    typeOfEmployee_id: number;
    department_id: number;
    permissions_id: number;
    maxWorkHours: number;
    employee_id: number;
    firstname: string;
    lastname: string;
    username: string;
    birthdate: Date;
    lastUpdate: Date;
}

let jsonObj: any = JSON.parse(employeeString); //string to generic object first
let employee: Employee = <Employee>jsonObj;

Si vous voulez un classecependant, de la fonderie simple ne fonctionne pas. Par exemple:

class Foo {
    name: string;
    public pump() { }
}

let jsonObj: any = JSON.parse('{ "name":"hello" }');
let fObj: Foo = <Foo>jsonObj;
fObj.pump(); //crash, method is undefined!

Pour une classe, vous aurez à écrire un constructeur qui accepte une chaîne JSON/objet, puis parcourir les propriétés à attribuer à chaque membre manuellement, comme ceci:

class Foo {
    name: string;

    constructor(jsonStr: string) {
        let jsonObj: any = JSON.parse(jsonStr);
        for (let prop in jsonObj) {
            this[prop] = jsonObj[prop];
        }
    }
}

let fObj: Foo = new Foo(theJsonString);

Vos données JSON ont certaines propriétés que vous n'avez pas dans votre classe. Pour la cartographie, Vous pouvez faire usage simple de cartographie

export class Employe{ ////
    static parse(json: string) {
           var data = JSON.parse(json);
            return new Employe(data.typeOfEmployee_id, data.firstName.. and others);
       }

}

et aussi spécifier un constructeur dans votre

Employé

classe

3
```
let employee = <Employee>JSON.parse(employeeString);
```
Rappelez-vous: Forte typings est temps de compilation que depuis javascript ne le supporte pas.
0

Tout d'abord, vous devez être sûr que tous les attributs de ce qui vient de ce service sont nommés de la même façon dans votre classe. Ensuite, vous pouvez analyser l'objet et après que l'assigner à votre nouvelle variable, quelque chose comme ceci:
```
const parsedJSON = JSON.parse(serverResponse);
const employeeObj: Employee = parsedJSON as Employee;
```
Essayer!

Vous devez vous connecter pour publier un commentaire.