Logo
Back

How do I cast a JSON Object to a TypeScript class?

In TypeScript, there’s no built-in way to truly “cast” a plain JSON object into an instance of a class the way you might in some other languages. At runtime, TypeScript’s types vanish—they’re primarily for compile-time checks. However, there are a few common patterns to achieve something close to a “class instance” from a JSON object:

  1. Using a Manual Constructor or Factory
  2. Using Object.assign()
  3. Using a Library Like class-transformer

Below, we’ll walk through each approach with code samples and notes on best practices.

1. Manual Constructor or Factory Method

The most direct way is to create a constructor (or static factory method) that takes a plain JavaScript object (Record<string, any>) and assigns the properties correctly.

class User {
  name: string;
  age: number;

  constructor(obj: any) {
    this.name = obj.name;
    this.age = obj.age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}, and I am ${this.age} years old.`);
  }
}

// Example usage:
const jsonString = '{"name":"Alice","age":25}';
const parsed = JSON.parse(jsonString);
const user = new User(parsed);

user.greet(); // "Hello, my name is Alice, and I am 25 years old."

Pros

  • Explicit: You control exactly how data flows into your class.
  • No Dependencies: Pure TypeScript/JavaScript solution.

Cons

  • Verbosity: Repetitive if you have many classes or complex objects.
  • No Automatic Nested Transformations: For nested objects, you’d need multiple levels of assignments.

2. Using Object.assign()

A more concise option is Object.assign(). You instantiate your class and then copy properties from the plain object to the new instance.

class User {
  name: string;
  age: number;

  greet() {
    console.log(`Hello, my name is ${this.name}, and I am ${this.age} years old.`);
  }
}

const jsonString = '{"name":"Bob","age":30}';
const parsed = JSON.parse(jsonString);

// Shallow copy of all matching properties to user instance
const user = Object.assign(new User(), parsed);

user.greet(); // "Hello, my name is Bob, and I am 30 years old."

Pros

  • Short and Sweet: One line of code.
  • Retains Class Methods: user is an actual instance of User with all its methods.

Cons

  • Shallow Copy Only: Doesn’t recursively convert nested objects into class instances.
  • No Validation: If parsed is missing fields or has extra fields, nothing stops them from being assigned.

3. Using class-transformer

When you have more complex scenarios—like nested objects, arrays of objects, or a need for robust transformation logic—class-transformer is a popular library.

  1. Install:

    npm install class-transformer class-validator reflect-metadata

  2. Enable Experimental Decorators in your tsconfig.json (required by class-transformer):

    {
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    ...
  }
}

  3. Use Decorators and plainToClass():

    import "reflect-metadata";
import { plainToClass } from "class-transformer";

class Address {
  street: string;
  city: string;
}

class User {
  name: string;
  age: number;
  address: Address;
}

// Example JSON:
const userJson = {
  "name": "Carol",
  "age": 28,
  "address": {
    "street": "123 Maple St",
    "city": "Wonderland"
  }
};

const user = plainToClass(User, userJson);
console.log(user instanceof User); // true
console.log(user.address instanceof Address); // true

Pros

  • Nested Class Support: Automatically converts nested JSON objects to their respective classes.
  • Advanced Features: Decorators allow for custom transformations, ignoring fields, etc.

Cons

  • Extra Dependency: Must install and configure class-transformer.
  • Decorator Support: Requires special flags in tsconfig.json and potentially not everyone likes or can use decorators.

When to Use Which Approach

  • Manual / Factory: Great when you want complete control and minimal overhead.
  • Object.assign(): Perfect for simple, shallow transformations.
  • class-transformer: Best for larger apps or complex data structures that map neatly to class hierarchies.

Tips and Best Practices

  1. Validate Your Data: Consider using class-validator or other validation libraries to ensure the JSON input matches the expected structure.
  2. Immutable Objects: If you prefer immutable patterns, define read-only fields (e.g., readonly) and initialize them once in the constructor or transformation.
  3. Interfaces vs. Classes:
    • Interfaces: Only exist at compile-time and can’t hold behavior (methods).
    • Classes: Exist at runtime, can have methods, and can be instantiated.
      If you just need type-checking, an interface might suffice. If you want actual instances with methods, use classes.

Further Learning

If you’re working with JSON and TypeScript, chances are you’re heavily involved in modern web development, front-end frameworks, or server-side Node.js. To strengthen your skill set further, here are two courses from DesignGurus.io that might help:

Final Thoughts

In TypeScript, you can’t simply “cast” JSON to a class the same way you might in statically typed languages, because type information vanishes at runtime. Instead, you have multiple approaches—ranging from quick fixes (like Object.assign()) to sophisticated libraries (like class-transformer)—that provide varying levels of control, verbosity, and support for nested data.

Decide which method best suits your project requirements, codebase size, and need for advanced transformations. Then, you’ll be on your way to writing clean, type-safe TypeScript code that seamlessly integrates with JSON data.

CONTRIBUTOR
TechGrind