typescript constructor assignment

Was this page helpful?

Background Reading: Classes (MDN)

TypeScript offers full support for the class keyword introduced in ES2015.

As with other JavaScript language features, TypeScript adds type annotations and other syntax to allow you to express relationships between classes and other types.

Class Members

Here’s the most basic class - an empty one:

This class isn’t very useful yet, so let’s start adding some members.

A field declaration creates a public writeable property on a class:

As with other locations, the type annotation is optional, but will be an implicit any if not specified.

Fields can also have initializers ; these will run automatically when the class is instantiated:

Just like with const , let , and var , the initializer of a class property will be used to infer its type:

--strictPropertyInitialization

The strictPropertyInitialization setting controls whether class fields need to be initialized in the constructor.

Note that the field needs to be initialized in the constructor itself . TypeScript does not analyze methods you invoke from the constructor to detect initializations, because a derived class might override those methods and fail to initialize the members.

If you intend to definitely initialize a field through means other than the constructor (for example, maybe an external library is filling in part of your class for you), you can use the definite assignment assertion operator , ! :

Fields may be prefixed with the readonly modifier. This prevents assignments to the field outside of the constructor.

Constructors

Background Reading: Constructor (MDN)

Class constructors are very similar to functions. You can add parameters with type annotations, default values, and overloads:

There are just a few differences between class constructor signatures and function signatures:

• Constructors can’t have type parameters - these belong on the outer class declaration, which we’ll learn about later
• Constructors can’t have return type annotations - the class instance type is always what’s returned

Super Calls

Just as in JavaScript, if you have a base class, you’ll need to call super(); in your constructor body before using any this. members:

Forgetting to call super is an easy mistake to make in JavaScript, but TypeScript will tell you when it’s necessary.

Background Reading: Method definitions

A function property on a class is called a method . Methods can use all the same type annotations as functions and constructors:

Other than the standard type annotations, TypeScript doesn’t add anything else new to methods.

Note that inside a method body, it is still mandatory to access fields and other methods via this. . An unqualified name in a method body will always refer to something in the enclosing scope:

Getters / Setters

Classes can also have accessors :

Note that a field-backed get/set pair with no extra logic is very rarely useful in JavaScript. It’s fine to expose public fields if you don’t need to add additional logic during the get/set operations.

TypeScript has some special inference rules for accessors:

• If get exists but no set , the property is automatically readonly
• If the type of the setter parameter is not specified, it is inferred from the return type of the getter

Since TypeScript 4.3 , it is possible to have accessors with different types for getting and setting.

Index Signatures

Classes can declare index signatures; these work the same as Index Signatures for other object types :

Because the index signature type needs to also capture the types of methods, it’s not easy to usefully use these types. Generally it’s better to store indexed data in another place instead of on the class instance itself.

Class Heritage

Like other languages with object-oriented features, classes in JavaScript can inherit from base classes.

implements Clauses

You can use an implements clause to check that a class satisfies a particular interface . An error will be issued if a class fails to correctly implement it:

