Tips for initializing constructor arguments using JSON during object instantiation in TypeScript

Question

Tips for initializing constructor arguments using JSON during object instantiation in TypeScript

Let's consider a scenario where we have the following class:

export class PersonInformation {
    constructor(
        public firstName: string = "",
        public lastName: string = "",
        public middleName: string = "",
    ) { }
}

Now, we're looking to set the initial values for these variables specified in the constructor by passing a JSON object during the creation of the object.

For instance:

var personInfo = new Person({
        "firstName"  : "John",
        "lastName"   : "Doe",
        "middleName" : ""
       });

typescript typescript-typings typescript2.0

Answer 1

Answer №1

If you want to approach it differently, you can create multiple constructors and then check the type of the first argument to determine how to initialize the object:

export class Person {
  public firstName;
  constructor(
      firstName: string,
      lastName: string,
      middleName: string,
  );  
  constructor(
      person: { firstName: string, lastName: string, middleName: string }
  );  
    constructor(
        arg1: string | { firstName: string, lastName: string, middleName: string } = "",
        public lastName: string = "",
        public middleName: string = "",
    ) {
      if (typeof arg1 === "string") {
        this.firstName = arg1;
      } else {
        this.firstName = arg1.firstName;
        this.lastName = arg1.lastName;
        this.middleName = arg1.middleName;
      }
    }
}

const person = new Person({
        "firstName": "",
        "lastName": "",
        "middleName": "",
 });
 const person2 = new Person("foo", "bar", "baz");

Answer 2

If you want to approach it differently, you can create multiple constructors and then check the type of the first argument to determine how to initialize the object:

export class Person {
  public firstName;
  constructor(
      firstName: string,
      lastName: string,
      middleName: string,
  );  
  constructor(
      person: { firstName: string, lastName: string, middleName: string }
  );  
    constructor(
        arg1: string | { firstName: string, lastName: string, middleName: string } = "",
        public lastName: string = "",
        public middleName: string = "",
    ) {
      if (typeof arg1 === "string") {
        this.firstName = arg1;
      } else {
        this.firstName = arg1.firstName;
        this.lastName = arg1.lastName;
        this.middleName = arg1.middleName;
      }
    }
}

const person = new Person({
        "firstName": "",
        "lastName": "",
        "middleName": "",
 });
 const person2 = new Person("foo", "bar", "baz");

Tips for initializing constructor arguments using JSON during object instantiation in TypeScript

Answer №1

Similar questions

Utilizing a library that solely enhances the functionality of the Array object

Retrieve data from TypeScript file (.ts) and use it in an HTML document

Tips for dynamically modifying style mode in Vue.js

Nested formArrays within formArrays in Angular 4

Exploring Typescript code through a practical example with reference to Uniswap's implementation

Obtain form data as an object in Vue when passed in as a slot

When TypeScript tsc is unresponsive, there is no output or feedback provided

Troubleshooting: Unable to filter reducers in Redux when using the remove

The issue is that TypeScript is indicating that the type 'string | string[]' cannot be assigned to the type 'string'

Tips for sorting multiple rows based on the primary column in MUI DataGrid ReactJS

Property finally is missing in the Response type declaration, making it unassignable to type Promise<any>

What are the Typescript object types where the keys are functions that take a single generic argument consistently?

Steps for setting up a Node.js Express application that serves a Vue.js single page application

The 'split' property is not found on the 'Int32Array' type

Using Typescript and react-redux with a Stateful Component: The parameter type 'typeof MyClass' does not match the expected component type

The type undefined cannot be assigned to the type even with a null check

Exploring nested JSON objects within an array using ngFor directive

Is there a way for React to recognize index.ts as the root file of a folder?

Exploring nested objects within an instance

How to transfer data between components in Angular 6 using a service