Understanding interfaces in TypeScript

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.

Introduction to interfaces in TypeScript

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.

Basic syntax of an interface

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.

Key features of TypeScript interfaces

TypeScript interface vs type

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:

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.

TypeScript extend interface

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.

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.

TypeScript interface default value

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.

JSON to TypeScript interface

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.

TypeScript function interface

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

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.

TypeScript export interface

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

// 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.

TypeScript class vs interface

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.

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.