Come posso creare facilmente un oggetto fortemente tipizzato da un oggetto anonimo in TypeScript?

Question

Ho alcuni oggetti JSON contenenti oggetti anonimi provenienti dal mio lato client. C'è un meccanismo integrato o una libreria esterna per convertire questi oggetti anonimi in oggetti TypeScript fortemente tipizzati? C'è qualcosa come AutoMapper per fare questo?

I miei oggetti sono tipi complessi, con tipi complessi come proprietà.

Answer 1

ottenere alcuni dati di esempio e metterlo in un file .ts:

var people = [ 
    { 
     "name": "bob", "height": 150, "pets": [{ "name": "spot", "species": "dog" }] 
    }, 
    { 
     "name": "jane", "height": 142, "pets": [{ "name": "lucy", "species": "cat" }] 
    } 
]; 

Run tsc --declaration yourFile.ts

Ora dovrete yourFile.d.ts:

declare var people: { 
    "name": string; 
    "height": number; 
    "pets": { 
     "name": string; 
     "species": string; 
    }[]; 
}[]; 

Sostituire declare var people: con interface Person, rimuovere il trailing [] e (facoltativamente) rimuovere le virgolette:

interface Person { 
    name: string; 
    height: number; 
    pets: { 
     name: string; 
     species: string; 
    }[]; 
} 

Answer 2

Recentemente ho creato un'implementazione AutoMapper in TypeScript/JavaScript esattamente per questo scenario. Ho inserito il codice in GitHub (AutoMapperTS). È inoltre possibile utilizzare la libreria direttamente utilizzando il pacchetto NPM automapper-ts o il pacchetto automapper-ts Bower.

La libreria è quasi completamente documentata. Inoltre, sono già disponibili molti test di unità Jasmine (la copertura del codice è superiore al 90%). Dovrebbero fornirti una spiegazione del necessario.

Spero che questa libreria soddisfi le vostre esigenze. In caso di domande e/o commenti, non esitate a contattarmi!

Felice codifica!

Answer 3

Stavo cercando un modo semplice per convertire i dati JSON da un servizio Web a un'interfaccia. Non ho trovato quello di cui ho bisogno ma ecco la mia soluzione. Ho notato che ho aggiunto un'interfaccia "Pet" e ho aggiunto un altro animale al tuo json. Doveva anche specificare l'oggetto anonimo come "qualsiasi". È possibile tagliare/incollare questo in un campo di gioco TypeScript (http://www.typescriptlang.org/play/index.html) per vedere i risultati. Spero che questo ti aiuti.

let header = document.createElement("div"); 
header.textContent = "Test"; 
document.body.appendChild(header); 

var people:any = [ 
    { 
     "name": "bob", "height": 150, "pets": [{ "name": "spot", "species": "dog" }, {"name" : "violet", "species": "shark"}] 
    }, 
    { 
     "name": "jane", "height": 142, "pets": [{ "name": "lucy", "species": "cat" }] 
    } 
]; 

interface Pet { 
    name: string; 
    species: string; 
} 
interface Person { 
    name: string; 
    height: number; 
    pets: Array<Pet> 
} 

class Foo { 
    convertToObject = (person: Person) => person; 
} 


var person = new Foo().convertToObject(people[0]); 

let div = document.createElement("div"); 
div.textContent = `hey ${person.name} I see you have ${person.pets.length} pet`; 
document.body.appendChild(div);