In the Understanding basic types section, we introduced ourselves to objects, which are types that can have their own properties. Interfaces, type aliases, and classes are ways that we can define an object structure before we start using it.

Following here is the customer object we worked with, where we declared the customer variable with an initial object value:

const customer = {
  name: "Lamps Ltd", 
  turnover: 2000134, 
  active: true 
};

1. Let's try to declare the customer variable and set its value on a subsequent line:

let customer: object;
customer = {
  name: "Lamps Ltd", 
  turnover: 2000134, 
  active: true 
};

2. So far, so good. However, let's see what happens when we try to change the customers turnover value:

customer.turnover = 2000200;

3. The lack of IntelliSense when we type turnover isn't what we are used to. When we've finished typing the line, we get a compiler error:

The TypeScript compiler doesn't know about the properties in the customer object and so thinks there's a problem.

So, we need another way of defining an object structure with the ability to set property values later in the program. That's where interfaces, type aliases, and classes come in; they let us define the structure of an object by letting us define our own types.

An interface is a contract that defines a type with a collection of property and method definitions without any implementation. Interfaces don't exist in JavaScript, so they are purely used by the TypeScript compiler to enforce the contract by type checking.

We create an interface with the interface keyword, followed by its name, followed by the bits that make up the interface in curly braces:

interface Product {
  ...
}

Properties are one of the elements that can be part of an interface. Properties can hold values associated with an object. So, when we define a property in an interface, we are saying that objects that implement the interface must have the property we have defined.

Let's start to play with an interface in the TypeScript playground:

1. Enter the following interface:

interface Product {
  name: string;
  unitPrice: number;
}

2. The preceding example creates a Product interface with name and unitPrice properties. Let's go on to use this interface by using it as the type for a table variable:

const table: Product = {
  name: "Table",
  unitPrice: 500
}

3. Let's try to set a property that doesn't exist in the interface:

const chair: Product = {
  productName: "Table",
  price: 70
}

As expected, we get a type error:

4. Properties on an interface can reference another interface because an interface is just a type. The following example shows an OrderDetail interface making use of a Product interface:

interface Product {
  name: string;
  unitPrice: number;
}

interface OrderDetail {
  product: Product; 
  quantity: number;
}

const table: Product = {
  name: "Table",
  unitPrice: 500
}

const tableOrder: OrderDetail = {
  product: table,
  quantity: 1
};

This gives us the flexibility to create complex object structures, which is critical when writing large, complex apps.

Interfaces can contain method signatures as well. These won't contain the implementation of the method; they define the contracts for when interfaces are used in an implementation.

Let's look at an example:

1. Let's add a method to the OrderDetail interface we just created. Our method is called getTotal and it has a discount parameter of type number and returns a number:

interface OrderDetail {
  product: Product; 
  quantity: number;
  getTotal(discount: number): number; 
}

Notice that the getTotal method on the interface doesn't specify anything about how the total is calculated – it just specifies the method signature that should be used.

2. Having adjusted our OrderDetail interface, our tableOrder object, which implemented this interface, will now be giving a compilation error. So, let's resolve the error by implementing getTotal:

const tableOrder: OrderDetail = {
  product: table,
  quantity: 1,
  getTotal(discount: number): number {
    const priceWithoutDiscount = this.product.unitPrice *  
    this.quantity;
    const discountAmount = priceWithoutDiscount * discount;
    return priceWithoutDiscount - discountAmount;
     }
};

Notice that the implemented method has the same signature as in the OrderDetail interface.

3. Let's tweak the method signature to discover what we can and can't do. We'll start by changing the parameter name:

getTotal(discountPercentage: number): number {
  const priceWithoutDiscount = this.product.unitPrice *   
   this.quantity;
  const discountAmount = priceWithoutDiscount * 
  discountPercentage;
  return priceWithoutDiscount - discountAmount;
}

4. We'll see that we don't get a compilation error. Let's change the method name now:

total(discountPercentage: number): number {
  const priceWithoutDiscount = this.product.unitPrice * this.quantity;
  const discountAmount = priceWithoutDiscount * discountPercentage;
  return priceWithoutDiscount - discountAmount;
} 

5. This does cause an error because a total method doesn't exist on the OrderDetail interface:

6. We could try changing the return type:

const tableOrder: OrderDetail = {
  product: table,
  quantity: 1,
  getTotal(discountPercentage: number): string {
    const priceWithoutDiscount = this.product.unitPrice * this.quantity;
    const discountAmount = priceWithoutDiscount * discountPercentage;
    return (priceWithoutDiscount - discountAmount).toString();
  }
};

This actually doesn't produce a compilation error in the TypeScript playground, but it should do!

7. So, let's use Visual Studio Code for this example. After we've opened Visual Studio Code in a folder of our choice, let's create a file called interfaces.ts and paste in the interface definitions for the Product and OrderDetail interfaces, along with the table variable declaration.
8. We can then enter the preceding implementation of the OrderDetail interface. As expected, we get a compilation error:

9. Changing the parameter type also results in a compilation error:

The errors provided by TypeScript are fantastic—they are very specific about where the problem is, allowing us to quickly correct our mistakes.

10. So, when implementing a method from an interface, the parameter names aren't important, but the other parts of the signature are. In fact, we don't even need to declare the parameter names in the interface:

interface OrderDetail {
  ...
  getTotal(number): number;
}

However, omitting the parameter names arguably makes the interface harder to understand—how do we know exactly what the parameter is for?

We might want to make a property optional because not every situation where the interface is implemented requires it. Let's take the following steps in our OrderDetail interface:

1. Let's create an optional property for the date it was added. We specify an optional value by putting a ? at the end of the property name but before the type annotation:

interface OrderDetail {
  product: Product;
  quantity: number;
  dateAdded?: Date,
  getTotal(discount: number): number;
}

We'll see that our implementation of this interface, tableOrder, isn't broken. We can choose to add dateAdded to tableOrder but it isn't required.

2. We might also want to make a method parameter optional. We do this in a similar way by putting a ? after the parameter name. In our example, let's make discount optional in the OrderDetail interface:

interface OrderDetail {
  product: Product;
  quantity: number;
  dateAdded?: Date,
  getTotal(discount?: number): number;
}

3. We can change the method implementation signature as well:

getTotal(discount?: number): number {
  const priceWithoutDiscount = this.product.unitPrice * this.quantity;
  const discountAmount = priceWithoutDiscount * (discount || 0);
  return priceWithoutDiscount - discountAmount;
}

We've also dealt with the case when a discount isn't passed into the method by using (discount || 0) in the discountAmount variable assignment.

4. With our optional parameter in place, we can call getTotal without passing a value for the discount parameter:

tableOrder.getTotal()

The preceding line doesn't upset the TypeScript compiler.

We can stop a property from being changed after it has initially been set by using the readonly keyword before the property name.

1. Let's give this a try on our Product interface by making the name property readonly:

interface Product {
  readonly name: string;
  unitPrice: number;
}

2. Let's also make sure we have an instance of the Product interface in place:

const table: Product = {
  name: "Table",
  unitPrice: 500
};

3. Let's change the name property table now on the next line:

table.name = "Better Table";

As expected, we get a compilation error:

readonly properties are a simple way of freezing their values after being initially set. A common use case is when you want to code in a functional way and prevent unexpected mutations to a property.

Interfaces can extend other interfaces so that they inherit all the properties and methods from its parent. We do this using the extends keyword after the new interface name and before the interface name that is being extended.

Let's look at the following example:

1. We create a new interface, taking Product as a base, and add information about discount codes:

interface Product {
  name: string;
  unitPrice: number;
}

interface DiscountCode {
  code: string;
  percentage: number;
}

interface ProductWithDiscountCodes extends Product {
  discountCodes: DiscountCode[];
}

2. We can create an instance of the interface in the usual way, filling in properties from the base interface as well as the child interface:

const table: ProductWithDiscountCodes = {
  name: "Table",
  unitPrice: 500,
  discountCodes: [
    { code: "SUMMER10", percentage: 0.1 },
    { code: "BFRI", percentage: 0.2 }
  ]
};

Interfaces allow us to create complex but flexible structured types for our TypeScript program to use. They are a really important feature that we can use to create a robust, strongly-typed TypeScript program.

In simple terms, a type alias creates a new name for a type. To define a type alias, we use the type keyword, followed by the alias name, followed by the type that we want to alias.

We'll explore this with the following example:

1. Let's create a type alias for the getTotal method in the OrderDetail interface we have been working with. Let's try this in the TypeScript playground:

type GetTotal = (discount: number) => number;

interface OrderDetail {
  product: Product;
  quantity: number;
  getTotal: GetTotal;
}

Nothing changes with objects that implement this interface – it is purely a way we can structure our code. It arguably makes the code a little more readable.

2. Type aliases can also define the shape of an object. We could use a type alias for our Product and OrderDetail types that we previously defined with an interface:

type Product = {
  name: string;
  unitPrice: number;
};

type OrderDetail = {
  product: Product;
  quantity: number;
  getTotal: (discount: number) => number;
};

3. We use these types in exactly the same way as we used our interface-based types:

const table: Product = {
  name: "Table",
  unitPrice: 500
};

const orderDetail: OrderDetail = {
  product: table,
  quantity: 1,
  getTotal(discount: number): number {
    const priceWithoutDiscount = this.product.unitPrice * this.quantity;
    const discountAmount = priceWithoutDiscount * discount;
    return priceWithoutDiscount - discountAmount;
  } 
};

So, type aliases seem very similar to interfaces. What is the difference between a type alias and an interface? The main difference is that type aliases can't be extended or implemented from like you can with interfaces. So, for a simple structure that doesn't require inheritance, should we use an interface or should we use a type alias? There isn't strong reasoning to prefer either approach. However, we should be consistent with whichever approach we choose to improve the readability of our code.

Classes feature in many programming languages, including JavaScript. They let us shape objects with type annotations in a similar way to interfaces and type aliases. However, classes have many more features than interfaces and type aliases, which we'll explore in the following sections.

Classes have lots of features. So, in this section we'll look at the basic features of a class. We use the class keyword followed by the class name, followed by the definition of the class.

Let's look at this in more depth with the following example:

1. We could use a class to define the Product type we previously defined as an interface and as a type alias:

class Product {
  name: string;
  unitPrice: number;
}

2. We create an instance of our Product class by using the new keyword followed by the class name and parentheses. We then go on to interact with the class, setting property values or calling methods:

const table = new Product();
table.name = "Table"; 
table.unitPrice = 500;

Notice that when we use this approach we don't need a type annotation for the table variable because the type can be inferred.

Classes have many more features than type aliases and interfaces though. One of these features is the ability to define the implementation of methods in a class.

Let's explore this with an example:

1. Let's change the OrderDetail type we have been working within previous sections to a class. We can define the implementation of the getTotal method in this class:

class OrderDetail {
  product: Product;
  quantity: number;

  getTotal(discount: number): number {
    const priceWithoutDiscount = this.product.unitPrice * this.quantity;
    const discountAmount = priceWithoutDiscount * discount;
    return priceWithoutDiscount - discountAmount;
  }
}

2. We can create an instance of OrderDetail, specifying a product and quantity, and then calling the getTotal method with a discount to get the total price:

const table = new Product();
table.name = "Table"; 
table.unitPrice = 500; 

const orderDetail = new OrderDetail();
orderDetail.product = table;
orderDetail.quantity = 2;

const total = orderDetail.getTotal(0.1);

console.log(total);

If we run this and look at the console, we should see an output of 900.

We can use classes and interfaces together by defining the contract in an interface and then implementing the class as per the interface. We specify that a class is implementing a particular interface using the implements keyword.

As an example, we can define an interface for the order detail and then a class that implements this interface:

