The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Classes and Interfaces

Next ►
►

In this section, we will delve into the concepts of classes and interfaces in TypeScript, which are fundamental to building robust and scalable applications in Angular. Understanding these concepts will help you create well-structured and maintainable code.

Classes

What is a Class?

A class in TypeScript is a blueprint for creating objects. It encapsulates data for the object and methods to manipulate that data. Classes are a core feature of object-oriented programming (OOP).

Defining a Class

Here is a simple example of a class in TypeScript:

class Person {
  // Properties
  name: string;
  age: number;

  // Constructor
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // Method
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

// Creating an instance of the class
const person1 = new Person('John Doe', 30);
person1.greet(); // Output: Hello, my name is John Doe and I am 30 years old.

Explanation

  • Properties: name and age are properties of the class.
  • Constructor: The constructor is a special method that is called when a new instance of the class is created. It initializes the properties of the class.
  • Method: greet is a method that prints a greeting message to the console.

Access Modifiers

TypeScript supports access modifiers to control the visibility of class members. The three main access modifiers are:

  • public: Members are accessible from anywhere.
  • private: Members are accessible only within the class.
  • protected: Members are accessible within the class and its subclasses.

Example:

class Employee {
  public name: string;
  private salary: number;
  protected department: string;

  constructor(name: string, salary: number, department: string) {
    this.name = name;
    this.salary = salary;
    this.department = department;
  }

  public getSalary() {
    return this.salary;
  }
}

const employee1 = new Employee('Jane Doe', 50000, 'Engineering');
console.log(employee1.name); // Accessible
console.log(employee1.getSalary()); // Accessible
// console.log(employee1.salary); // Error: Property 'salary' is private
// console.log(employee1.department); // Error: Property 'department' is protected

Interfaces

What is an Interface?

An interface in TypeScript is a way to define the structure of an object. It is a contract that the objects must adhere to. Interfaces are used to define the shape of data and ensure that the objects follow a specific structure.

Defining an Interface

Here is an example of an interface in TypeScript:

interface Person {
  name: string;
  age: number;
  greet(): void;
}

const person: Person = {
  name: 'John Doe',
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

person.greet(); // Output: Hello, my name is John Doe and I am 30 years old.

Explanation

  • Properties: name and age are properties defined in the interface.
  • Method: greet is a method defined in the interface.

Implementing Interfaces in Classes

Classes can implement interfaces to ensure they adhere to a specific structure. Here is an example:

interface Animal {
  name: string;
  makeSound(): void;
}

class Dog implements Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  makeSound() {
    console.log('Woof! Woof!');
  }
}

const dog = new Dog('Buddy');
dog.makeSound(); // Output: Woof! Woof!

Explanation

  • The Dog class implements the Animal interface, ensuring that it has a name property and a makeSound method.

Practical Exercises

Exercise 1: Create a Class

Create a class Car with the following properties and methods:

  • Properties: make (string), model (string), year (number)
  • Method: getCarInfo that returns a string with the car's information

Solution:

class Car {
  make: string;
  model: string;
  year: number;

  constructor(make: string, model: string, year: number) {
    this.make = make;
    this.model = model;
    this.year = year;
  }

  getCarInfo() {
    return `${this.year} ${this.make} ${this.model}`;
  }
}

const car1 = new Car('Toyota', 'Camry', 2020);
console.log(car1.getCarInfo()); // Output: 2020 Toyota Camry

Exercise 2: Create an Interface and Implement it in a Class

Create an interface Shape with the following properties and methods:

  • Properties: name (string)
  • Method: getArea that returns a number

Create a class Rectangle that implements the Shape interface with the following additional properties and methods:

  • Properties: width (number), height (number)
  • Method: getArea that calculates and returns the area of the rectangle

Solution:

interface Shape {
  name: string;
  getArea(): number;
}

class Rectangle implements Shape {
  name: string;
  width: number;
  height: number;

  constructor(name: string, width: number, height: number) {
    this.name = name;
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

const rectangle = new Rectangle('Rectangle', 10, 5);
console.log(`${rectangle.name} area: ${rectangle.getArea()}`); // Output: Rectangle area: 50

Conclusion

In this section, we covered the basics of classes and interfaces in TypeScript. We learned how to define classes, use access modifiers, and implement interfaces. These concepts are crucial for building well-structured and maintainable applications in Angular. In the next module, we will explore how to create and use components in Angular, which are the building blocks of any Angular application.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved