TypeScript Classes

Introduction

Classes provide a way of encapsulating data and methods into a pre-defined blueprint with a given shape and size. This blueprint can then be used to create objects or instances of the class to perform various functions.

Classes in TypeScript support syntax defined by ECMAScript 6 where classes can be declared using the class keyword followed by the name of the class and a {} (opening and closing braces).

For example:

The above code snippet creates a TypeScript class with the class name ClassName.

An object is an instance of a class in TypeScript. This instance of a class can be created using the new keyword followed by the name of the class called a function (using ()).

As of now, the ClassName class can't do anything because it has no methods or functions to be invoked. In the next section, we will see how attributes can be inserted inside a class declaration.

A Class Can Include the Following

1. Constructor

   • Constructors are functions that are invoked when an object is instantiated. That is whenever a new object is created, the constructor function is called first.
   • This is generally used to create the object with some fixed values or initialise the object with some values for the properties.

   Output:

   • constructors can also support parameters like normal functions. These parameters can then be used to initialise member variables/properties.

   Output:

2. Properties

   • Properties are member data variables that hold information
   • These member data variables are accessible to all the objects
   • In TypeScript, the property is first defined in the class declaration with a specified type.

3. Methods

   • Methods are functions defined inside of class declarations
   • Methods are generally used to update, modify or perform actions on properties of the class

   Output:

Inheritance

All object-oriented programming languages like TypeScript support inheritance where properties and methods can be derived from a base class.

TypeScipt supports JavaScript's class inheritance fully with some additional features. TypeScript has two main addition to class inheritance in JavaScript: interfaces and abstract classes

• Interfaces allow classes to follow a particular pre-defined shape and allow type checking for complex data structures.
• Abstract classes are base classes that allow inheritance
  • Abstract classes do not allow objects to be instantiated.

Class Implements Interface

• implements keyword is used to check whether a class satisfies an interface
  • checks if the class implementing the interface has the same general shape

Output:

Interface extends Class

• classes can be extended from a base class using the keyword extends
• The base class shares all its properties and methods with its children
  • the children or the derived classes can also define additional methods and properties apart from the methods and properties of the base class.

Output 1:

Output 2:

Method Overriding

• In inheritance, the derived class can modify the properties and methods of the base class.
  • This is achieved using the super keyword to access the methods and properties of the base class
• Therefore Method Overriding is a technique in TypeScript to override base class properties and methods.
• This is not possible with JavaScript and is only possible in TypeScript as TypeScript enforces that a derived class is always a subtype of its base class.

Output: