Introduction to TypeScript Types vs Interfaces

TypeScript is a statically typed language that offers various ways to define the structure of objects, including types and interfaces. Understanding the difference between types and interfaces is essential in TypeScript development. In this tutorial, we will explore the concepts of types and interfaces in TypeScript, their differences, and when to use each.

Defining Types in TypeScript

In TypeScript, a type is a way to define the structure of a value, including the type of its properties and their relationships. You can use the type keyword to define a new type.

type Person = {
  name: string;
  age: number;
}
 
let person: Person = {
  name: 'John Doe',
  age: 30
}

In this example, we define a Person type with two properties: name and age. We then create a variable person of type Person and assign it an object with the required properties.

Defining Interfaces in TypeScript

An interface in TypeScript is similar to a type, but it is used to define a blueprint of a class or an object. You can use the interface keyword to define a new interface.

interface PersonInterface {
  name: string;
  age: number;
}
 
class PersonClass implements PersonInterface {
  name: string;
  age: number;
 
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

In this example, we define a PersonInterface with two properties: name and age. We then create a class PersonClass that implements the PersonInterface.

Key Differences Between Types and Interfaces

The key differences between types and interfaces in TypeScript are:

• Types are more flexible and can be used to define the structure of any value, while interfaces are used to define a blueprint of a class or an object.
• Types can be extended using the & operator, while interfaces can be extended using the extends keyword.
• Types can be used to define tuple types, while interfaces cannot.

type PersonType = {
  name: string;
  age: number;
}
 
type PersonTypeExtension = PersonType & {
  occupation: string;
}
 
interface PersonInterface {
  name: string;
  age: number;
}
 
interface PersonInterfaceExtension extends PersonInterface {
  occupation: string;
}

Using Types for Union Types

TypeScript types can be used to define union types, which allow a value to be one of multiple types.

type StringOrNumber = string | number;
 
let value: StringOrNumber = 'hello';
value = 42;

In this example, we define a StringOrNumber type that can be either a string or a number. We then create a variable value of type StringOrNumber and assign it a string value, followed by a numeric value.

Using Interfaces for Class Implementations

TypeScript interfaces are commonly used to define a blueprint of a class or an object.

interface Printable {
  print(): void;
}
 
class Document implements Printable {
  print(): void {
    console.log('Printing a document...');
  }
}
 
class Photo implements Printable {
  print(): void {
    console.log('Printing a photo...');
  }
}

In this example, we define a Printable interface with a print method. We then create two classes, Document and Photo, that implement the Printable interface.

Conclusion

In conclusion, TypeScript types and interfaces are both used to define the structure of objects, but they have different use cases. Types are more flexible and can be used to define the structure of any value, while interfaces are used to define a blueprint of a class or an object. Understanding the differences between types and interfaces is essential in TypeScript development, and using them correctly can help you write more robust and maintainable code.