A Simple Guide to Typescript Interfaces: declaration & use cases

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 an abstract type that tells the compiler which property names a given object can have. TypeScript creates implicit interfaces when you define an object with properties. It starts by looking at the object’s property name and data type using TypeScript’s type inference abilities.

Today, 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.

Optional Properties#

In the previous code sample, all properties in the interface are required. If we create a new object with that interface and we leave out a property, the TypeScript compiler will throw an error.

There are certain cases, however, where we would expect our objects to have properties that are optional. We can achieve this by placing a question mark (?) just before the property’s type annotation when declaring the interface:

interface Post {
  title: string;
  content: string;
  tags?: string[];
}

In this particular scenario, we tell the compiler that it is possible to have Post objects without tags.

It is very useful to describe interfaces in this way, especially if you want to prevent the use of properties not included in the interface.

const validPostObj: Post {
  title: 'Post title',
  content: 'Some content for our post',
};

const invalidPostObj: Post = {
  title: 'Invalid post',
  content: 'Hello',
  meta: 'post description', // this will throw an error
  /* Type '{ title: string; content: string; meta: string; }' is not assignable to type 'Post'.

    Object literal may only specify known properties, and 'meta' does not exist in type 'Post'.
  */
};

Read-only properties#

It is also possible to mark a property in an interface as read-only. We can do this by adding the readonly keyword before a property’s key:

interface FulfilledOrder {
  itemsInOrder: number;
  totalCost: number;
  readonly dateCreated: Date;
}

A read-only property can only be modified when an object is first created. That means if you try to reassign its value, the compiler will throw an error.

const order: FulfilledOrder = {
 itemsInOrder: 1,
 totalCost: 199.99,
 dateCreated: new Date(),
};

order.dateCreated = new Date(2021, 10, 29);

This behavior is similar to what happens when you try to reassign the value of a variable declared with the const keyword in JavaScript.

Function and Class types#

Interfaces can also be used to describe function types, and to check the structure of JavaScript classes.

To describe a function type with an interface, we give the interface a call signature. This is like a function declaration with only the parameter list and return type given.

interface SumFunc {
  (a: number, b: number): number;
}

const add: SumFunc = (a, b) => {
  return a + b;
}

Note: We did not need to specify the parameter type when creating our function.

The names of the parameters in your function and function type do not need to match. The compiler only checks the types of your function parameters, one at a time, in each corresponding parameter position.

We can also use interfaces to properly type classes created in JavaScript. To achieve this, we create an interface that contains the class’ properties and methods, then we use the implements keyword when creating our class.

interface CarInterface {
  model: string;
  year: string;
  getUnitsSold(): number;
}

class Car implements CarInterface {
  model: string;
  year: string;
  getUnitsSold() {
    // logic to return number of units sold
    return 100;
  }

  constructor(model: string, year: string) {
    this.model = model;
    this.year = year;
  }
}

Note: Our interfaces describe the public side of the class rather than both the public and private side.

Generic Interfaces#

Sometimes you might not know the type of data that each property in your interface would contain. The easy solution would be to just add the any type to such properties. However, doing so would make our code less type-safe.

TypeScript lets you compose generic interfaces to help with scenarios like these. Generic interfaces are written like normal interfaces, but they allow you to set one or more parameters that can be included in the interface’s definition.

These parameters can be replaced with a type or another interface later in your code.

We can create a generic interface by passing type parameters, using angle brackets (<>), to our interface.

interface PaginatedResponse<T> {
 data: T[];
 nextPageUrl?: string;
 previousPageUrl?: string;
}

interface Post {
 title: string;
 content: string;
 tags?: string[];
}

function loadDataFromApi() {
 fetch('/some/api/endpoint')
   .then((response) => response.json())
   .then((data: PaginatedResponse<Post>) => console.log(data));
}

The above example creates the PaginatedResponse interface that we can reuse to type the data returned from an API source. This can be reused across your code for different API resources with the same basic structure.

Indexable Types#

Akin to how interfaces are utilized to define certain function types, you can also describe types that can be indexed into. Indexable types each have a unique “index signature” that expresses the types we can use to register into the object, along with the matching returns when indexing. Take the code example of indexable types below:

interface StringArray {
  [index: number]: string;
}
 
let myArray: StringArray;
myArray = ["Joe", "Matt"];
 
let myStr: string = myArray[0];

Generally, there are four types of supported index signatures: string, number, symbol, and template strings. It is achievable to support a variety of indexers, but the type returned from a numeric indexer must be a subset of the type originally returned from the string indexer.

What to learn next#

Congratulations on making it to the end! Interfaces are a powerful tool that make errors easier to detect at compile-time. TypeScript is a powerful tool that makes complex JavaScript projects easier. In fact, TypeScript brings many other features to help you write maintainable and reusable code.

Some of these features that you should learn next include:

• Utility Types
• Union and Intersection Types
• Enums
• Type Guards
• Type Aliases

To learn these tools and advance your TypeScript skills, check out Educative’s curated learning path TypeScript for Front-End Developers. This path will allow you to painlessly transition your JavaScript experience to TypeScript. By the end, you’ll know how to use advanced TypeScript in professional projects.

Whether you’re new to TypeScript or looking to advance your skills, this is your one-stop-Typescript-shop.

Happy learning!

Continue reading about TypeScript#

• Understanding Advanced Concepts in Typescript
• Getting started with React and TypeScript
• TypeScript Tutorial: a step-by-step guide to learn Typescript