TypeScript OOP: Classes & Objects Tutorial

tip Object Oriented Programming is a difficult topic for new programmers to understand. It’s okay if the OOP sections of the tutorial course takes you longer to understand than the others.

Object Oriented Programming: Classes & Objects

Object oriented programming, or OOP for short, is a popular approach to solving problems in programming languages.

OOP is when we treat both data and behavior as a single, reusable unit. We try to model our application after entities in the real world by using classes and objects.

note We should compile the following scripts with the compiler flag --target es6 or greater.

What is a class

A class is a blueprint, or recipe for an object. A class defines what every instance of it should contain. As an example, let’s consider a pizza.

Every pizza has:

• A base
• A sauce
• Cheese
• Toppings

This is our recipe, our class for a pizza. Not every pizza (instance of our class) will have the same toppings, but it will have toppings.

Classes may contain attributes (properties), as well as methods (functions), collectively known as members. As an example, let’s consider a database of users.

Every user has attributes like:

• A name
• An age
• An address
• A profile picture
• An email
• A password etc.

Every user has functionality available to them, like:

• Change password
• Upload profile picture
• Add to cart
• Logout etc.

We combine our attributes and functionality into this single entity, a class. Every instance of a user will follow the pattern set up in the class but with different attributes.

What is an object

When we use the term object, we’re referring to an instance of a class. A single pizza, or user, that was created from the class blueprint.

Consider an array, an array is a class. When we create an array, we’re actually creating an instance, or object, of the array class.

Once we’ve created that object, we have access to the properties and functions that TypeScript has declared inside the array class. Like like array.length or array.splice() .

// an object of the array class
let shoppingList:string[] = ["Bread", "Milk"]

In the example above, we’ve created an instance of the array class, an object called ‘shoppingList’. Now that we have an object, we have access to its properties and methods.

// an object of the array class
let shoppingList:string[] = ["Bread", "Milk"]

// using a property of the array class
console.log("There are " + shoppingList.length + " items in the shopping list")

We can create as many instances of a class as we need, each with their own different values, and each having the array.length property.

How to create (declare) a class

To create a class we use the class keyword, followed by a unique name and a code block.

class ClassName {

  // properties
  // methods

}

class Employee {

  // properties
  name = "Unknown"

  // methods
  walk() {
    console.log("Walking...")
  }
}

In the example above, we declare a class called ‘Employee’, with one attribute and one method (function).

We should note two conventions typically used when naming classes:

1. We name our classes in the singular. Instead of a class named Cars, we call it Car.
2. We use Pascal casing. The first letter of the name is uppercase and each new word in the name has its first letter in uppercase. We don’t separate words with underscores.

note We don’t have to name our classes this way but it is a good convention to follow. Some enterprises may require you to follow conventions such as these, or their own.

In this tutorial series we will be using this convention.

How to instantitate an object of a class

To create an object instance of a class, we use the new keyword, followed by the name of the class and a pair of open and close parentheses.

We assign the new instance of the class to a variable to be able to use it.

 var object_name = new ClassName()

The parentheses are used with a class constructor, which we explain in more detail further along in this tutorial.

class Person {

  // properties
  name = "Unknown"

  // methods
  walk() {
    console.log("Walking...")
  }
}

// instantiate
let p1 = new Person()

In the example above we create a new object of the CODE class called p1 . The variable can now be used to access the properties and methods of the class.

Unlike functions, classes need to be declared before they can be instantiated or used. Simply put, the instantiation needs to be below the declaration to avoid errors.

How to access members (properties & methods) of a class

We access class properties or methods with what’s known as dot notation. First we write the object name, followed by a dot operator and the property or method we want to access.

object_name.property

object_name.method()

class Person {

  // attributes
  name = "Unknown"

  // methods
  walk() {
    console.log("Walking...")
  }
}

// instantiate
let p1 = new Person()

// access method
p1.walk()

In the example above, we call the walk() method of the p1 object, which prints a message to the console that was set up in the class.

How to declare class expressions

Similar to function expressions, we can declare class expressions. We also use variables to fetch the class, so the class itself is allowed to be either named or unnamed.

var expression_name = class {
  // class body
}

var expression_name = class ClassName {
  // class body
}

let Person = class {
  // attributes
  name = "Unknown"

  // methods
  walk() {
    console.log("Walking...")
  }
}

The example above produces the same result as the named declaration, earlier in the tutorial.

We can access a class expression by either instantiating it directly with the new keyword, or by assigning it to a variable (thereby creating an object).

let Person = class {

  // attributes
  name = "Unknown"

  // methods
  walk() {
    console.log("Walking...")
  }
}

new Person().walk()
// or
let p1 = new Person()
p1.walk();

When we instantiate the class expression directly with the new keyword, we must remember to add open and close parentheses behind the expression_name.

The parentheses are used to construct the object, if there is a constructor present in the declaration.

When a class expression is named, we cannot use the class name to access its members. We must use the variable name.

let Person = class Employee {

  // attributes
  name = "Unknown"

  // methods
  walk() {
    document.write("Walking...")
  }
}

// correct
new Person().walk()

// incorrect, will raise an error
new Employee().walk()

Summary: Points to remember

• Classes in TypeScript should be compiled with the --target es6 or greater flag.
• A class in an entity that allows us to group both data and behavior into a single unit.
• An object is an instance of the class blueprint. If a class is a cookie cutter, an object would be the cookie.
• A class has to be declared at any stage above its invocation (use).
• We instantiate a class by creating a new instance object.
• We access the members of a class through dot notation, where the object name is followed by a dot and then the member we want to access.
• We can declare class expressions with or without a name.
• We can instantiate a class expression directly with the new keyword, or by creating an object.
• When a class expression is named, we cannot use the name to invoke the class expression. Instead we must use the expression name.