TypeScript : Classes

When it comes to object-oriented programming (OOP) in TypeScript, working with classes is a fundamental concept that every developer should understand. Classes provide a way to define blueprints for objects, allowing us to create objects with similar functionality and properties.

In this comprehensive guide, we will explore the ins and outs of using classes in TypeScript. We will start by covering the basics, such as how to define and instantiate a class. Then, we will dive into more advanced topics, such as inheritance and polymorphism.

Throughout the guide, we will also discuss the different features and syntax that TypeScript brings to the table when working with classes. We will learn how to declare properties and methods, access modifiers, static members, and much more. By the end of this guide, you will have a solid understanding of classes in TypeScript and be able to leverage their power to create well-structured and maintainable code.

Note: Before diving into this guide, it is recommended that you have a basic understanding of TypeScript’s syntax and concepts, including interfaces, types, and modules. If you’re new to TypeScript, it may be helpful to familiarize yourself with these concepts before continuing.

Overview of TypeScript Classes

TypeScript is an open-source programming language that is a superset of JavaScript. It aims to provide additional static typing features to JavaScript, making it more robust and reliable. One of the key features of TypeScript is the ability to create and use classes.

In TypeScript, classes enable you to define blueprints for creating objects with similar characteristics. They are the building blocks of object-oriented programming and provide a structure for organizing and modeling data. Classes encapsulate data (properties) and behavior (methods) into a single unit, making it easier to manage and reuse code.

When defining a class in TypeScript, you can specify properties, methods, and constructors. Properties represent the data associated with an object, while methods define the actions or operations the object can perform. Constructors are special methods that are called when an object is created and allow you to initialize its properties.

Classes in TypeScript also support inheritance, allowing you to create a hierarchy of classes. This enables you to define a base class (also known as a superclass) with common properties and methods, and then create derived classes (also known as subclasses) that inherit those properties and methods. Inheritance promotes code reuse and helps in maintaining a clean and organized codebase.

Another powerful feature of TypeScript classes is the ability to implement interfaces. Interfaces define a contract that a class must adhere to, specifying the properties and methods that must be implemented. By implementing interfaces, you can ensure that classes have the required structure and behavior, promoting code consistency and interoperability.

Overall, TypeScript classes provide a structured and organized way to define objects and their behavior. They enhance the readability, maintainability, and scalability of your code, making it easier to understand and work with. By leveraging the features of TypeScript classes, you can build robust and reliable applications with ease.

Basic Syntax of TypeScript Classes

A TypeScript class is a blueprint for creating objects with specific properties and methods. It provides a way to define a new type that can be instantiated multiple times. Here is the basic syntax of a TypeScript class:

class ClassName {

property1: type;

property2: type;

constructor(parameter1: type, parameter2: type) {

this.property1 = parameter1;

this.property2 = parameter2;

}

method1() {

// method implementation

}

method2() {

// method implementation

}

}

Explanation of the Syntax:

• class ClassName: Defines a new class named ClassName.
• property1: type;: Declares a property named property1 of type type.
• property2: type;: Declares a property named property2 of type type.
• constructor(parameter1: type, parameter2: type): Defines a constructor method that takes parameter1 and parameter2 as inputs of type type and initializes the property1 and property2 with the corresponding parameter values.
• this.property1 = parameter1;: Assigns the value of parameter1 to the property1 of the current class instance.
• this.property2 = parameter2;: Assigns the value of parameter2 to the property2 of the current class instance.
• method1(): Defines a method named method1 without any parameters.
• method2(): Defines a method named method2 without any parameters.

In TypeScript, the properties and methods of a class can have access modifiers like public, private, or protected. The public access modifier allows access to the property or method from anywhere, while private restricts access to only within the class itself, and protected allows access within the class and its subclasses. If no access modifier is specified, it defaults to public.

This basic syntax of a TypeScript class can be extended to include more complex functionalities and features, such as inheritance and interfaces, which further enhance the capabilities of classes in TypeScript.

Defining Properties in TypeScript Classes

One of the key features of TypeScript is its ability to define properties within classes. Properties allow you to store and retrieve data associated with an instance of a class. In TypeScript, you can define properties using the following syntax:

class MyClass {

propertyName1: type;
propertyName2: type = defaultValue;
}

Syntax Explanation:

1. propertyName1: The name of the property.
2. type: The data type of the property.
3. defaultValue (optional): The default value assigned to the property.

When you define a property without providing a default value, its initial value will be undefined. If you assign a default value, that value will be used as the initial value for the property.

Access Modifiers:

In TypeScript, you can also specify access modifiers for properties, which control the visibility and accessibility of the properties. The available access modifiers are:

• public (default): The property can be accessed from anywhere.
• private: The property can only be accessed within the class that defines it.
• protected: The property can only be accessed within the class that defines it and its subclasses.

class MyClass {

public publicProperty: string;
private privateProperty: number;
protected protectedProperty: boolean;
}

Using Properties:

Once you have defined properties in a class, you can use them to store and retrieve data. You can access properties using the dot notation:

const myObj = new MyClass();

myObj.publicProperty = "Hello";
console.log(myObj.publicProperty); // Output: "Hello"

Using access modifiers, you can control which properties are accessible to other parts of your code. This helps in maintaining encapsulation and data privacy.

Conclusion:

Defining properties is an essential part of building robust and reusable classes in TypeScript. With the ability to specify access modifiers, you can enforce encapsulation and control the visibility of your properties. By leveraging properties, you can store and retrieve data associated with instances of your classes, making them more powerful and flexible.

Access Modifiers in TypeScript Classes

Access modifiers are keywords that are used to specify the accessibility of properties and methods in TypeScript classes. They allow you to control the way other parts of your code can access and interact with these members.

Types of Access Modifiers

There are three access modifiers available in TypeScript:

• Public: Public members can be accessed from anywhere, both inside and outside the class. Public is the default access modifier in TypeScript, so if you don’t specify an access modifier, it will be treated as Public.
• Private: Private members can only be accessed from within the class in which they are defined. They are not accessible from any other class or scope.
• Protected: Protected members are similar to private members, but they can also be accessed from within child classes. This means that protected members are inheritable.

Usage of Access Modifiers

Access modifiers are used to enforce encapsulation and to ensure that your class and its members are used correctly. By specifying the appropriate access modifiers, you can prevent undesired access to certain properties or methods.

Here’s an example to illustrate the usage of access modifiers:

“`typescript

class Car {

public brand: string;

private model: string;

protected year: number;

constructor(brand: string, model: string, year: number) {

this.brand = brand;

this.model = model;

this.year = year;

}

public getInfo(): string {

return `This is a ${this.brand} ${this.model} from ${this.year}.`;

}

}

class SportsCar extends Car {

private topSpeed: number;

constructor(brand: string, model: string, year: number, topSpeed: number) {

super(brand, model, year);

this.topSpeed = topSpeed;

}

public getTopSpeed(): number {

return this.topSpeed;

}

}

let car = new Car(‘Toyota’, ‘Camry’, 2020);

console.log(car.brand); // Accessible

console.log(car.model); // Error: Property ‘model’ is private and only accessible within class ‘Car’

console.log(car.year); // Error: Property ‘year’ is protected and only accessible within class ‘Car’ and its subclasses

let sportsCar = new SportsCar(‘Ferrari’, ‘488 GTB’, 2022, 330);

console.log(sportsCar.brand); // Accessible

console.log(sportsCar.model); // Error: Property ‘model’ is private and only accessible within class ‘Car’

console.log(sportsCar.year); // Accessible, as it is a protected property in the base class

console.log(sportsCar.topSpeed); // Error: Property ‘topSpeed’ is private and only accessible within class ‘SportsCar’

“`

In this example, the ‘brand’ property is marked as public, so it is accessible both inside and outside the class. On the other hand, the ‘model’ property is marked as private, so it can only be accessed from within the ‘Car’ class. The ‘year’ property is marked as protected, so it can be accessed from within the ‘Car’ class and its subclasses, like ‘SportsCar’ in this case.

Similarly, the ‘getInfo()’ method is marked as public, so it can be accessed from anywhere. The ‘getTopSpeed()’ method in the ‘SportsCar’ class is also marked as public, and it can access the ‘brand’, ‘model’, and ‘year’ properties of the base class due to their protected or public access modifiers.

Overall, access modifiers provide a mechanism to restrict or allow access to properties and methods of a class, which helps in maintaining the integrity and security of your code.

Methods and Functions in TypeScript Classes

Methods

A method in a TypeScript class is a function that is associated with the class. It defines the behavior of an object and can access the properties and other methods of the class. Here is how a method is defined in TypeScript:

class ClassName {
methodName(parameter1: Type, parameter2: Type): ReturnType {
// method body
}
}

In the above code, ClassName is the name of the class, methodName is the name of the method, parameter1, parameter2 are the method’s parameters with their respective types, and ReturnType is the type of the value that the method returns.

To call a method, you need an instance of the class. Here is an example:

const obj = new ClassName();
obj.methodName(argument1, argument2);

Functions

In addition to methods, TypeScript classes can also have regular functions. These functions are not associated with a specific instance of the class and can be called using the class name. Here is how a function is defined in TypeScript:

class ClassName {
static functionName(parameter1: Type, parameter2: Type): ReturnType {
// function body
}
}

In the above code, ClassName is the name of the class, functionName is the name of the function, parameter1, parameter2 are the function’s parameters with their respective types, and ReturnType is the type of the value that the function returns.

To call a function, you can use the class name followed by the function name. Here is an example:

ClassName.functionName(argument1, argument2);

Summary

• Methods in TypeScript classes are functions associated with the class that define the behavior of an object.
• Methods can access the properties and other methods of the class.
• Functions in TypeScript classes are not associated with a specific instance of the class.
• Functions can be called using the class name.

Constructors in TypeScript Classes

Constructors are special class methods that are automatically called when an object of a class is created. Constructors are used to initialize the properties or variables of a class.

Syntax

The syntax for defining a constructor in TypeScript is as follows:

class ClassName {
constructor() {
// Statements
}
}

Here, the constructor keyword is used to define the constructor method. Within the constructor, you can define any statements to initialize the properties of the class.

Example

Let’s consider an example of a class called Person that contains properties for name and age:

class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}

In the above example, we have defined a constructor for the Person class that takes two parameters, name and age, and initializes the respective properties.

Usage

To create an object of the Person class and initialize its properties, we can use the following code:

let person = new Person("John Doe", 25);

The new keyword is used to create a new object of the class. The parameters passed to the constructor are used to initialize the properties of the object. In this example, the name property is set to “John Doe” and the age property is set to 25.

Conclusion

Constructors in TypeScript classes provide a way to initialize the properties of an object when it is created. By using constructors, you can ensure that the properties of an object have valid initial values.

Inheritance in TypeScript Classes

Inheritance is a key feature in TypeScript classes that allows you to create a hierarchy of classes where a derived class inherits properties and methods of a base class. Inheritance can be used to create a more specialized class that extends the functionality of the base class, or to reuse the code of the base class in multiple derived classes.

Defining a Base Class

To create a base class in TypeScript, you use the class keyword followed by the name of the class. The base class can have properties, methods, and a constructor. Properties and methods defined in the base class can be accessed by any derived class.

Here is an example of a base class:

class Animal {

name: string;
constructor(name: string) {
this.name = name;
}
eat(food: string) {
console.log(`${this.name} is eating ${food}.`);
}
}

Creating a Derived Class

To create a derived class that inherits from a base class, you use the extends keyword followed by the name of the base class. The derived class can have additional properties, methods, and a constructor in addition to the inherited ones.

Here is an example of a derived class that extends the Animal base class:

