The Typescript Worksop: TypeScript and JSON

[Timothy Gallagher]

I'm a Java programmer, but I've been working on a project for a while that has TypeScript and now we need to pull data from a REST service which will be in JSON format.  In Java, we use a library to convert the JSON to Java objects, and we can program to those objects.  

But with JSON being basically JavaScript objects already (without any methods), how would you handle the JSON as TypeScript?  Can there be a direct correlation between a JSON object and a TypeScript class that provides methods?  Feel free to tell me if I'm applying Java techniques to this issue :-)

[Matt Morgan]

Hi Timothy, thanks for the question! I have a Java background myself, so I think I can see where you're coming from with this one.

The first thing to mention is that TypeScript provides compile-time type-checking. If you are receiving a RESTful payload that you want to cast to a TypeScript type, keep in mind that is only a cast and the type-checking will not occur at runtime. To fill this gap, you may like to use a validator library to make sure the payload you're deserializing meets your expectations.

What TypeScript can provide is that your code is type-safe, provided the payload you receive passes validation. Then fundamentals here are still the same as you'd find in Java. That JSON API you're talking to really sends string data that needs to be serialized. Since our runtime has JSON.parse() in it, there's no real need for a 3rd party deserialization engine. Most clients like https://github.com/axios/axios or https://github.com/node-fetch will offer a convenience method or automatic deserialization. As a TypeScript programmer, you really want to find a client library that has good support for generics - a concept you may already be familiar with. I like the way axios handles this.

import axios from 'axios'; interface Person {  name: string; } const getPerson = async (): Promise<Person> => {  const response = await axios.get<Person>('http://personapi.com');  return response.data; };

This code will successfully cast the response to the Person type, but again it won't actually type-check. We're somewhat guaranteed a json response here as axios will attempt to deseralize and will fail if the response doesn't include a JSON-parsable string. Most likely we'd want to employ try/catch to handle unexpected errors and as I mentioned before, it might be wise to use additional validators to make sure the response body we received actually matches the schema.

Hope you find that helpful, Timothy!

[Rob Spoor]

In case you're stuck with something that doesn't provide generics for you, you can do the casting yourself. For instance:

// JSON.parse's return type is 'any'
const person = JSON.parse(json) as Person;

But Matt's warning still holds. You're telling the compiler that you think the result is a Person. It won't check it for you, because TypeScript interfaces no longer exist after compiling to JavaScript. For JavaScript it's just an object.

[Timothy Gallagher]

OK - I understand the interface part now.  

What would be a good technique to make the JSON look like a "class Person" with methods such as getName() that combines the first and last name?

[Rob Spoor]

JSON responses never contain (custom) methods, so you'll probably create a class. For instance:
class Person {  constructor(readonly firstName: string, readonly lastName: string) {    // automatically creates public readonly properties with names firstName and lastName  }  getName() {    return this.firstName + " " + this.lastName;  } }

[Timothy Gallagher]

Yes, that class appears good.  Is there an automagic way to drop the JSON into that class?

[Matt Morgan]

You'd need to use a third-party lib to automatically serialize JSON to a class. There are a few out there such as class-transformer.

Or you could write your own:
class Person {  firstName: string;  lastName: string;  constructor(json: string) {    const p = JSON.parse(json);    this.firstName = p.firstName;    this.lastName = p.lastName;  }  getName() {    return this.firstName + " " + this.lastName;  } } // new Person(...some json string)

[Timothy Gallagher]

Thanks for the info.  I'll check them out.