Properties and Methods

Properties and Methods

A comprehensive guide to Properties and Methods in Typescript classes. Learn about adding properties and methods to classes with clear explanations. Perfect for beginners starting with Typescript.

Introduction

Properties and methods are fundamental building blocks of classes in Typescript. Understanding how to define and use them is crucial for creating robust and maintainable object-oriented code. In this article, we'll explore the concepts of properties and methods, learn how to add them to classes, and discover best practices and common pitfalls to avoid.

Core Concepts

In Typescript, classes can have properties and methods. Properties are variables that store data associated with an instance of a class, while methods are functions that define the behavior of a class.

Here's an example of a simple class with properties and a method:

class Person {
  name: string;
  age: number;

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

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

In this example, the Person class has two properties: name and age, and a method called sayHello().

Implementation Details

To add properties to a class, simply declare them inside the class body with their respective types. You can initialize properties in the constructor or directly when declaring them.

Methods are defined similarly to functions, but they are placed inside the class body. They can access the class's properties using the this keyword.

Here's an example of adding a new method to the Person class:

class Person {
  // ...

  getAge() {
    return this.age;
  }
}

Best Practices

• Use meaningful and descriptive names for properties and methods.
• Follow the principle of encapsulation by keeping properties private and exposing them through public methods when necessary.
• Use constructor parameters to initialize properties for better readability and maintainability.
• Keep methods focused and single-responsibility to promote code reusability and testability.

Common Pitfalls

• Forgetting to use the this keyword when accessing class properties inside methods.
• Not initializing properties in the constructor or providing default values, leading to potential undefined errors.
• Overcomplicating methods by adding too much functionality. Keep methods small and focused.

Practical Examples

Here's an example of a Rectangle class with properties and methods:

class Rectangle {
  private width: number;
  private height: number;

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

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

  getPerimeter() {
    return 2 * (this.width + this.height);
  }
}

const rectangle = new Rectangle(5, 3);
console.log(rectangle.getArea()); // Output: 15
console.log(rectangle.getPerimeter()); // Output: 16

Summary and Next Steps

In this article, we learned about properties and methods in Typescript classes. We discovered how to add properties and methods, explored best practices, and looked at common pitfalls to avoid. Properties store data, while methods define behavior. By mastering these concepts, you can create well-structured and maintainable classes in Typescript.

Next, you can explore more advanced topics like access modifiers, inheritance, and static properties and methods to further enhance your Typescript classes.