class Cat extends Animal {

meow() {
console.log(`${this.name} says meow.`);
}
}

In this example, the Cat class inherits the name property and the eat() method from the Animal base class. It also has a new method called meow().

Using Inherited Properties and Methods

To use the inherited properties and methods, you can simply call them on an instance of the derived class. The derived class has access to all the properties and methods of the base class.

const myCat = new Cat("Whiskers");

myCat.eat("fish"); // Output: Whiskers is eating fish.
myCat.meow(); // Output: Whiskers says meow.

Overriding Methods

In TypeScript, you can override a method of the base class in a derived class by redefining the method with the same name and signature. The overridden method in the derived class will be called instead of the base class’s method.

Here is an example of overriding the eat() method in the Cat class:

class Cat extends Animal {

eat(food: string) {
console.log(`${this.name} is eating fish.`);
}
}

In this example, the Cat class overrides the eat() method of the Animal base class and only allows the cat to eat fish.

Conclusion

Inheritance is a powerful feature of TypeScript classes that allows you to create hierarchies of classes with shared properties and methods. It enables code reuse, specialization, and allows for easy extension and customization of classes. Understanding how to define base classes, create derived classes, access inherited properties and methods, and override methods is key to effectively using inheritance in TypeScript.

Abstract Classes in TypeScript

Introduction

In TypeScript, abstract classes serve as the blueprint for other classes. They cannot be instantiated directly but allow the creation of subclasses that inherit their properties and methods. Abstract classes provide a way to define common functionality that can be shared among multiple classes.

Creating an Abstract Class

To define an abstract class, the abstract keyword is used before the class declaration. Abstract classes may contain abstract methods, which are methods without implementation.

abstract class Animal {

abstract makeSound(): void;

move(): void {
console.log("Moving...");
}
}

In the above example, the Animal class is defined as an abstract class with an abstract method makeSound. The class also has a non-abstract method move with a basic implementation.

Inheriting an Abstract Class

Abstract classes can be inherited by other classes using the extends keyword. The subclasses must implement the abstract methods defined in the abstract class.

class Dog extends Animal {

makeSound(): void {

console.log("Woof!");
}
}

In the above example, the Dog class extends the Animal abstract class. It provides an implementation for the makeSound method.

Using Abstract Classes

Abstract classes can be used as types for variables and function parameters.

function playSound(animal: Animal): void {

animal.makeSound();

}

In the above example, the playSound function takes an Animal instance as a parameter. This allows any subclass of the Animal class to be passed to the function.

Conclusion

Abstract classes in TypeScript provide a way to define common functionality that can be inherited by other classes. They are useful in scenarios where you want to provide a base class with some default implementation and require subclasses to implement certain methods. By using abstract classes, you can achieve a cleaner and more organized code structure.

Interfaces in TypeScript Classes

In TypeScript, interfaces are used to define the structure of an object. They provide a way to enforce a specific set of properties and methods that must be implemented by a class. By using interfaces, you can achieve type-checking and ensure that your classes adhere to a certain contract.

Defining an Interface

To define an interface, you use the interface keyword followed by the name of the interface. Inside the interface, you define the properties and methods that are required to be implemented by a class. Here’s an example:

interface Shape {

readonly name: string;
area(): number;
perimeter(): number;
}

In the example above, we define an interface named Shape. It requires any implementing class to have a name property of type string, as well as area() and perimeter() methods that return a number.

Implementing an Interface

To implement an interface in a class, you use the implements keyword followed by the name of the interface. The class must then provide the required properties and methods defined in the interface.

class Rectangle implements Shape {

readonly name = "Rectangle";
private length: number;
private width: number;
constructor(length: number, width: number) {
this.length = length;
this.width = width;
}
area() {
return this.length * this.width;
}
perimeter() {
return 2 * (this.length + this.width);
}
}

In the example above, we have a class named Rectangle that implements the Shape interface. It provides the required name property, as well as the area() and perimeter() methods.

Using Interfaces

Interfaces can be used to define the type of a variable, function parameter, or function return value. By specifying the type as the interface, you can ensure that the object being used adheres to the interface’s contract.

function printShapeInfo(shape: Shape) {

console.log("Name:", shape.name);
console.log("Area:", shape.area());
console.log("Perimeter:", shape.perimeter());
}
const rectangle = new Rectangle(10, 5);
printShapeInfo(rectangle);

In the example above, we define a function printShapeInfo() that takes a parameter of type Shape. We then create an instance of the Rectangle class and pass it to the function. Since Rectangle implements the Shape interface, it can be used as a parameter for the printShapeInfo() function.

Interfaces are a powerful feature of TypeScript that allow you to define contracts for your classes and achieve type-checking. By using interfaces, you can ensure that your classes have the required structure and behavior, making your code more reliable and robust.

Static Members in TypeScript Classes

Static members in TypeScript classes are associated with the class itself rather than with its instances. They are defined using the static keyword.

Accessing Static Members

Static members can be accessed using the class name followed by the member name, without needing to create an instance of the class. For example:

class MyClass {
static staticProperty: string = "Static Property";
static staticMethod(): void {
console.log("Static Method");
}
}
console.log(MyClass.staticProperty); // Output: "Static Property"
MyClass.staticMethod(); // Output: "Static Method"

Use Cases for Static Members

Static members are commonly used for:

• Constant values shared by all instances of a class
• Utility functions that are not tied to any specific instance of a class
• Creating factory methods

Static Properties

Static properties are shared by all instances of a class. They are defined by using the static keyword before the property declaration. For example:

class Circle {
static pi: number = 3.14;
radius: number;
constructor(radius: number) {
this.radius = radius;
}
getArea(): number {
return Circle.pi * this.radius * this.radius;
}
}
console.log(Circle.pi); // Output: 3.14
const circle1 = new Circle(5);
console.log(circle1.getArea()); // Output: 78.5
const circle2 = new Circle(10);
console.log(circle2.getArea()); // Output: 314

Static Methods

Static methods are called on the class itself and not on its instances. They can only access static properties and other static methods of the class. They are defined using the static keyword before the method declaration. For example:

