Posted on Sep 8 A Class is a blueprint for creating objects, it defines properties and methods that the objects created by that class will have. The introduction of classes in ECMAScript (ES6) aimed to provide a more structured and object-oriented way to create and manage objects.In this article, we will cover the following topics:We could create objects with prototypes in the past, but the syntax was too verbose. As a result, classes were introduced, and the new class simply inherits what prototypes are and their methods.Before ES6:After ES6:To define a class we have to use the class keyword followed by its name and curly braces.A class can have a constructor, a special method within a class that is automatically called when an instance of the class or object is created. The purpose of a constructor is to initialize the object’s state or perform any setup operations required for the object to function properly. In our example, we assign properties to our class that we can access later.Note: Classes can have only one constructor. JavaScript doesn’t support constructor or method overloading.Classes can hold properties, primitive or non-primitive types, and methods (functions). While it’s possible to explicitly add properties to a class outside of the constructor, the recommended approach is to assign them directly within the constructor.To define methods in classes, we utilize a similar syntax to functions but without the need for the function keyword.To make a class useful, we need to instantiate an object of that class by using the new keyword followed by calling the constructor with the correct arguments:If we do not provide a constructor, internally it will be defaulted to:Note: A class is not hoisted to the top, unlike functions. To avoid errors, declare them before instantiating objects of that type.A static method or property can be accessed directly from the class itself, without needing to create an instance of the class. This feature is particularly valuable for utility functions or constant variables.If you’re acquainted with the JavaScript Math class, understanding this concept becomes more straightforward.A private property or method can’t be accessed from outside the class. To define such a property or method we use # symbol.Properties offer a flexible way to both retrieve and set values without the need for direct access to the underlying data. This flexibility enhances code maintainability and encapsulation.We can enhance our Book class by introducing a private property named price. To safeguard it from invalid values, we'll use a setter method, while retaining the ability to access it using a getter method.It’s worth noting that we didn’t invoke the setter method explicitly; instead, we utilized direct assignment. The same applies to the getter method. This feature offers a convenient and elegant approach to working with our class properties.To begin, it’s essential to grasp the fundamental concepts of superclass and derived classes.A superclass, also known as a base class or parent class, is a class from which other classes inherit properties and methodsA derived class, also known as a subclass or child class, is a class that inherits attributes and methods from a superclassInheritance is a fundamental concept in object-oriented programming, enabling code reuse, extensibility, and the organization of classes into hierarchies.For example, we want to create a Technical Book that has an edition property. We know that a Technical Book is a Book, so we extend from Book to make its properties available to our new class.We use the super keyword to call the constructor of the superclass Book from our derived class TechnicalBook. This is done to access and execute the behavior defined in the superclass, which can then be extended or customized in the derived class.TypeScript is a statically typed superset of JavaScript that supports classes for object-oriented programming.There are 3 access modifiers:By default all methods and properties are private.Take a look at this clever technique using access modifiers to directly initialize properties within the constructor’s parameter list.An interface serves as a contract that a class must adhere to. It obliges the class to implement the specified properties and methods outlined in the interface. This enforces a clear set of rules and expectations for how the class should behave.In TypeScript, an abstract class is a class that cannot be instantiated on its own but serves as a blueprint for other classes. Abstract classes allow you to define common methods and properties that must be implemented by derived classes. To create an abstract class in TypeScript, you use the abstract keyword. Here's a basic example:If you found this article interesting, please consider leaving a follow or a reaction. Your feedback motivates me to create more content. If you have any questions or specific topics you’d like me to write about, please feel free to leave a comment with your suggestions. I appreciate your support and input!Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Russ Brooks - Sep 2 Matteo - Sep 1 Edward Cooper - Aug 28 Kanav Puri - Aug 28 Once suspended, miroiudev will not be able to comment or publish posts until their suspension is removed. Once unsuspended, miroiudev will be able to comment and publish posts again. Once unpublished, all posts by miroiudev will become hidden and only accessible to themselves. If miroiudev is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to miroiu-dev. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag miroiudev: miroiudev consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging miroiudev will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.