Search⌘ K
AI Features
Home
Courses
Learn TypeScript

A Simple Guide to Typescript Interfaces: Declaration & Use Cases

Explore how to declare and use TypeScript interfaces to define object properties, enforce type safety, and structure your code. Understand differences between interfaces and types, apply interfaces to classes, handle optional and readonly properties, use generic interfaces for flexible data shapes, and extend interfaces. This lesson equips you to create maintainable and scalable TypeScript applications.

We'll cover the following...

TypeScript is a superset of JavaScript that introduces new features and helpful improvements to the language, including a powerful static typing system. By adding types to your code, you can spot or avoid errors early and get rid of errors at compilation.

In TypeScript, an interface is a way to describe the shape of an object. It specifies which properties an object is expected to have and the types of those properties. TypeScript uses type inference to infer object types from values in code, but interfaces must be explicitly declared by the developer.

In this guide, you will learn how to create and work with interfaces in TypeScript to help add improved functionality to your projects. We will introduce you to the concept in detail with use cases.

Declaring interfaces

An interface describes the shape of an object in TypeScript. They can be used to provide information about object property names and the datatypes their values can hold to the TypeScript compiler. An interface participates in TypeScript’s compile-time type checking for your functions, variables, or the class that is implementing the interface.

Interfaces ensure that values conform to the expected structure at compile time.

Interfaces can be explicitly described. They are not implicitly created by the compiler. We declare an interface using the interface keyword in a .ts file. The following example shows an example of the syntax:

interface Dimension {
    width: string;
    height: string;
}

Here, we defined an interface with the properties width and height that are both strings. Now we can implement the interface:

interface Dimension {
    width: string;
    height: string;
}
let _imagedim: Dimension = {
    width: "200px",
    height: "300px"
};

Let’s see another example. Here, we declare an interface named User with the interface keyword. The properties and methods that make up the interface are added within the curly brackets as key:value pairs, just like we add members to a plain JavaScript object.

interface User {
  id: number;
  firstName: string;
  lastName: string;
  getFullName(): string;
}

We can use our newly created interface in code by adding an annotation to relevant objects. For example, here’s how to create a new user object with the User interface:

const user: User = {
  id: 12,
  firstName: "Josh",
  lastName: "",
  getFullName: () => `${firstName} ${lastName}`
};

With this, our compiler knows what properties the user object is expected to have. If a property is missing, or if its value isn’t of the same type specified in the ...