Classes may also implement multiple interfaces, e.g. class C implements A, B { .

It’s important to understand that an implements clause is only a check that the class can be treated as the interface type. It doesn’t change the type of the class or its methods at all . A common source of error is to assume that an implements clause will change the class type - it doesn’t!

In this example, we perhaps expected that s ’s type would be influenced by the name: string parameter of check . It is not - implements clauses don’t change how the class body is checked or its type inferred.

Similarly, implementing an interface with an optional property doesn’t create that property:

extends Clauses

Background Reading: extends keyword (MDN)

Classes may extend from a base class. A derived class has all the properties and methods of its base class, and can also define additional members.

Overriding Methods

Background Reading: super keyword (MDN)

A derived class can also override a base class field or property. You can use the super. syntax to access base class methods. Note that because JavaScript classes are a simple lookup object, there is no notion of a “super field”.

TypeScript enforces that a derived class is always a subtype of its base class.

For example, here’s a legal way to override a method:

It’s important that a derived class follow its base class contract. Remember that it’s very common (and always legal!) to refer to a derived class instance through a base class reference:

What if Derived didn’t follow Base ’s contract?

If we compiled this code despite the error, this sample would then crash:

Type-only Field Declarations

When target >= ES2022 or useDefineForClassFields is true , class fields are initialized after the parent class constructor completes, overwriting any value set by the parent class. This can be a problem when you only want to re-declare a more accurate type for an inherited field. To handle these cases, you can write declare to indicate to TypeScript that there should be no runtime effect for this field declaration.

Initialization Order

The order that JavaScript classes initialize can be surprising in some cases. Let’s consider this code:

What happened here?

The order of class initialization, as defined by JavaScript, is:

• The base class fields are initialized
• The base class constructor runs
• The derived class fields are initialized
• The derived class constructor runs

This means that the base class constructor saw its own value for name during its own constructor, because the derived class field initializations hadn’t run yet.

Inheriting Built-in Types

Note: If you don’t plan to inherit from built-in types like Array , Error , Map , etc. or your compilation target is explicitly set to ES6 / ES2015 or above, you may skip this section

In ES2015, constructors which return an object implicitly substitute the value of this for any callers of super(...) . It is necessary for generated constructor code to capture any potential return value of super(...) and replace it with this .

As a result, subclassing Error , Array , and others may no longer work as expected. This is due to the fact that constructor functions for Error , Array , and the like use ECMAScript 6’s new.target to adjust the prototype chain; however, there is no way to ensure a value for new.target when invoking a constructor in ECMAScript 5. Other downlevel compilers generally have the same limitation by default.

For a subclass like the following:

you may find that:

• methods may be undefined on objects returned by constructing these subclasses, so calling sayHello will result in an error.
• instanceof will be broken between instances of the subclass and their instances, so (new MsgError()) instanceof MsgError will return false .

As a recommendation, you can manually adjust the prototype immediately after any super(...) calls.

However, any subclass of MsgError will have to manually set the prototype as well. For runtimes that don’t support Object.setPrototypeOf , you may instead be able to use __proto__ .

Unfortunately, these workarounds will not work on Internet Explorer 10 and prior . One can manually copy methods from the prototype onto the instance itself (i.e. MsgError.prototype onto this ), but the prototype chain itself cannot be fixed.

Member Visibility

You can use TypeScript to control whether certain methods or properties are visible to code outside the class.

The default visibility of class members is public . A public member can be accessed anywhere:

Because public is already the default visibility modifier, you don’t ever need to write it on a class member, but might choose to do so for style/readability reasons.

protected members are only visible to subclasses of the class they’re declared in.

Exposure of protected members

Derived classes need to follow their base class contracts, but may choose to expose a subtype of base class with more capabilities. This includes making protected members public :

Note that Derived was already able to freely read and write m , so this doesn’t meaningfully alter the “security” of this situation. The main thing to note here is that in the derived class, we need to be careful to repeat the protected modifier if this exposure isn’t intentional.

Cross-hierarchy protected access

Different OOP languages disagree about whether it’s legal to access a protected member through a base class reference:

Java, for example, considers this to be legal. On the other hand, C# and C++ chose that this code should be illegal.

TypeScript sides with C# and C++ here, because accessing x in Derived2 should only be legal from Derived2 ’s subclasses, and Derived1 isn’t one of them. Moreover, if accessing x through a Derived1 reference is illegal (which it certainly should be!), then accessing it through a base class reference should never improve the situation.

See also Why Can’t I Access A Protected Member From A Derived Class? which explains more of C#‘s reasoning.

private is like protected , but doesn’t allow access to the member even from subclasses:

Because private members aren’t visible to derived classes, a derived class can’t increase their visibility:

Cross-instance private access

Different OOP languages disagree about whether different instances of the same class may access each others’ private members. While languages like Java, C#, C++, Swift, and PHP allow this, Ruby does not.

TypeScript does allow cross-instance private access:

Like other aspects of TypeScript’s type system, private and protected are only enforced during type checking .

This means that JavaScript runtime constructs like in or simple property lookup can still access a private or protected member:

private also allows access using bracket notation during type checking. This makes private -declared fields potentially easier to access for things like unit tests, with the drawback that these fields are soft private and don’t strictly enforce privacy.

Unlike TypeScripts’s private , JavaScript’s private fields ( # ) remain private after compilation and do not provide the previously mentioned escape hatches like bracket notation access, making them hard private .

When compiling to ES2021 or less, TypeScript will use WeakMaps in place of # .

If you need to protect values in your class from malicious actors, you should use mechanisms that offer hard runtime privacy, such as closures, WeakMaps, or private fields. Note that these added privacy checks during runtime could affect performance.

Static Members

Background Reading: Static Members (MDN)

Classes may have static members. These members aren’t associated with a particular instance of the class. They can be accessed through the class constructor object itself:

Static members can also use the same public , protected , and private visibility modifiers:

Static members are also inherited:

Special Static Names

It’s generally not safe/possible to overwrite properties from the Function prototype. Because classes are themselves functions that can be invoked with new , certain static names can’t be used. Function properties like name , length , and call aren’t valid to define as static members:

Why No Static Classes?

TypeScript (and JavaScript) don’t have a construct called static class the same way as, for example, C# does.

Those constructs only exist because those languages force all data and functions to be inside a class; because that restriction doesn’t exist in TypeScript, there’s no need for them. A class with only a single instance is typically just represented as a normal object in JavaScript/TypeScript.

For example, we don’t need a “static class” syntax in TypeScript because a regular object (or even top-level function) will do the job just as well:

static Blocks in Classes

Static blocks allow you to write a sequence of statements with their own scope that can access private fields within the containing class. This means that we can write initialization code with all the capabilities of writing statements, no leakage of variables, and full access to our class’s internals.

Generic Classes

Classes, much like interfaces, can be generic. When a generic class is instantiated with new , its type parameters are inferred the same way as in a function call:

Classes can use generic constraints and defaults the same way as interfaces.

Type Parameters in Static Members

This code isn’t legal, and it may not be obvious why:

Remember that types are always fully erased! At runtime, there’s only one Box.defaultValue property slot. This means that setting Box<string>.defaultValue (if that were possible) would also change Box<number>.defaultValue - not good. The static members of a generic class can never refer to the class’s type parameters.

this at Runtime in Classes

Background Reading: this keyword (MDN)

It’s important to remember that TypeScript doesn’t change the runtime behavior of JavaScript, and that JavaScript is somewhat famous for having some peculiar runtime behaviors.

JavaScript’s handling of this is indeed unusual:

Long story short, by default, the value of this inside a function depends on how the function was called . In this example, because the function was called through the obj reference, its value of this was obj rather than the class instance.

This is rarely what you want to happen! TypeScript provides some ways to mitigate or prevent this kind of error.

Arrow Functions

Background Reading: Arrow functions (MDN)

If you have a function that will often be called in a way that loses its this context, it can make sense to use an arrow function property instead of a method definition:

This has some trade-offs:

• The this value is guaranteed to be correct at runtime, even for code not checked with TypeScript
• This will use more memory, because each class instance will have its own copy of each function defined this way
• You can’t use super.getName in a derived class, because there’s no entry in the prototype chain to fetch the base class method from

this parameters

In a method or function definition, an initial parameter named this has special meaning in TypeScript. These parameters are erased during compilation:

TypeScript checks that calling a function with a this parameter is done so with a correct context. Instead of using an arrow function, we can add a this parameter to method definitions to statically enforce that the method is called correctly:

This method makes the opposite trade-offs of the arrow function approach:

• JavaScript callers might still use the class method incorrectly without realizing it
• Only one function per class definition gets allocated, rather than one per class instance
• Base method definitions can still be called via super .

In classes, a special type called this refers dynamically to the type of the current class. Let’s see how this is useful:

Here, TypeScript inferred the return type of set to be this , rather than Box . Now let’s make a subclass of Box :

You can also use this in a parameter type annotation:

This is different from writing other: Box — if you have a derived class, its sameAs method will now only accept other instances of that same derived class:

this -based type guards

You can use this is Type in the return position for methods in classes and interfaces. When mixed with a type narrowing (e.g. if statements) the type of the target object would be narrowed to the specified Type .

A common use-case for a this-based type guard is to allow for lazy validation of a particular field. For example, this case removes an undefined from the value held inside box when hasValue has been verified to be true:

Parameter Properties

TypeScript offers special syntax for turning a constructor parameter into a class property with the same name and value. These are called parameter properties and are created by prefixing a constructor argument with one of the visibility modifiers public , private , protected , or readonly . The resulting field gets those modifier(s):

Class Expressions

Background Reading: Class expressions (MDN)

Class expressions are very similar to class declarations. The only real difference is that class expressions don’t need a name, though we can refer to them via whatever identifier they ended up bound to:

Constructor Signatures

JavaScript classes are instantiated with the new operator. Given the type of a class itself, the InstanceType utility type models this operation.

abstract Classes and Members

Classes, methods, and fields in TypeScript may be abstract .

An abstract method or abstract field is one that hasn’t had an implementation provided. These members must exist inside an abstract class , which cannot be directly instantiated.

The role of abstract classes is to serve as a base class for subclasses which do implement all the abstract members. When a class doesn’t have any abstract members, it is said to be concrete .

Let’s look at an example:

We can’t instantiate Base with new because it’s abstract. Instead, we need to make a derived class and implement the abstract members:

Notice that if we forget to implement the base class’s abstract members, we’ll get an error:

Abstract Construct Signatures

Sometimes you want to accept some class constructor function that produces an instance of a class which derives from some abstract class.

For example, you might want to write this code:

TypeScript is correctly telling you that you’re trying to instantiate an abstract class. After all, given the definition of greet , it’s perfectly legal to write this code, which would end up constructing an abstract class:

Instead, you want to write a function that accepts something with a construct signature:

Now TypeScript correctly tells you about which class constructor functions can be invoked - Derived can because it’s concrete, but Base cannot.

Relationships Between Classes

In most cases, classes in TypeScript are compared structurally, the same as other types.

For example, these two classes can be used in place of each other because they’re identical:

Similarly, subtype relationships between classes exist even if there’s no explicit inheritance:

This sounds straightforward, but there are a few cases that seem stranger than others.

Empty classes have no members. In a structural type system, a type with no members is generally a supertype of anything else. So if you write an empty class (don’t!), anything can be used in place of it:

Nightly Builds

How to use a nightly build of TypeScript

How JavaScript handles communicating across file boundaries.

The TypeScript docs are an open source project. Help us improve these pages by sending a Pull Request ❤

Last updated: Aug 15, 2024  

TypeScript Constructor Assignment: public and private Keywords

TypeScript includes a concise way to create and assign a class instance property from a constructor parameter.

Rather than:

One can use the private keyword instead:

The public keyword works in the same fashion, but also instructs the TypeScript compiler that it’s OK to access the property from outside the class.

Here’s a more complete example including the public keyword, as well as the result of not including a keyword:

Trending Tags

TypeScript & Class Constructor: A Complete Guide

Introduction.

TypeScript enriches JavaScript with types and classes, offering an organized approach to web development that can significantly improve code maintainability and reusability. In this guide, we delve deep into the functionality of TypeScript class constructors, unveiling their potential to streamline object-oriented programming.

Understanding TypeScript Classes

TypeScript, as a superset of JavaScript, provides a structure for building objects using classes. Classes in TypeScript are blueprints for creating objects, providing a clear specification of what each object should contain in terms of data and behaviors. A class contains variables (properties) to define data and functions (methods) to define actions. Here is a simple example of a TypeScript class:

This class defines a Vehicle with a constructor that initializes the make and model of the vehicle. The getInfo() method can then use these properties.

Constructors in TypeScript

Constructors are special methods within a class responsible for initializing new objects. Whenever a new instance is created, the constructor is called, and it’s where you can set up your object. Here’s how a basic constructor looks in TypeScript:

The constructor here takes one parameter and assigns it to the object’s ‘name’ property.

Parameter Properties in TypeScript

TypeScript offers an even more concise way to declare and initialize class members right in the constructor known as parameter properties. With parameter properties, you can get rid of the declaration of the property and the manual assignment within the constructor body:

This constructor syntax is doing the same thing as before, but with less code. The ‘public’ access modifier before ‘name’ implies that ‘name’ should be treated both as a constructor parameter and a class property.

Advanced Constructor Patterns

As we progress into more complex cases, TypeScript constructors can also include logic to handle inheritance, method overriding, and much more. For instance, here’s how subclassing and constructor inheritance look:

In the Bird class, we first call the constructor of the base class (Animal) using ‘super’, and then proceed to specify unique properties for the Bird class.

Using Access Modifiers

TypeScript introduces several keywords as access modifiers – ‘public’, ‘private’, and ‘protected’. When used in constructors, these can control the visibility and accessibility of class members:

The ‘id’ can only be accessed within the Robot class, ‘type’ can be accessed by subclasses, and ‘name’ is public and can be accessed freely.

Default Parameters and Overloading

Default parameters can be provided in constructors to set default values. TypeScript also supports method overloading, including constructors:

In the ColoredPoint class, default values for x, y, and color are provided, increasing versatility with the ability to omit arguments upon instantiation.

Putting It All Together: A Practical Example

With all these concepts in hand, let’s create a practical example involving multiple classes and constructors:

In this case, an Employee is a Person but with an additional salary property which can be modified using the raiseSalary method.

In conclusion, TypeScript’s typing system, coupled with class constructors, elevate JavaScript to a more robust level, one that simplifies the object creation process and adds a wealth of features beneficial for scalable projects. Understanding these concepts deepens your grasp on TypeScript and provides you the tools to craft more efficient, maintainable code.

Next Article: TypeScript: Object with Optional Properties

Previous Article: How to Properly Use '!' (Exclamation Mark) in TypeScript

Series: The First Steps to TypeScript

Related Articles

• TypeScript Function to Convert Date Time to Time Ago (2 examples)
• TypeScript: setInterval() and clearInterval() methods (3 examples)
• TypeScript sessionStorage: CRUD example
• Using setTimeout() method with TypeScript (practical examples)
• Working with window.navigator object in TypeScript
• TypeScript: Scrolling to a specific location
• How to resize the current window in TypeScript
• TypeScript: Checking if an element is a descendant of another element
• TypeScript: Get the first/last child node of an element
• TypeScript window.getComputerStyle() method (with examples)
• Using element.classList.toggle() method in TypeScript (with examples)
• TypeScript element.classList.remove() method (with examples)

Search tutorials, examples, and resources

• PHP programming
• Symfony & Doctrine
• Laravel & Eloquent
• Tailwind CSS
• Sequelize.js
• Mongoose.js

Exploring Constructors in TypeScript Classes

Understanding constructors in typescript.

Welcome to the OOP station ! Today, we're going to dive into constructors in TypeScript classes. Constructors play an essential role in creating and initializing objects. Picture a constructor as a blueprint — it details the components necessary for creating each object.

Just like JavaScript, if you don't provide a constructor in your TypeScript class, a default one will be supplied. Imagine this scenario as being given a blank blueprint sheet ready for you to customize!

Constructors in TypeScript

In TypeScript, constructors are defined using the keyword constructor within a class. These constructors can have parameters that initialize the properties of class instances. Think of this as specifying the components needed for a blueprint and their respective quantities. Let's exemplify this:

Note that in TypeScript, we have to declare the types of the class properties before assigning them in the constructor. Each time we create a new Car object, we need these attributes to be supplied. You'll learn more about attributes in upcoming lessons.

Creating Objects Using Constructors

Let's create our first Car object using the new keyword:

myCar is a Car object, representing a red Toyota Corolla. This object has properties defined by the constructor!

Special Properties of Constructors

Although a TypeScript class can host numerous methods, it is bound by one condition — it can only accommodate a single constructor. If we attempt to declare more than one constructor, TypeScript will raise a SyntaxError .

In instances where no explicit constructor is defined, TypeScript provides a default one: constructor() {} .

Furthermore, we can assign default values to parameters as shown below:

Lesson Summary and Practice

Fantastic! You've now learned about TypeScript constructors, how to use them, their unique properties, and how they facilitate object creation when defining classes. Remember, practice is the key to mastery . Delve further into constructors and explore their potential. Happy coding!

Enjoy this lesson? Now it's time to practice with Cosmo!

Struggling with internal tools?

Explore refine’s limitless possibilities in crafting CRUD apps, CRM solutions, HR dashboards, and more!

Essentials of TypeScript Classes

Introduction ​.

TypeScript supports all the features of JavaScript Class syntax introduced in ES2015. Basically, type annotations are applied to all members, namely: fields, constructors, methods and accessors -- and where applicable, parameters as well. TypeScript also bakes in a special syntax to class constructors called parameter properties which allows us to declare a class field from the constructor function's parameters.

A TypeScript class definition creates a type from itself and it is used to validate conformity of an instance. TypeScript allows generic classes with type parameters passed to the outer class definition. Usually, generic class type parameters are accepted as constructor parameters, but they can also be passed to fields, methods and accessors as well. A single TS class can implement multiple other interfaces , something that is done with the implements keyword.

Besides type annotations, TypeScript adds member visibility across the prototype chain with three access modifiers: public , protected and private -- a feature distinct from how ES2022 implements member privacy with # .

JavaScript this keyword leads to some unpredictability in different call site contexts. TypeScript is geared to mitigate during development some of the call site uncertainties by allocating a possible this parameter to a method's first argument.

Steps we'll cover in this post:

• Typing Fields in TypeScript
• TypeScript Classes - Constructor Functions
• TypeScript Classes - Typing Methods
• TypeScript Classes - Typing Accessors
• TypeScript Classes - Arrow Functions for Permanently Attaching this Object
• TypeScript Classes - Context Binding with this Parameter
• TypeScript Generic Classes
• TypeScript Classes - Multiple Interfaces with implements
• TypeScript Classes - Classes with Identical Shapes are Type Compliant
• TypeScript Classes - Subtyped Classes are Type Compliant

In this post, we focus on the essentials of class based programming in TypeScript using a simple User class. We begin with how type annotations are applied to different class members and their parameters.

We first consider typing class fields and delve into details of their initialization options, particularly investigating definite initialization with the bang ! operator and strict initialization with the --strictPropertyInitialization flag.

We then familiarize with how member visibility is implemented in TypeScript. Member visibility in TypeScript classes is largely related to effective usage of prototypal heritage in JavaScript. However, in this post, we don't cover inheritance in TypeScript classes: for brevity, we only consider privacy of fields for a simple uninherited class and its instances. We also touch base on static fields which acts the same as that in JavaScript.

We elaborate on what readonly fields are and how they are limited to be initialized at the top or re/assigned from a constructor function. We extensively cover typing a constructor function with examples from our uninherited User class and relate that constructor parameters are typed similar to any TS function. We end up learning how parameter properties work inside a constructor. Moving forward, we also work our way through easy-to-pick examples of typing methods and accessors, along with their parameters.

In the later half of this post, we zoom in on the way TypeScript mitigates errors related to the this object. We expound on how arrow functions and the special TS this parameter in non-arrow functions can be used for correctly setting a class method's this object and also learn about some of their caveats.

We also explore generic classes with passed in type parameters and see examples of how TypeScript facilitates class conformity to multiple interfaces with the implements keyword.

Towards the end, we briefly discuss the structural type system that TypeScript bases itself on. We observe with an example how instances of different but identically typed and subtype classes conform to a given class (or rather the type from it) and how a supertype cannot not conform to a subtype because of missing properties.

Before we begin with type annotation examples, in the next section, let's first go through how to set up the environment for using TypeScript.

Typing Class Members in TypeScript ​

A TypeScript class commonly has type annotations for its members and where applicable, their parameters. In the following sections, one by one, we cover the details of typing TypeScript class fields, constructor functions, methods, accessors and their parameters.

Let's start with typing fields.

Typing Fields in TypeScript ​

Below is an unsophisticated example with a few fields for a User class:

As you can notice, typing a class field in TypeScript is done like typing a variable. For example, as the usual story goes, the type of username is being inferred from its initializer type. With the rest of the properties, we are being explicit about the types for firstName , lastName and age! .

TypeScript Classes - Field Initialization

TypeScript class syntax adds some particular options to field initializations. A field may be initialized at declaration, or remain uninitialized, or uninitialized but aimed to be initialized definitely at some point during runtime.

For example, in the User class, username field is assigned a random string and the name fields are uninitialized. Notice the age! field with a bang!

TypeScript Classes - Definite Field Assignments

age above is uninitialized but it is accompanied by a bang ( ! ) operator which is called the definite assignment assertion operator . It is used to indicate that leaving the field uninitialized is good enough to avoid TypeScript strict property initialization (see next section) error but it is expected to be definitely assigned a value with the specified type at some point.

It is common to use definite assignments when fields are assigned to an instance by APIs from some external libraries:

TypeScript Classes - Strict Field Initialization

The --strictPropertyInitialization flag in TypeScript controls how strict field/property initialization should be. We can set the strictness of property initialization from the tsconfig.json file using the following entry to compilerOptions :

In TypeScript Playground, you can activate strict property initialization first by visiting the TS Config dropdown and then selecting strictPropertyInitialization from the Type Checking section.

Setting "strictPropertyInitialization": true necessitates all fields to either have an initializer, or they should be set in the constructor function, or they should be definitely assigned at a later point. Otherwise, TypeScript throws a 2564 error:

TypeScript Class Member / Field Visibility

TypeScript offers public , protected and private visibility options for its members. These privacy options are different from how JavaScript implements member privacy in ES2022.

Visibility in TypeScript classes is a general feature applicable to all members . We are covering it for fields, but the same principles apply to methods as well.

Fields that are not designated any privacy are by default public . We can access or set public properties from an instance:

We have to explicitly state when a field or any member should be private or protected . private visibility restricts member access and assignment to within the class. protected limits the member to be accessed and set from its subclasses as well. This means that we can't access or set private or protected fields from an instance. Attempting to do so, as shown in the series of log statements below, throws errors:

TypeScript Classes - Static Members / Fields

Just as in JavaScript, we set class members on TypeScript classes with the static keyword. Let's introduce a static field userType to our User class:

As it happens in JavaScript, static fields in TypeScript represent class properties. One thing to note is that while declaring static fields, we have to place privacy modifiers ( public here, which we technically don't need, but just to make a point) before the static keyword. Otherwise, TypeScript feels uncomfortable :

TypeScript Classes - readonly Fields

TypeScript allows fields to be readonly . As it implies, readonly fields tempt not be assigned from an instance, even with a setter. They are legal to be initialized at the top declaration and also assigned inside the constructor:

TypeScript Classes - Constructor Functions ​

As you already have noticed above, just like in regular TS functions that take parameters, class constructor parameters also get annotated with their types. Below is a more common example:

It is important to note that a constructor function in a TypeScript class does not take types as parameters. In other words, there is nothing like this:

Instead, the class declaration itself takes type parameters. Type parameters passed to a class are useful for defining generic class types , since a class ends up creating its own type. We'll explore generic classes in a later section .

TS Classes - Constructor Return Type

It should be also noted that we do not need to type the return value of a TypeScript class constructor. Because, it always returns the instance's type, which is the type created from the class.

TypeScript Class Creates a Type

It should be pretty obvious that a TypeScript class creates a type from itself:

Typescript Classes - Parameter Properties

In TypeScript, we can turn a constructor parameter into a class property using parameter properties . The way to implement parameter properties is by designating field visibility modifiers ( public , private , protected ) and/or accessor modifiers ( readonly ) to respective constructor parameters, instead of declaring field definitions that we usually perform at the top:

Above, we have a reworked User class where we no longer need to declare firstName and lastName as fields at the top. Notice closely that we also don't need to carry out respective field assignments inside the constructor body. This way, TypeScript neatly keeps our code compact.

TypeScript Classes - Typing Methods ​

Applying type annotations to class methods is easy and follow the same principles as other functions. We already have the example of fullName() method above that has an inferred return type of string . In the below code, greetUserWith() is another method that has an explicit return type of string . It is annotated a string parameter as well:

TypeScript Classes - Typing Accessors ​

In a similar vein, we can annotate types for accessor function parameters. Let's see how to do that for our protected _age field:

It is worth noting that although we can annotate a type for the return value of get accessors, TypeScript complains if we assign a type for the return value of setters. Annotating a return type for setters is not allowed, so the following is invalid:

There are a couple of quirks related to accessors typing in TypeScript. Let's consider them now.

TS Classes - Setter Parameter Type Inferred from Existing Getter Param Type

For example, the above age() setter can have its parameter type omitted. That's because when a getter exists, the setter's type parameter is inferred from the return type of getter:

TS Classes - Field With Only Getter is Set to readonly

When we have only a get ter method, and no corresponding setter, the field is automatically set to readonly :

this Object in TypeScript Classes ​

In JavaScript, the this object on which a method is called depends on the call site of the method. At runtime, the this object can be one of the root causes of unpredictable outcomes of a method call. In this section, we consider how TypeScript has a couple of options for controlling the this object predictably in order to produce more stable outcomes.

TypeScript Classes - Arrow Functions for Permanently Attaching this Object ​

As with JavaScript, when we want to permanently attach a class instance to a method, we can use the arrow syntax to define our method. For example, a redefined fullName() method with arrow syntax:

As it happens in JavaScript, the arrow syntax permanently binds the fullName method to the instance of class User , joe here. So, regardless of whether we invoke it directly on joe or extract it and call it later on, the this object remains joe .

One of the caveats of using context binding with arrow syntax is that in a derived class of User , we can't access super.fullName() as arrow functions don't have a prototype property.

TypeScript Classes - Context Binding with this Parameter ​

Another way TypeScript helps handle method context binding is that it spares the this object for the first parameter to every method or accessor. When we want to bind an instance of the class to the method, we can specify the instance as the this parameter and type it as the class itself. Like this:

Context binding with the this parameter is specifically useful when we are sure to use the method on an instance of the User class, and without taking it out of context. An added advantage is that we can also call it from a derived class using super .

The drawback, as we can see above, is that the method loses the instance as its this when it is extracted out of context.

TypeScript Generic Classes ​

As it does with other generic types, TypeScript allows us to declare generic classes by passing in type parameters at class declaration. The passed in type can then be used to annotate types for any member inside the class.

Here's a simple example of generic class with modifications to an earlier example:

It is, however, not legal to pass class type parameters to static members:

TypeScript Classes - Multiple Interfaces with implements ​

It is possible for a TypeScript class to implement more than one interface. We use the implements clause for this. Any interface that the class satisfies can be passed to implements . For example, the following interfaces are all satisfied by the User class:

TypeScript throws a 2420 error when a given interface property is not satisfied by the class. For example, for a Registerable interface, the register method is not implemented by User , so it does not satisfy the Registerable interface:

TypeScript Classes - Relationship Between Class Types ​

TypeScript has a structural type system. And in structural type systems, the shape of the class and their instances are enough to compare them.

TypeScript Classes - Classes with Identical Shapes are Type Compliant ​

If the shapes of two classes are identical, their types are compliant:

Here, we are able to type joe : an instance of Admin with User , and dona : an instance of User with Admin because the shapes of the two classes are the same.

TypeScript Classes - Subtyped Classes are Type Compliant ​

Similarly, subtyped classes that have partial but the same members with a supertype is compliant to the supertype:

In this example, joe , is still compliant to User because the Admin has all the members of User and an additional one. The opposite ( dae: Admin ) is not true though, because User has the missing member role that is present in Admin .

In this post, we have traversed a long way in our exploration of classes in TypeScript. We have covered the essentials of type annotation in TS classes. We began with how to type class fields, their initialization options and visibility modifiers. We touched on static fields, and with an example covered the concept of readonly fields that TypeScript implements. We have went through in depth how class constructor, method and accessor parameters, and their return values are annotated. We saw how readonly properties can be assigned from a constructor function, and how to implement parameter properties.

We also expounded on how arrow functions are used to bind a method permanently to an instance and discovered how the this parameter in TypeScript methods allows us to bind an instance more selectively to its methods.

Near the end, we learned about how a class should implement multiple interfaces with the implement clause. We also explored how subtypes from classes are compliant to those from supertyped classes and and not the other way around because of TypeScript's structural typing system.

Related Articles

We'll dive into the TypeScript Omit utility type with examples

This post provides an insightful comparison and contrast between TypeScript and its ECMA standardized forerunner, JavaScript.

This post is provides a guide on how to ensure type safety to dictionaries with TypeScript.

• Introduction
• Typing Class Members in TypeScript
• this Object in TypeScript Classes
• TypeScript Classes - Relationship Between Class Types

typescript constructor assignment

Answered on: Friday 08 March, 2024 / Duration: 10 min read

Programming Language: TypeScript , Popularity : 4/10

Solution 1:

In TypeScript, a constructor is a special method that is automatically called when an object is created from a class. Constructors are used to initialize the object's properties or perform any necessary setup tasks.

Here is an example of a simple class with a constructor in TypeScript:

In this example, we have a Person class with name and age properties. The constructor takes two parameters name and age and assigns them to the corresponding properties of the object being created.

When we create a new Person object using the new keyword, the constructor is automatically called with the specified arguments. We then call the displayInfo method on the person1 object to display the person's name and age.

Overall, constructors in TypeScript are used to initialize object properties and perform any necessary setup tasks when creating new instances of a class.

Solution 2:

Constructor Assignment in TypeScript

Constructor assignment, also known as constructor property initialization, is a way to directly assign values to object properties within a constructor. This provides a concise and efficient syntax for initializing class members.

Parameters:

* propertyName : The name of the property to be initialized. * propertyType : (Optional) The type of the property. * defaultValue : (Optional) The default value to assign if omitted.

In this example, the name property is initialized within the constructor using the this keyword to bind the property to the class instance.

Initialization Order:

Constructor assignments are executed in the order they appear in the constructor body. This allows properties to be initialized based on the values of other properties.

Here, the value property is initialized after the limit property, ensuring that value is always less than or equal to limit .

Default Values:

Default values can be assigned to properties within the constructor if no argument is provided.

Advantages of Constructor Assignment:

* Improved readability and maintainability compared to traditional assignment statements. * Allows for concise initialization of multiple properties in one line. * Ensures proper initialization of properties even when values are not provided by the user.

* Constructor assignment is only available in classes with a constructor. * Properties initialized in the constructor are private by default, but can be made public or protected using access modifiers. * All properties declared in the class must be initialized in the constructor or assigned a value before being accessed.

Solution 3:

Here is an example of using constructors for assignment in TypeScript:

In this example:

- The Person class has a constructor that takes a name and age , and assigns them to the class properties.

- person1 is created as a new instance of Person via the constructor, passing "John" and 30.

- person2 is declared as a Person type.

- person2 is then assigned the person1 instance. This assigns all the properties from person1 to person2 .

- We can access the name and age on person2 after assignment, showing the properties were copied over.

So in TypeScript, we can assign one instance of a class to another variable of the same type. The properties will be copied from the original instance to the new variable. The constructor runs when the original instance is created, not on the assignment.

More Articles :

Check subnets docker.

Answered on: Friday 08 March, 2024 / Duration: 5-10 min read

Programming Language : TypeScript , Popularity : 9/10

Cannot find module '@azure/msal-angular' or its corresponding type declarations.ts(2307)

React material ui ripple wrapper.

Programming Language : TypeScript , Popularity : 6/10

check schema exists postgresql

Programming Language : TypeScript , Popularity : 3/10

typescript init project

Cannot find type definition file for 'babel__generator'.

Programming Language : TypeScript , Popularity : 10/10

typescript sugar syntax

Programming Language : TypeScript , Popularity : 7/10

dart check if string is contained in list of strings

How to get absolute value of elements of list in python.

Programming Language : TypeScript , Popularity : 4/10

label points in plot in r

E_missing_named_middleware: cannot find a middleware named "auth".

Programming Language : TypeScript , Popularity : 5/10

typescript array to matrix

Getserversideprops typescript, property 'value' does not exist on type 'eventtarget', how to install gatsby with typescript, adding elements to array in perl, add dots after text css.

Programming Language : TypeScript , Popularity : 8/10

sequelize is not null

Ion-datetime min date today, how to make s3 bucet objects publicj, eslint no-unused-vars typescript, for (... in ...) statements must be filtered with an if statement (forin), typescript mongoose required functions, typescript add property if not exist, merge if it exists, how to get the value of an input in typescript, cannot find module jquery typescript ionic, how to check what have you installed globally linux, get array if value exists in multidimensional array, vscode use relative paths in auto import, set default route angular, angular date pipe.

TypeScript Topics

Popular articles.

• Typescript In Data Science: Career Prospects (Jun 24, 2024)
• Typescript In Iot Applications: Job Roles (Jun 24, 2024)
• Typescript In Cloud Computing: Career Growth (Jun 24, 2024)
• Typescript In Game Development: Job Opportunities (Jun 24, 2024)
• Typescript In Mobile App Development: Career Prospects (Jun 24, 2024)

Constructor Params

Table of Contents

1. Introduction to TypeScript Classes

2. understanding constructor parameters, 3. declaring constructor parameters, 4. types and accessibility modifiers, 5. parameter properties, 6. advanced usage, 7. common patterns and practices, 8. conclusion.

In the dynamic world of software development, TypeScript stands out by offering robust tools and features that enhance JavaScript's capabilities. One such powerful feature is the concept of classes, which introduces traditional object-oriented programming (OOP) elements into the mix. Let's explore how leveraging classes in TypeScript not only organises code more efficiently but also significantly boosts code reusability and scalability.

1.1 Brief overview of TypeScript

• TypeScript, a superset of JavaScript, compiles to plain JavaScript while providing additional typing features.
• It helps in catching errors early during the development process through its static type-checking ability.
• TypeScript is widely adopted for large-scale applications due to its advanced object-oriented programming features.

1.2 Importance of classes in TypeScript

• Classes in TypeScript offer a structured approach to building reusable components.
• They encapsulate data and functions that operate on the data, ensuring a clear modular structure for applications.
• Using classes can lead to more maintainable and error-free code, which is crucial in enterprise-level applications.

The above example illustrates a basic class in TypeScript that encapsulates properties and a method to display its details, showcasing the fundamental advantage of using classes: encapsulation and abstraction.

Constructor parameters are pivotal in TypeScript classes, serving as the primary means to initialise object instances. This section delves into the significance of constructor parameters and how they contribute to efficient and clear code organisation.

2.1 Definition of a constructor in a class

• A constructor is a special method within a class that is called when a new instance of the class is created.
• It is typically used to initialise class properties and perform any startup tasks.

2.2 Role of constructor parameters

• Constructor parameters allow passing values into a new object at the moment of its creation, ensuring that the object is ready to be used immediately.
• They provide a way to inject dependencies and set essential properties when an instance is instantiated.

This example demonstrates how constructor parameters can be effectively used to initialise a new object with specific attributes like brand and model, which are essential for the object's methods to function correctly.

Establishing constructor parameters is fundamental for defining the initial state of objects in TypeScript. This process involves not just the declaration of parameters but also determining their scope and accessibility. Let's explore how to declare constructor parameters effectively in TypeScript classes.

• The basic syntax involves including parameters directly in the constructor method, often with type annotations for type safety.
• TypeScript allows setting default values for constructor parameters, which helps in creating flexible and robust classes.
• Parameters in constructors can include access modifiers like public , private , or protected , which not only initialize properties but also set their visibility within and outside of the class.

The example provided uses constructor parameters with accessibility modifiers to automatically assign and protect class properties, highlighting how TypeScript enhances JavaScript by providing an additional layer of control over access.

Understanding the types and accessibility modifiers of constructor parameters in TypeScript classes is essential for robust and secure coding practices. This section explains how these elements are used to ensure both flexibility and encapsulation within classes.

4.1 Types of constructor parameters

• TypeScript allows developers to specify types for constructor parameters, enforcing type safety at compile time.
• This feature helps prevent common bugs related to type mismatches and improves code readability and maintenance.

4.2 Using TypeScript's accessibility modifiers

• Accessibility modifiers public , private , and protected control the visibility and accessibility of class members.
• Public members are accessible from anywhere, private members are only accessible within the class, and protected members are accessible within the class and by instances of derived classes.

This example highlights the practical use of specifying types for constructor parameters, along with accessibility modifiers, to safeguard the properties and ensure that they are accessed and modified in an appropriate manner.

Parameter properties in TypeScript streamline the creation of classes by allowing you to declare and initialise member variables directly in the constructor parameters. This efficient syntax reduces boilerplate and enhances code clarity.

• TypeScript's parameter properties let developers combine declarations and assignments in a single location, thus minimising redundancy.
• This feature is particularly useful in large classes or projects where clear and concise code is beneficial.
• By prefixing a constructor parameter with an accessibility modifier (like public , private , or protected ), TypeScript automatically creates and initialises a corresponding class member.

This example illustrates the simplicity and efficiency of parameter properties in TypeScript, reducing the need for additional lines of code while maintaining full functionality.

Exploring advanced usage of constructor parameters can unlock more sophisticated functionalities in TypeScript classes, providing flexibility and enhancing code maintainability. This section covers optional parameters, readonly properties, and shorthand for more advanced TypeScript applications.

6.1 Optional parameters in constructors

• Optional parameters allow instances to be initialised with or without certain properties, offering flexible object creation.
• They are denoted with a question mark (?) after the parameter name, indicating that the parameter can be omitted when creating an instance of the class.

6.2 Readonly parameters

• Readonly parameters are a TypeScript feature that ensures properties cannot be changed after their initial assignment during object creation.
• This enforces a higher level of security and immutability in class design.

6.3 Constructor parameter shorthand

• TypeScript allows combining parameter declaration and property initialisation in the constructor, further streamlining class definitions.
• This shorthand reduces redundancy and makes the code cleaner and more intuitive.

This example demonstrates how optional and readonly parameters can be used to create versatile and secure classes, accommodating various user needs while maintaining the integrity of critical data.

Adopting common patterns and best practices for using constructor parameters can greatly enhance the robustness and clarity of TypeScript projects. This section delves into strategic usage tips and the best practices for constructor parameters in TypeScript classes.

7.1 When to use constructor parameters

• Constructor parameters are most beneficial when you need to initialise class members directly at the time of object creation, ensuring that all necessary data is set from the beginning.
• They are especially useful in scenarios where dependency injection is needed, such as in service classes or controllers in a larger application framework.

7.2 Best practices for designing constructors in TypeScript classes

• Keep constructors simple and focused on initialisation. Avoid including complex logic or operations that could lead to errors or slow down instantiation.
• Use accessibility modifiers to protect class members and enforce encapsulation.
• Prefer readonly parameters whenever immutability is needed to prevent subsequent modification of properties post-initialisation.
• Employ parameter properties to reduce boilerplate code and enhance readability.

This example showcases how constructor parameters can be effectively utilised following best practices to ensure clarity, security, and maintainability in class design.

Embracing the full potential of constructor parameters in TypeScript not only simplifies class creation but also enhances the security and maintainability of applications. As we have explored through various sections, the effective use of constructor parameters can streamline your development process, enforce type safety, and provide flexibility in object instantiation.

We encourage developers to experiment with these techniques in their TypeScript projects. By adopting the best practices outlined in this blog, you can create more robust and efficient applications. Remember, the goal is to write code that is not only functional but also clean and easy to manage in the long term.

Whether you are building small utilities or large-scale enterprise applications, the principles of using constructor parameters effectively can make a significant difference. Leverage the power of TypeScript to bring additional safety and structure to your JavaScript applications, ensuring that your projects are not only successful but also scalable and maintainable.

• Getting started with TypeScript
• Awesome Book
• Awesome Community
• Awesome Course
• Awesome Tutorial
• Awesome YouTube
• Class Decorator
• Abstract Classes
• Basic Inheritance
• Constructors
• Monkey patch a function into an existing class
• Simple class
• Transpilation
• Configure typescript project to compile all files in typescript.
• How to use a javascript library without a type definition file
• Importing external libraries
• Integrating with Build Tools
• Modules - exporting and importing
• Publish TypeScript definition files
• Strict null checks
• tsconfig.json
• TSLint - assuring code quality and consistency
• Typescript basic examples
• TypeScript Core Types
• TypeScript with AngularJS
• TypeScript with SystemJS
• Typescript-installing-typescript-and-running-the-typescript-compiler-tsc
• Unit Testing
• User-defined Type Guards
• Using Typescript with React (JS & native)
• Using Typescript with RequireJS
• Using TypeScript with webpack
• Why and when to use TypeScript

TypeScript Classes Constructors

Fastest entity framework extensions.

In this example we use the constructor to declare a public property position and a protected property speed in the base class. These properties are called Parameter properties . They let us declare a constructor parameter and a member in one place.

One of the best things in TypeScript, is automatic assignment of constructor parameters to the relevant property.

All this code can be resumed in one single constructor:

And both of them will be transpiled from TypeScript (design time and compile time) to JavaScript with same result, but writing significantly less code:

Constructors of derived classes have to call the base class constructor with super() .

Got any TypeScript Question?

• Advertise with us
• Cookie Policy
• Privacy Policy

Get monthly updates about new articles, cheatsheets, and tricks.

• Web Application
• My Portfolio

The Most Useful GIT Commands

Get a FREE cheat sheet ( value of 8.99$ ) with the most useful GIT commands.

How To Add Multiple Constructors In TypeScript?

If you come from a C# background, you may want to add multiple constructors to a TypeScript class . Although TypeScript doesn't support multiple constructors, you can still achieve similar behavior.

In TypeScript, you can achieve a similar behavior  to adding multiple constructors by:

• Adding constructor overloads AND implementing a custom type guard.
• Using the static factory method to construct a class.
• Adding a partial class argument to the constructor .

This article explains those solutions with code examples.

Let's get to it 😎.

Here are some other  TypeScript tutorials  for you to enjoy:

• Create a global variable in TypeScript
• Create a queue in TypeScript
• How to use the yield keyword in TypeScript

Strict Property Initialization in TypeScript

TypeScript 2.7 introduced a new compiler option for strict property initialization checks in classes. If the --strictPropertyInitialization flag is enabled, the type checker verifies that each instance property declared in a class either

• has a type that includes undefined ,
• has an explicit initializer , or
• is definitely assigned to in the constructor.

The --strictPropertyInitialization option is part of the family of compiler options that is enabled automatically when the --strict flag is set. As with all the other strict compiler options, you can set --strict to true and selectively opt out of strict property initialization checks by setting --strictPropertyInitialization to false .

Note that the --strictNullChecks flag must be set (either directly or indirectly via --strict ) in order for --strictPropertyInitialization to have any effect.

Alright, let's see strict property initialization checks in action. Without the --strictPropertyInitialization flag enabled, the following code type-checks just fine, but produces a TypeError at runtime:

The reason for the runtime error is that the username property holds the value undefined because there's no assignment to that property. Therefore, the call to the toLowerCase() method fails.

If we enable --strictPropertyInitialization , the type checker raises an error:

Let's look at four different ways we can properly type our User class to make the type error go away.

# Solution #1: Allowing undefined

One way to make the type error go away is to give the username property a type that includes undefined :

Now, it's perfectly valid for the username property to hold the value undefined . Whenever we want to use the username property as a string, though, we first have to make sure that it actually holds a string and not the value undefined , e.g. using typeof :

Alternatively, we can use optional chaining (the ?. operator) to only call the toLowerCase() method if the username property holds a non-nullish value. We can combine that with nullish coalescing (the ?? operator) to provide the fallback value:

# Solution #2: Explicit Property Initializer

Another way to make the type error go away is to add an explicit initializer to the username property. This way, the property holds a string value right away and is not observably undefined :

# Solution #3: Assignment in the Constructor

Perhaps the most useful solution is to add a username parameter to the constructor, which is then assigned to the username property. This way, whenever an instance of the User class is constructed, the caller has to provide the username as an argument:

We could simplify the User class by removing the explicit assignment to the class field and adding the public modifier to the username constructor parameter:

Note that strict property initialization requires each property to be definitely assigned in all possible code paths in the constructor. The following (contrived) example is therefore not type-correct because in some cases, we leave the username property uninitialized:

# Solution #4: Definite Assignment Assertion

If a class property neither has an explicit initializer nor a type including undefined , the type checker requires that property to be initialized directly within the constructor; otherwise, strict property initialization checks will fail. This is problematic if you want to initialize a property within a helper method or have a dependency injection framework initialize it for you. In these cases, you have to add a definite assignment assertion ( ! ) to that property's declaration:

By adding a definite assignment assertion to the username property, we're telling the type checker that it can expect the username property to be initialized, even if it cannot detect that on its own. It is now our responsibility to make sure the property is definitely assigned to after the constructor returns, so we have to careful; otherwise, the username property can be observably undefined and we're back to the TypeError at runtime.

This article and 44 others are part of the TypeScript Evolution series. Have a look!

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

TypeScript, abstract classes, and constructors

TypeScript has the ability to define classes as abstract. This means they cannot be instantiated directly; only nonabstract subclasses can be. Let’s take a look at what this means when it comes to constructor usage.

Making a scratchpad

To dig into this, let’s create a scratchpad project to work with. We’re going to create a Node.js project and install TypeScript as a dependency.

We now have a package.json file set up. We need to initialize a TypeScript project as well:

This will give us a tsconfig.json file that will drive configuration of TypeScript. By default, TypeScript transpiles to an older version of JavaScript that predates classes. So we’ll update the config to target a newer version of the language that does include them:

Let’s create a TypeScript file called index.ts . The name is not significant; we just need a file to develop in.

Finally we’ll add a script to our package.json that compiles our TypeScript to JavaScript and then runs the JS with node:

Making an abstract class in TypeScript

Now we’re ready. Let’s add an abstract class with a constructor to our index.ts file:

Consider the ViewModel class above. Let’s say we’re building some kind of CRUD app; we’ll have different views. Each view will have a corresponding viewmodel , which is a subclass of the ViewModel abstract class.

The ViewModel class has a mandatory id parameter in the constructor. This is to ensure that every viewmodel has an id value. If this were a real app, id would likely be the value with which an entity was looked up in some kind of database.

Importantly, all subclasses of ViewModel should either:

• Not implement a constructor at all, leaving the base class constructor to become the default constructor of the subclass
• Implement their own constructor that invokes the ViewModel base class constructor

Taking our abstract class for a spin

Now let’s see what we can do with our abstract class.

First of all, can we instantiate our abstract class? We shouldn’t be able to do this:

Sure enough, running npm start results in the following error (which is also being reported by our editor, VS Code).

Tremendous. However, it’s worth remembering that abstract is a TypeScript concept. When we compile our TS, although it’s throwing a compilation error, it still transpiles an index.js file that looks like this:

As we can see, there’s no mention of abstract ; it’s just a straightforward class . In fact, if we directly execute the file with node index.js we can see an output of:

So the transpiled code is valid JavaScript even if the source code isn’t valid TypeScript. This all reminds us that abstract is a TypeScript construct.

Subclassing without a new constructor

Let’s now create our first subclass of ViewModel and attempt to instantiate it:

As the TypeScript compiler tells us, the second of these instantiations is legitimate because it relies on the constructor from the base class. The first is not because there is no parameterless constructor.

Subclassing with a new constructor

Having done that, let’s try subclassing and implementing a new constructor that has two parameters (to differentiate from the constructor we’re overriding):

Again, only one of the attempted instantiations is legitimate. viewModel3 is not because there is no parameterless constructor. viewModel4 is not because we have overridden the base class constructor with our new one, which has two parameters. Hence, viewModel5 is our “Goldilocks” instantiation — it’s just right!

It’s also worth noting that we’re calling super in the NewConstructorViewModel constructor. This invokes the constructor of the ViewModel base (or “super”) class. TypeScript enforces that we pass the appropriate arguments (in our case a single string ).

Over 200k developers use LogRocket to create better digital experiences

We’ve seen that TypeScript ensures correct usage of constructors when we have an abstract class. Importantly, all subclasses of abstract classes either:

• Do not implement a constructor at all, leaving the base class constructor (the abstract constructor) to become the default constructor of the subclass
• Implement their own constructor, which invokes the base (or “super”) class constructor with the correct arguments

LogRocket : Full visibility into your web and mobile apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page and mobile apps.

Try it for free .

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)
• #typescript

Hey there, want to help make our blog better?

Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

Stop guessing about your digital experience with LogRocket

Recent posts:.

Visualize JSON data with these popular tools

JSON is one of the most popular data structures in and out of web development and data handling because it’s […]

Supabase adoption guide: Overview, examples, and alternatives

Supabase offers comprehensive features that make it easy for frontend devs to build complex backends and focus on crafting exceptional UIs.

Resolving hydration mismatch errors in Next.js

Next.js is a popular React framework that uses server-side rendering (SSR) to build faster and SEO-friendly applications, resulting in a […]

Optimizing CSS time-based animations with new CSS functions

For a long time, the limited support for math functions made creating time-based CSS animations much more challenging. A traditional […]

One Reply to "TypeScript, abstract classes, and constructors"

Could we clarify the motivation for this over interfaces (or types)? I suppose having the option of running code in the constructor would be one benefit.

Leave a Reply Cancel reply

Amit Merchant Verified ($10/year for the domain)

A blog on PHP, JavaScript, and more

Constructor assignment of field variables in TypeScript

June 15, 2021 · TypeScript

When you work with classes with constructors in TypeScript, the usual way to declare the field variables is like following.

As you can tell, using this approach you will have to declare class field variables at three different places.

• In the property declaration.
• In the constructor parameters.
• In the property assignment in the constructor body.

This is pretty cumbersome if you ask me. What if I tell you there’s a better way to do this?

Enter Constructor Assignment.

Constructor Assignment

Using constructor assignment, you declare the field variables inline as the constructor parameters. We can rewrite the previous example using constructor assignment like so.

As you can tell, using this approach, you don’t have to write a lot of boilerplate code and things look tidy and concise!

» Share: Twitter , Facebook , Hacker News

Like this article? Consider leaving a

👋 Hi there! I'm Amit . I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.

More on similar topics

Auto implemented properties in TypeScript

Avoid relative import paths in TypeScript

Type annotate arguments for subset of a given type in TypeScript

Awesome Sponsors

Download my eBook

Get the latest articles delivered right to your inbox!

No spam guaranteed.

Follow me everywhere

More in "TypeScript"

Difference between Export and Export Default in TypeScript

Recently Published

Using Human-friendly dates in Git NEW

Keeping a check on queries in Laravel

Popover API 101

Request fingerprints and how to use them in Laravel

Separating Database Hosts to Optimize Read and Write Operations in Laravel

Top Categories

• Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
• Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
• OverflowAI GenAI features for Teams
• OverflowAPI Train & fine-tune LLMs
• Labs The future of collective knowledge sharing
• About the company Visit the blog

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Get early access and see previews of new features.

Constructor overload in TypeScript

Has anybody done constructor overloading in TypeScript. On page 64 of the language specification (v 0.8), there are statements describing constructor overloads, but there wasn't any sample code given.

I'm trying out a really basic class declaration right now; it looks like this,

When ran with tsc BoxSample.ts, it throws out a duplicate constructor definition -- which is obvious. Any help is appreciated.

• constructor
• overloading

• 8 as far as I can tell, it doesnt support multiple constructors yet –  Johan Commented Oct 3, 2012 at 6:09
• 2 still doesn't support multiple constructors. Just tried :( –  Asma Rahim Ali Jafri Commented Oct 11, 2019 at 6:46
• Check this answer: stackoverflow.com/a/58788876/2746447 , declare class fields only one time –  egor.xyz Commented Dec 17, 2019 at 9:37

18 Answers 18

TypeScript allows you to declare overloads but you can only have one implementation and that implementation must have a signature that is compatible with all overloads. In your example, this can easily be done with an optional parameter as in,

or two overloads with a more general constructor as in,

See in Playground

• 24 Actually, it should be possible to let the compiler generate javascript to determine at run-time which overload was taken. But this is unlikely because their philosophy seems te be to generate as little javascript as possible. –  remcoder Commented Feb 1, 2014 at 20:58
• @remcoder, that would always be true. Some kinds of type information are not available at runtime. For example, there is no concept of the interface IBox in the generated JavaScript. It could work for classes and built in types, but I suppose given the potential confusion around this it was omitted. –  Drew Noakes Commented Feb 27, 2014 at 11:27
• 3 Another very important note: while TypeScript is already not typesafe, this further invades it. Function overloading like done here loses any properties that can be checked about the function. The compiler won't care anymore and will assume the returned types to be correct. –  froginvasion Commented Aug 6, 2014 at 8:19
• 3 What makes this not type safe? We're still ensuring that the type is number with public x: number . The safety comes in that we're making sure that parameters, if passed, are of a correct type. –  nikk wong Commented Apr 19, 2016 at 5:53
• @nikkwong froginvasion's point was that using this technique TypeScript doesn't verify the correctness of the overloaded implementation with respect to the overloads. The call sites are verified but the implementation is not. Though not "typesafe", using froginvasion's implied definition, it does limit the code that can be blamed for type errors to the overloaded implementation. –  chuckj Commented Apr 20, 2016 at 23:06

Regarding constructor overloads one good alternative would be to implement the additional overloads as static factory methods . I think its more readable and easier than checking for all possible argument combinations at the constructor.

In the following example we're able to create a patient object using data from an insurance provider which stores values differently. To support yet another data structure for patient instantiation, one could simply add another static method to call the default constructor the best it can after normalizing the data provided.

You can check the output at TS Playground

Method overloading in TypeScript isn't for real , let's say, as it would require too much compiler-generated code and TS is designed to avoid that at all costs. The main use case for method overloading is probably writing declarations for libraries that have magic arguments in their API. Since all the heavy-lifting of handling different sets of possible arguments is done by you I don't see much advantage in using overloads rather than ad-hoc methods for each scenario.

• 9 you could use (data: Partial<PersonData>) if you don't always want to require first , last , and birthday to be present in data . –  Cabrera Commented Mar 16, 2019 at 17:10
• 4 Also, the access modifier of the constructor can be changed from public to private / protected , and then the only way to create an object is static factory methods. Sometimes this can be very useful. –  Oleg Zarevennyi Commented Dec 7, 2020 at 10:10
• One of the main differences is that child static methods must be subtypes of the parent static method, whereas there's no restriction on child constructors at all. –  CMCDragonkai Commented May 7, 2022 at 4:04
• Great answer! tx. Particularly useful in any situation where the constructor's arguments don't match those of the additional method you want to make. –  Steven Schkolne Commented May 17, 2022 at 22:55
• +10 for perseverance –  SHINIGAMI Commented Oct 27, 2022 at 20:41

It sounds like you want the object parameter to be optional, and also each of the properties in the object to be optional. In the example, as provided, overload syntax isn't needed. I wanted to point out some bad practices in some of the answers here. Granted, it's not the smallest possible expression of essentially writing box = { x: 0, y: 87, width: 4, height: 0 } , but this provides all the code hinting niceties you could possibly want from the class as described. This example allows you to call a function with one, some, all, or none of the parameters and still get default values.

Need to add methods? A verbose but more extendable alternative: The Box class above can work double-duty as the interface since they are identical. If you choose to modify the above class, you will need to define and reference a new interface for the incoming parameters object since the Box class no longer would look exactly like the incoming parameters. Notice where the question marks ( ?: ) denoting optional properties move in this case. Since we're setting default values within the class, they are guaranteed to be present, yet they are optional within the incoming parameters object:

Whichever way you choose to define your class, this technique offers the guardrails of type safety, yet the flexibility write any of these:

Compiled, you see how the default settings are only used if an optional value is undefined; it avoids the pitfalls of a widely used (but error-prone) fallback syntax of var = isOptional || default; by checking against void 0 , which is shorthand for undefined :

The Compiled Output

Addendum: setting default values: the wrong way, the || (or) operator.

Consider the danger of || /or operators when setting default fallback values as shown in some other answers. This code below illustrates the wrong way to set defaults. You can get unexpected results when evaluating against falsey values like 0, '', null, undefined, false, NaN:

Object.assign(this,params)

In my tests, using es6/typescript destructured object can be 15-90% faster than Object.assign . Using a destructured parameter only allows methods and properties you've assigned to the object. For example, consider this method:

If another user wasn't using TypeScript and attempted to place a parameter that didn't belong, say, they might try putting a z property

• I know this is kind of an old thread but the Ibox casting broke my mind, can you explain it to me how it works? –  Nickso Commented Apr 11, 2017 at 18:42
• 2 I've updated my answer to remove the superfluous casting that was a carryover from coding for Typescript 1.8. The casting that remains is for the empty object ( {} becomes the default object if no parameters are defined; and since {} doesn't validate as a Box, we cast it as a Box. Casting it this way allow us to create a new Box with none of its parameters defined. In your IDE, you can input my example, as well as the const box1 = new Box(); lines, and you can see how casting solves some of the error messages we see in the usage scenarios. –  Benson Commented Apr 13, 2017 at 8:02
• @Benson the BoxTest example contains errors. The TypeScript compiler correctly complains about the wrong usage of the constructor, but the assignment will still occur. The assertion fails because box.z is in fact 7 in your code, not undefined . –  Steven Liekens Commented Apr 13, 2017 at 9:58
• 1 Added a method to the Box class and then the constructor stop working (failed at compile time). Any idea? –  JeeShen Lee Commented Dec 13, 2017 at 7:45
• 1 @JeeShenLee you could either extend the Box class to a newly-named class with methods or create an interface for the parameters expected. The interface type is borrowed from the Box class since classes can act as interfaces. With your added method, the interface was expecting a method to be passed in as part of the object since the class is doing double-duty as the interface. Just copy the first five lines of the Box class and change it to an interface with a new name, such as interface BoxConfig { x?: number ...} and then change the line constructor(obj: BoxConfig = {} as BoxConfig) { –  Benson Commented Jan 6, 2018 at 12:34

Note that you can also work around the lack of overloading at the implementation level through default parameters in TypeScript, e.g.:

Edit: As of Dec 5 '16, see Benson's answer for a more elaborate solution that allows more flexibility.

• What about interface IBox extends Box ? –  Ahmad Commented Feb 25, 2020 at 13:25

Update 2 (28 September 2020): This language is constantly evolving, and so if you can use Partial (introduced in v2.1) then this is now my preferred way to achieve this.

Update (8 June 2017): guyarad and snolflake make valid points in their comments below to my answer. I would recommend readers look at the answers by Benson , Joe and snolflake who have better answers than mine.*

Original Answer (27 January 2014)

Another example of how to achieve constructor overloading:

Source: http://mimosite.com/blog/post/2013/04/08/Overloading-in-TypeScript

• 24 This isn't a constructive comment - but, wow, this is ugly. Kind of misses the point of type safety in TypeScript... –  Guy Commented Mar 1, 2015 at 10:04
• 2 Is that a constructor overload?! No thanks! I'd rather implement a static factory method for that class, really ugly indeed. –  cvsguimaraes Commented Jul 31, 2016 at 20:32
• 2 I suppose today we could have dateOrYear: Date | number, –  Pascal Ganaye Commented Apr 1, 2017 at 17:18
• I think it's a very good way to have something like the object initializer in c#. Ok, you open the door having a problem in some situations but it's not all objects that should have guards to prevent bad initialization. POCO or DTO as example are good candidates for this implementation. I would also put the parameter nullable to allow an empty constructor like this: args?: Partial<T> –  Samuel Commented Jun 23, 2021 at 10:36

I know this is an old question, but new in 1.4 is union types; use these for all function overloads (including constructors). Example:

• Wouldn't the name field also be of type string | number instead of any ? –  Carcigenicate Commented Apr 4, 2016 at 15:47
• You could definitely do that, yes, and it might be a bit more consistent, but in this example, it'd only give you access to .toString() and .valueOf() , in Intellisense, so for me, using any is just fine, but to each his/her own. –  Joe Commented Apr 5, 2016 at 13:20

Actually it might be too late for this answer but you can now do this:

so instead of static methods you can do the above. I hope it will help you!!!

• Great! You have to consider here, that every new extra field of other constructors should be marked as optional; like you already did for obj? –  Radu Linu Commented Mar 4, 2020 at 8:37
• 1 Isn't the second constructor constructor(obj: IBox); redundant? Isn't the last one taking care of these both cases? –  zaplec Commented Apr 15, 2020 at 11:45

You can handle this by :

Partial will make your fields (x,y, height, width) optionals, allowing multiple constructors

eg: you can do new Box({x,y}) without height, and width.

• 2 I think you still need to handle default values for missing items. Easily done, tho. –  Charlie Reitzel Commented Oct 9, 2019 at 1:09
• 1 or constructor(obj?: Partial<Box>) +1 –  codeandcloud Commented May 17, 2020 at 12:12
• 1 Partials are a great answer, but why introduce lowdash? –  vegemite4me Commented Sep 28, 2020 at 10:11
• @vegemite4me you're right no need for lodash. Object.assign is sufficient –  spielbug Commented Nov 5, 2020 at 9:06
• 1 Careful, this solution breaks the class contract as Box defines that all properties are mandatory, while this solution allows them to be undefined. –  DarkNeuron Commented Nov 26, 2020 at 14:38

Your Box class is attempting to define multiple constructor implementations .

Only the last constructor overload signature is used as the class constructor implementation .

In the below example, note the constructor implementation is defined such that it does not contradict either of the preceding overload signatures .

In the case where an optional, typed parameter is good enough, consider the following code which accomplishes the same without repeating the properties or defining an interface:

Keep in mind this will assign all properties passed in track , eve if they're not defined on Track .

• In that case, wouldn't it be better to type the parameter as {} instead of IBox ? You're already enumerating the property constraints... –  Roy Tinker Commented Jul 5, 2017 at 23:37
• @RoyTinker yeah, you are right. Basically the answer was wrong and I updated it. –  Ardeshir Valipoor Commented Oct 10, 2019 at 15:41

We can simulate constructor overload using guards

I use the following alternative to get default/optional params and "kind-of-overloaded" constructors with variable number of params:

I know it's not the prettiest code ever, but one gets used to it. No need for the additional Interface and it allows private members, which is not possible when using the Interface.

Here is a working example and you have to consider that every constructor with more fields should mark the extra fields as optional .

As commented in @Benson answer, I used this example in my code and I found it very useful. However I found with the Object is possibly 'undefined'.ts(2532) error when I tried to make calculations with my class variable types, as the question mark leads them to be of type AssignedType | undefined . Even if undefined case is handled in later execution or with the compiler type enforce <AssignedType> I could not get rid of the error, so could not make the args optional.I solved creating a separated type for the arguments with the question mark params and the class variables without the question marks. Verbose, but worked.

Here is the original code, giving the error in the class method(), see below:

So variable cannot be used in the class methods. If that is corrected like this for example:

Now this error appears:

As if the whole arguments bundle was no optional anymore.

So if a type with optional args is created, and the class variables are removed from optional I achieve what I want, the arguments to be optional, and to be able to use them in the class methods. Below the solution code:

Comments appreciated from anyone who takes the time to read and try to understand the point I am trying to make.

Thanks in advance.

• Yes, this is exactly how to use my method when doing customizations (the comment above the constructor directs to the exact solution you have here). A few people have been tripped up on it--my stealing the interface from the class--so I'm tempted to modify my answer. But I'll leave it for history as having my answer "as is" is a required point of reference in your great answer here. –  Benson Commented Jan 17, 2021 at 22:22
• OK I see. Thanks for clarifyng –  rustyBucketBay Commented Jan 18, 2021 at 8:25

Generally speaking for N overloads, it might be better to use:

At least now we can check which route to go down and act accordingly

As chuckj said, the simple answer is an optional parameter, but what if we want to overload a constructor with more than one parameter, or we want to change parameter order?

Turns out, constructors can be overloaded just like functions:

You should had in mind that...

It's the same as new() or new("a","b","c")

is the same above and is more flexible...

new() or new("a") or new("a","b") or new("a","b","c")

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Sign up or log in

Post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy .

Not the answer you're looking for? Browse other questions tagged typescript constructor overloading or ask your own question .

• The Overflow Blog
• Navigating cities of code with Norris Numbers
• Featured on Meta
• We've made changes to our Terms of Service & Privacy Policy - July 2024
• Bringing clarity to status tag usage on meta sites
• Feedback requested: How do you use tag hover descriptions for curating and do...

Hot Network Questions

• Why do these finite group Dedekind matrices seem to have integer spectrum when specialized to the order of group elements?
• How to cite a book if only its chapters have DOIs?
• QGIS selecting multiple features per each feature, based on attribute value of each feature
• Age is just a number!
• Are all simple groups of order coprime to 3 cyclic? If so, why?
• Polar coordinate plot incorrectly plotting with PGF Plots
• Prove that there's a consecutive sequence of days during which I took exactly 11 pills
• A short story where a space pilot has a device that sends the ship back in time just before losing a space battle. He is duplicated by accident
• Will the US Customs be suspicious of my luggage if i bought a lot of the same item?
• Making wobbly 6x4’ table stable
• Does the First Amendment protect deliberately publicizing the incorrect date for an election?
• Are there jurisdictions where an uninvolved party can appeal a court decision?
• Using the higrī date instead of the Gregorian date
• Series for Riemann zeta function of odd arguments
• How to read data from Philips P2000C over its serial port to a modern computer?
• Function to find the most common numeric ordered pairings (value, count)
• What majority age is taken into consideration when travelling from country to country?
• What was the reason for not personifying God's spirit in NABRE's translation of John 14:17?
• What is a transition of point man in French?
• Enigmatic Puzzle 4: Three Leaf Clover
• Can I use "Member, IEEE" as my affiliation for publishing papers?
• Does H3PO exist?
• What is the meaning of these Greek words ἵπποπείρην and ἐπεμβάτην?
• Whats the purpose of slots in wings?