class MathUtils {
static sum(numbers: number[]): number {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
}
console.log(MathUtils.sum([1, 2, 3, 4, 5])); // Output: 15

Conclusion

Static members in TypeScript classes allow you to define properties and methods that are associated with the class itself rather than with its instances. They are useful for values and functions that are shared by all instances or don’t depend on specific instance data. Understanding static members is crucial for developing well-structured and efficient code in TypeScript.

Generics in TypeScript Classes

Generics in TypeScript allow us to create reusable and flexible classes and functions by providing type parameters that can be used in multiple places within the class or function.

Defining a Generic Class

To define a generic class in TypeScript, we use the angle bracket notation <T> after the class name to specify the type parameter. This type parameter can then be used as a placeholder for a specific type.

For example, let’s define a generic class called Box<T> that represents a box that can hold a value of type T:

class Box<T> {

private value: T;
constructor(value: T) {
this.value = value;
}
getValue(): T {
return this.value;
}
}
// Usage
const numberBox = new Box<number>(42);
console.log(numberBox.getValue()); // Output: 42
const stringBox = new Box<string>('Hello');
console.log(stringBox.getValue()); // Output: Hello

In the example above, we defined a Box<T> class that has a private property value of type T. The constructor takes a value of type T and assigns it to the value property. The getValue method returns the value of type T.

Using Generics with Methods

We can also define generic methods within a generic class. The type parameter can be used within the method signature and body just like in the class definition.

class ArrayWrapper<T> {

private array: T[];
constructor(array: T[]) {
this.array = array;
}
getElementAtIndex(index: number): T {
return this.array[index];
}
pushElement(element: T): void {
this.array.push(element);
}
}
// Usage
const numberArrayWrapper = new ArrayWrapper<number>([1, 2, 3]);
console.log(numberArrayWrapper.getElementAtIndex(0)); // Output: 1
const stringArrayWrapper = new ArrayWrapper<string>(['a', 'b', 'c']);
console.log(stringArrayWrapper.getElementAtIndex(1)); // Output: b
stringArrayWrapper.pushElement('d');
console.log(stringArrayWrapper.getElementAtIndex(3)); // Output: d

In the example above, we defined an ArrayWrapper<T> class that wraps an array of type T. The getElementAtIndex method returns the element at the specified index, while the pushElement method adds a new element to the array.

Constraints on Generics

TypeScript allows us to apply constraints on generic type parameters to restrict the types that can be used as arguments or as the value of a property.

For example, let’s define a generic class called LengthCalculator<T extends { length: number }> that can calculate the length of an object if it has a length property:

class LengthCalculator<T extends { length: number }> {

calculateLength(value: T): number {
return value.length;
}
}
// Usage
const stringLengthCalculator = new LengthCalculator<string>();
console.log(stringLengthCalculator.calculateLength('Hello')); // Output: 5
const arrayLengthCalculator = new LengthCalculator<number[]>();
console.log(arrayLengthCalculator.calculateLength([1, 2, 3])); // Output: 3
// This will cause a compile-time error
const numberLengthCalculator = new LengthCalculator<number>();

In the example above, we defined a LengthCalculator<T extends { length: number }> class that can calculate the length of an object if it has a length property. The calculateLength method takes an argument of type T and returns its length. We applied a constraint on T using the extends keyword to ensure that only objects with a length property can be used as the argument for the calculateLength method.

By using generics in TypeScript classes, we can create reusable and type-safe code that allows for flexibility and abstraction. Generics provide a powerful tool for creating classes that can work with different types without sacrificing type checking and safety.

Decorators in TypeScript Classes

Decorators are a powerful feature in TypeScript that allow you to modify the behavior of a class or its members at runtime. They provide a way to add additional functionality to classes or their members without directly modifying their implementation.

What are Decorators?

In TypeScript, decorators are functions that can be attached to classes, methods, properties, or parameters using the @ syntax. They are declared with the @decorator syntax and are called immediately when the class is declared, passing the target and key as arguments.

Using Decorators

To use decorators in TypeScript, you can simply attach them to the class or its members using the @ symbol. Decorators can be applied to classes, methods, properties, and parameters, providing different kinds of functionality.

Common Use Cases of Decorators

• Logging Decorators: Decorators can be used to log method calls or property accesses.
• Validation Decorators: Decorators can be used to validate method arguments or property values.
• Authorization Decorators: Decorators can be used to restrict access to certain methods or properties based on user roles.
• Caching Decorators: Decorators can be used to cache method results for improved performance.

Creating Custom Decorators

TypeScript allows you to create your own custom decorators by creating a decorator function. A decorator function is a function that takes three arguments: the target, the key, and the descriptor. The target represents the class or prototype being decorated, the key represents the name of the member being decorated, and the descriptor represents the property descriptor of the member being decorated.

Summary

Decorators are a powerful feature in TypeScript that allow you to modify the behavior of classes and their members at runtime. They can be used to add additional functionality such as logging, validation, authorization, and caching. TypeScript allows you to create custom decorators by creating a decorator function that takes the target, key, and descriptor as arguments.

FAQ:

What are classes in TypeScript?

Classes in TypeScript are a way to define reusable blueprints for objects.

Why are classes important in TypeScript?

Classes are important in TypeScript because they allow for better code organization and reuse of functionality.

Can you give an example of defining a class in TypeScript?

Yes, here is an example: class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } }

What is the constructor method in TypeScript?

The constructor method is a special method that is called when a new instance of a class is created. It is used to initialize the properties of the class.

Can you explain inheritance in TypeScript classes?

Inheritance is a feature in TypeScript classes that allows a class to inherit properties and methods from another class. It is useful for creating hierarchies of related classes.