Understanding interfaces in TypeScript

Kenny DuMez
Kenny DuMez
Graphite software engineer

Interfaces are a powerful feature in TypeScript, essential for building extensible, maintainable, and scalable applications. They help define the shape of objects, enforce consistent structures, and support the application's architecture by providing a contract for what properties and methods should be implemented. This guide will explore interfaces in TypeScript, examining their syntax, use cases, and how they compare to other constructs like classes and types.

An interface in TypeScript is a way to define a contract in your code. It specifies the shape that a particular object should conform to. Interfaces can include properties and method definitions but do not contain implementation details. They are purely for declaration purposes, which means that they are used by TypeScript only at compile time and do not result in any JavaScript output.

Terminal
interface Person {
name: string
age: number
}

This Person interface requires any object that conforms to it to have both a name and an age property, both of which are strings.

While both interface and type can be used to define the structure of an object or a function signature, they have some differences:

  • Interfaces are open-ended and can be extended by other interfaces or merged with new declarations.
  • Types can use a union or tuple, and cannot be reopened to add new properties; they are closed.

For example, to an extend an interface you can use the extends syntax:

Terminal
interface Employee extends Person {
jobTitle: string
}
let employee: Employee = {
name: 'John Doe',
age: 30,
jobTitle: 'Developer'
}

This creates a new interface Employee that extends the Person interface we created above.

Interfaces in TypeScript can extend one or more other interfaces, enabling a level of polymorphism and code reuse. This feature is particularly useful for building complex types out of simpler ones.

Terminal
interface Contact {
email: string
}
interface Customer extends Person, Contact {
customerId: number
}

In this example, Customer extends two discrete interfaces, combining the properties of Person and Contact.

Interfaces themselves do not hold default values in TypeScript; they are strictly for typing. To emulate default values, you might use classes or function parameters with defaults.

To convert JSON data structures to TypeScript interfaces, tools and utilities like online JSON-to-TypeScript converters can automatically generate the corresponding TypeScript interfaces from a JSON object, ensuring that data interactions are type-safe.

For more information see this guide on converting JSON to TypeScript.

Interfaces can also describe functions by defining the function's signature:

Terminal
interface SearchFunc {
(source: string, subString: string): boolean
}
let mySearch: SearchFunc
mySearch = function (src, sub) {
return src.search(sub) > -1
}

This interface ensures that any function assigned to mySearch has the correct type, number of parameters, and the correct return type.

To use an interface across different modules in a TypeScript project, you can export it from one module and import it into another:

Terminal
// in person.ts
export interface Person {
name: string
age: number
}
// in employee.ts
import { Person } from './person'
interface Employee extends Person {
jobTitle: string
}

This allows interfaces to be used across various parts of your project without the need to redefine them.

While an interface defines a type in a purely abstract way, a class can implement interfaces while providing an implementation. Classes support instantiation, whereas interfaces do not.

Terminal
interface ClockInterface {
currentTime: Date
setTime(d: Date): void
}
class Clock implements ClockInterface {
currentTime: Date = new Date()
setTime(d: Date) {
this.currentTime = d
}
}

This example defines an interface ClockInterface with a property and a method for managing time, and a class Clock that implements this interface by setting and updating the current time.

For further reading on TypeScript interfaces, see the official TypeScript documentation.

Git inspired
Graphite's CLI and VS Code extension make working with Git effortless.
Learn more

Graphite
Git stacked on GitHub

Stacked pull requests are easier to read, easier to write, and easier to manage.
Teams that stack ship better software, faster.

Or install our CLI.
Product Screenshot 1
Product Screenshot 2