Instantiating Typescript Classes using Inherited Partials

Instantiating Typescript Classes using Inherited Partials

The Partial<T> interface is an incredibly handy but often overlooked interface in Typescript. In this article, I will show you how to…

Today I will show you how to write classes in Typescript that inherit a constructor which allows it to be instantiated and have its properties assigned in a single line. This is very useful for situations where you want the JSON body of a request to be instantiated into a class without having to use Object.assign or assign the properties line by line. It will also allow us to strictly type property assignments into the classes’ constructor which Object.assign will not allow when used outside the class.

First, we need to understand what this approach is attempting to solve. Let’s say you have a User class

export class User {
    public email: string;
    public firstName: string;
    public lastName: string;
}

Now lets say we have a GET request which returns a JSON body with those values.

fetch(myUserEndpoint)
    .then(res => res.json())
    .then((userData: Partial<User>) => {
        // Do something with userData
    });

With only the code above, we only have two options for populating the data returned from the request into the new User class.

Option 1:

fetch(myUserEndpoint)
    .then(res => res.json())
    .then((userData: Partial<User>) => {
        const user = new User();
        user.firstName = userData.firstName;
        user.lastName = userData.lastName;
        user.email = userData.email;
    });

It should be obvious that the above approach has issues, first and foremost if the class User needs to have more properties added, you will have to go back to this promise to add a line for that new property. This creates long term maintainability issues.

javascript typescript programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

What is TypeScript? Why TypeScript? and Why Not TypeScript?

TypeScript extends JavaScript by adding Types. There are many great reasons to switch to TypeScript. Especially if your team uses JavaScript. There are some reasons to not use TypeScript as there are with any language or framework.

TypeScript Tutorial For JavaScript Developers - TypeScript Basics

TypeScript Tutorial For JavaScript Developers - TypeScript Basics. I will show you guys 4 example of JavaScript code, and how to convert it to TypeScript. This is a typescript beginners tutorial.

TypeScript: A Superset of JavaScript

Multi-paradigm, Functional, Generic, Imperative, Object-Oriented. In this article, I have shared the essential information about TypeScript programming language. This article contains a basic overview, brief history, features and applications of TypeScript. TypeScript is getting more popular in Full-stack development. In terms of popularity, in the last two years TypeScript pulled ahead of Ruby, Shell, and C.

Functional Programming: Using the Functor Type Class in TypeScript

Functional Programming: Exploring the Functor type class and its use cases

JavaScript Vs TypeScript

Get to know here difference between JavaScript & TypeScript, In this blog explained with pros and cons of TypeScript & JavaScript.