interface IOrderDetail {
  product: Product;
  quantity: number;
  getTotal(discount: number): number;
}

class OrderDetail implements IOrderDetail {
  product: Product;
  quantity: number;

  getTotal(discount: number): number {
    const priceWithoutDiscount = this.product.unitPrice *  
     this.quantity;
    const discountAmount = priceWithoutDiscount * discount;
    return priceWithoutDiscount - discountAmount;
  }
}

In the preceding example, we've prefixed the interface with I so that readers of the code can quickly see when we are referencing interfaces.

Why would we use this approach? It seems like more code than we need to write. So, what's the benefit? This approach allows us to have multiple implementations of an interface, which can be useful in certain situations.

Constructors are functions that perform the initialization of new instances of a class. In order to implement a constructor, we implement a function called constructor. It's common to set property values in the constructor to simplify consumption of the class.

Let's look at the following example:

1. Let's create a constructor in the OrderDetail class that allows us to set the product and quantity:

class OrderDetail implements IOrderDetail {
  product: Product;
  quantity: number;

  constructor(product: Product, quantity: number) {
    this.product = product;
    this.quantity = quantity;
  }

  getTotal(discount: number): number {
    ...
  }
}

2. If we create an instance of the class, we are forced to pass in the product and quantity:

const orderDetail = new OrderDetail(table, 2);

3. This is nice because we've reduced three lines of code to one line. However, we can make our class even nicer to work with by making the default quantity parameter 1 if nothing is passed in:

constructor(product: Product, quantity: number = 1) {
  this.product = product;
  this.quantity = quantity;
}

4. We now don't have to pass in a quantity if it is 1:

const orderDetail = new OrderDetail(table);

5. We can save ourselves a few keystrokes and let the TypeScript compiler implement the product and quantity properties by using the public keyword before the parameters in the constructor:

class OrderDetail implements IOrderDetail {
  constructor(public product: Product, public quantity: number = 1) {
    this.product = product;
    this.quantity = quantity;
  }

  getTotal(discount: number): number {
    ...
  }
}

Classes can extend other classes. This is the same concept as interfaces extending other interfaces, which we covered in the Extending interfaces section. This is a way for class properties and methods to be shared with child classes.

As with interfaces, we use the extends keyword followed by the class we are extending. Let's look at an example:

1. Let's create a ProductWithDiscountCodes from our Product class:

class Product {
  name: string;
  unitPrice: number;
}

interface DiscountCode {
  code: string;
  percentage: number;
}

class ProductWithDiscountCodes extends Product {
  discountCodes: DiscountCode[];
}

2. We can then consume the ProductWithDiscountCodes class as follows, leveraging properties from the base class as well as the child class:

const table = new ProductWithDiscountCodes();
table.name = "Table";
table.unitPrice = 500;
table.discountCodes = [
  { code: "SUMMER10", percentage: 0.1 },
  { code: "BFRI", percentage: 0.2 }
];

3. If the parent class has a constructor, then the child class will need to pass the constructor parameters using a function called super:

class Product {
  constructor(public name: string, public unitPrice: number) {
  }
}

interface DiscountCode {
  code: string;
  percentage: number;
}

class ProductWithDiscountCodes extends Product {
  constructor(public name: string, public unitPrice: number) {
    super(name, unitPrice);
  }
  discountCodes: DiscountCode[];
}

Abstract classes are a special type of class that can only be inherited from and not instantiated. They are declared with the abstract keyword, as in the following example:

1. We can define a base Product class as follows:

abstract class Product {
  name: string;
  unitPrice: number;
}

2. If we try to create an instance of this, the compiler will complain, as we would expect:

3. We can create a more specific usable class for food products by extending Product:

class Food extends Product {
  constructor(public bestBefore: Date) {
    super();
  }
}

4. Here, we are adding a bestBefore date in our Food class. We can then create an instance of Food, passing in the bestBefore date:

const bread = new Food(new Date(2019, 6, 1));

Abstract classes can have abstract methods that child classes must implement. Abstract methods are declared with the abstract keyword in front of them, as in the following example:

1. Let's add an abstract method to our base Product class:

abstract class Product {
  name: string;
  unitPrice: number;
  abstract delete(): void;
}

2. After we add the abstract method, the compiler immediately complains about our Food class because it doesn't implement the delete method:

3. So, let's fix this and implement the delete method:

class Food extends Product {
  deleted: boolean;
  
  constructor(public bestBefore: Date) {
    super();
  }
  
  delete() {
    this.deleted = false;
  }
}

So far, all our class properties and methods have automatically had the public access modifier. This means they are available to interact with class instances and child classes. We can explicitly set the public keyword on our class properties and methods immediately before the property or method name:

class OrderDetail {
  public product: Product;
  public quantity: number;

  public getTotal(discount: number): number {
    const priceWithoutDiscount = this.product.unitPrice * this.quantity;
    const discountAmount = priceWithoutDiscount * discount;
    return priceWithoutDiscount - discountAmount;
  }
}

As you might have guessed, there is another access modifier, called private, which allows the member to only be available to interact with inside the class and not on class instances or child classes.

Let's look at an example:

1. Let's add a delete method in our OrderDetail class, which sets a private deleted property:

class OrderDetail {
  public product: Product;
  public quantity: number;
  private deleted: boolean;

  public delete(): void {
    this.deleted = true;
  }
  ...
}

2. Let's create an instance of OrderDetail and try to access the deleted property:

const orderDetail = new OrderDetail();
orderDetail.deleted = true;

As expected, the compiler complains:

There is a third access modifier, protected, which allows the member to be available to interact with inside the class and on child classes, but not on class instances.

Our classes so far have had simple property declarations. However, for more complex scenarios, we can implement a property with a getter and a setter. When implementing getters and setters, generally, you'll need a private property to hold the property value:

• getter is a function with the property name and the get keyword at the beginning and no parameters. Generally, this will return the value of the associated private property.
• setter is a function with the same name with the set keyword at the beginning and a single parameter for the value. This will set the value of the associated private property.
• The private property is commonly named the same as the getter and setter with an underscore in front.

Let's take a look at an example:

1. Let's create getters and setters for the unitPrice property in our Product class. The setter ensures the value is not less than 0. The getter ensures null or undefined is never returned:

class Product {
  name: string;

  private _unitPrice: number;
  get unitPrice(): number {
    return this._unitPrice || 0;
  }
  set unitPrice(value: number) {
    if (value < 0) {
      value = 0;
    }
    this._unitPrice = value;
  }
}

2. Let's consume the Product class and try this out:

const table = new Product();
table.name = "Table";
console.log(table.unitPrice); 
table.unitPrice = -10;
console.log(table.unitPrice); 

If we run this, we should see two 0's in the console.

Static properties and methods are held in the class itself and not in class instances. They can be declared using the static keyword before the property or method name.

Let's look at the following example:

1. Let's make the getTotal method static on the OrderDetail class we have been using:

class OrderDetail {
  product: Product;
  quantity: number;

  static getTotal(discount: number): number {
    const priceWithoutDiscount = this.product.unitPrice * this.quantity;
    const discountAmount = priceWithoutDiscount * discount;
    return priceWithoutDiscount - discountAmount;
  }
}

2. We get compilation errors where we try to reference the properties on the class. This is because the static method isn't in the class instance and therefore can't access these properties:

3. To make the static method work, we can move its dependencies on the class instance to parameters in the function:

static getTotal(unitPrice: number, quantity: number, discount: number): number {
  const priceWithoutDiscount = unitPrice * quantity;
  const discountAmount = priceWithoutDiscount * discount;
  return priceWithoutDiscount - discountAmount;
}

4. We can now call the static method on the class type itself, passing in all the parameter values:

const total = OrderDetail.getTotal(500, 2, 0.1);
console.log(total);

If we run the preceding program, we should get an output of 900 in the console.