Creating Instances of a Subclass from an Object in TypeScript

Question

Creating Instances of a Subclass from an Object in TypeScript

Here is the code snippet I am working with:

class MyClass {
    name: string = "myname";
    constructor(public action: string) { }
}

let obj1: MyClass = { action: "act1" };

The code does not compile and the error displayed pertains to the last line:

Property 'name' is missing in type '{ action: string; }' but required in type 'MyClass'.

I had expected that since the 'name' property has a default value, it would not be necessary to specify it for obj1. However, this was not the case. Furthermore, it appears that the last line does not trigger the constructor, suggesting it is not simply syntactic sugar for the constructor call. Is there a way to set defaults for certain properties and avoid initializing them using this method?

javascript typescript deserialization

Answer 1

Answer №1

Consider the following scenario:

let obj1: MyClass = { action: "act1" };

In this case, you are utilizing the class MyClass as a type. This means that you are informing the compiler that the variable obj1 adheres to the MyClass type. It must have all the required fields of the class and cannot include any unknown properties.

This approach is beneficial because if the type consists of numerous properties, the intellisense can warn you about any missing properties.

However, it's important to note that MyClass is not just a type or interface; it also serves as a class. Therefore, it offers functionality such as constructor invocation and the ability to utilize extends when defining the class.

Default properties in a class do not automatically become default properties for the type. While attempting to add an initializer in a TypeScript interface or type will generate an error, assigning a default property in a class ensures that an instance will have that property initialized with the default value only during construction.

There are several ways to address this issue:

You can continue using MyClass as a type in this situation, but make sure to declare the name property in the object literal as well:

let obj1: MyClass = {action: "act1", name: "first"};

Even after doing this, you may encounter:

Object literal may only specify known properties

This occurs because the action property does not exist in MyClass. You would need to add an action property to MyClass.

Use a constructor

let obj1 = new MyClass("act1");

If possible, it is recommended to call the class constructor instead of solely using classes as types/interfaces, as shown in this example. Alternatively, consider utilizing an interface, as suggested in a comment.

In this particular scenario, invoking the constructor seems like the preferable choice.

If your main objective is to leverage compiler checks/intellisense on the variable type, consider using an interface:

interface MyCustomType {
  name: string;
  action?: string;
}

This way, you will receive a warning if you attempt to assign a variable as MyCustomType without specifying the name:

let obj: MyCustomType = {
  action: 'act1',
} // error, 'name' needs to be set as it is a required field

You can choose to include or exclude the action property since it is optional (denoted by '?').

However, adding unknown fields will result in an error:

let obj: MyCustomType = {
  name: 'name',
  value: 1, // error, unknown field
}

Answer 2

Consider the following scenario:

let obj1: MyClass = { action: "act1" };

In this case, you are utilizing the class MyClass as a type. This means that you are informing the compiler that the variable obj1 adheres to the MyClass type. It must have all the required fields of the class and cannot include any unknown properties.

This approach is beneficial because if the type consists of numerous properties, the intellisense can warn you about any missing properties.

However, it's important to note that MyClass is not just a type or interface; it also serves as a class. Therefore, it offers functionality such as constructor invocation and the ability to utilize extends when defining the class.

Default properties in a class do not automatically become default properties for the type. While attempting to add an initializer in a TypeScript interface or type will generate an error, assigning a default property in a class ensures that an instance will have that property initialized with the default value only during construction.

There are several ways to address this issue:

You can continue using MyClass as a type in this situation, but make sure to declare the name property in the object literal as well:

let obj1: MyClass = {action: "act1", name: "first"};

Even after doing this, you may encounter:

Object literal may only specify known properties

This occurs because the action property does not exist in MyClass. You would need to add an action property to MyClass.

Use a constructor

let obj1 = new MyClass("act1");

If possible, it is recommended to call the class constructor instead of solely using classes as types/interfaces, as shown in this example. Alternatively, consider utilizing an interface, as suggested in a comment.

In this particular scenario, invoking the constructor seems like the preferable choice.

If your main objective is to leverage compiler checks/intellisense on the variable type, consider using an interface:

interface MyCustomType {
  name: string;
  action?: string;
}

This way, you will receive a warning if you attempt to assign a variable as MyCustomType without specifying the name:

let obj: MyCustomType = {
  action: 'act1',
} // error, 'name' needs to be set as it is a required field

You can choose to include or exclude the action property since it is optional (denoted by '?').

However, adding unknown fields will result in an error:

let obj: MyCustomType = {
  name: 'name',
  value: 1, // error, unknown field
}

Answer 3

Answer №2

When writing your code, make sure to properly initialize instances of classes like this:

If you want to create an instance of MyClass, do it like this:

let obj1 = new MyClass("action");

By doing so, you avoid TypeScript errors and ensure that the type of variable matches the class definition.

Here is how the correct implementation looks like:

class MyClass {
    name: string = "myname";
    constructor(public action: string) { 
    }
}

let obj1 = new MyClass("action");
console.log(obj1);

/* 
   outputs:

   {
      action: "action"
      name: "myname"
   }
*/

Answer 4

When writing your code, make sure to properly initialize instances of classes like this:

If you want to create an instance of MyClass, do it like this:

let obj1 = new MyClass("action");

By doing so, you avoid TypeScript errors and ensure that the type of variable matches the class definition.

Here is how the correct implementation looks like:

class MyClass {
    name: string = "myname";
    constructor(public action: string) { 
    }
}

let obj1 = new MyClass("action");
console.log(obj1);

/* 
   outputs:

   {
      action: "action"
      name: "myname"
   }
*/

Answer 5

Answer №3

After considering the suggestions provided earlier, I have successfully devised a solution that allows me to utilize the constructor while ensuring any missing or extra values result in errors and also enables me to set default values in the object literal "initializer":

class MyClassValues {
    constructor(public name: string, public action?: string) {}
}

class MyClass extends MyClassValues {
    constructor(v: MyClassValues) {
        super(v.name, "default1");
    }
}

let c1 : MyClass = new MyClass({}); // error, missing name
let c2 : MyClass = new MyClass({x:"y"}); // error, unknown prop
let c3 : MyClass = new MyClass({name:"hello"}); // no error
console.log(c3.action); // prints "default1";

Answer 6

After considering the suggestions provided earlier, I have successfully devised a solution that allows me to utilize the constructor while ensuring any missing or extra values result in errors and also enables me to set default values in the object literal "initializer":

class MyClassValues {
    constructor(public name: string, public action?: string) {}
}

class MyClass extends MyClassValues {
    constructor(v: MyClassValues) {
        super(v.name, "default1");
    }
}

let c1 : MyClass = new MyClass({}); // error, missing name
let c2 : MyClass = new MyClass({x:"y"}); // error, unknown prop
let c3 : MyClass = new MyClass({name:"hello"}); // no error
console.log(c3.action); // prints "default1";

Creating Instances of a Subclass from an Object in TypeScript

Answer №1

Answer №2

Answer №3

Similar questions

Exploring the chosen choice in the Material Design Lite select box

Controlling the Flow of Events in JavaScript Documents

Using Javascript to dynamically add rows to a table, however they mysteriously appear and disappear soon

Service in Angular JS dispatching coordinates to controller

Having trouble updating the value in the toolbar?

Issue with ng-show directive in AngularJS

Pointer Permissions parsing does not permit creation

JavaScript: Generating Images from Text

The Twitch stream is currently live, but the user is not actively online

Combining two ng-model inputs in Angular for seamless data integration

Fixing a CSS animation glitch when using JavaScript

From jQuery to ReactJS: Migrating to a Modern

How to modify the color of a div element with jQuery?

Retrieve only the final number within the sequence using JavaScript

Retrieve the prior position using the AngularJS ui-router

Clarification: Javascript to Toggle Visibility of Divs

Extracting dynamic content from a webpage using Selenium with Javascript rendering capabilities

Prevent any screen interactions by disabling clicks, and then re-enable them either after a set amount of

Accessing the Next.js API after a hash symbol in the request URL

Issue: Utilized more hooks than in the previous render cycle