Typescript: Getting Started with Interfaces

8 Oct 2021 By Henri Parviainen

Typescript interfaces

Interfaces are Typescript object types.

This means that in Typescript we can create interfaces to represent certain types of objects.

Let's say we have a function that takes a car object as a parameter and then returns the cars manufacturer:

const printCarManufacturer = (car: {
  color: string
  manufacturer: string
  model: string
}) => {
  console.log(car.manufacturer)
}

let carForSale = { color: "blue", manufacturer: "BMW", model: "X5" }

printCarManufacturer(carForSale)

Typescript checks the function's parameter and it needs to be an object with 3 properties: color (string), manufacturer (string), and model (string).

We can simplify this by creating an inteface for a car object:

interface Car {
  color: string
  manufacturer: string
  model: string
}

const printCarManufacturer = (car: Car) => {
  console.log(car.manufacturer)
}

let carForSale = { color: "blue", manufacturer: "BMW", model: "X5" }

printCarManufacturer(carForSale)

Now we can use this interface every time we need an object that represents a car.

Using optional properties

We can also set optional properties for the interface if we need to.

Let's update the interface so we can demonstrate this.

interface Car {
  color: string
  manufacturer: string
  model: string
  price?: number
}

Now we have added price property in our interface.

Notice that there is a ? at the end of the property name.

By using a ? at the end of a property name we can set it to be an optional property.

This means that the car object now can have a price, but it's optional.

interface Car {
  color: string
  manufacturer: string
  model: string
  price?: number
}

const printCarData = (car: Car) => {
  console.log(car)
}

let carForSale = {
  color: "red",
  manufacturer: "Ferrari",
  model: "Spyder",
  price: 100000,
}

printCarData(carForSale)

// Expected output: { color: "red", manufacturer: "Ferrari", model: "Spyder", price: 1000 }

let carNotForSale = { color: "red", manufacturer: "Ferrari", model: "Spyder" }

printCarData(carNotForSale)

// Expected output: { color: "red", manufacturer: "Ferrari", model: "Spyder" }

Using readonly properties

Another thing you can do with interface properties is to mark them as readonly.

Here's how it works.

interface Car {
  readonly color: string
  manufacturer: string
  model: string
  price?: number
}

let carForSale = { color: "red", manufacturer: "Ferrari", model: "Spyder" }

const printCarColor = (car: Car) => {
  // We can read the color property just fine.
  console.log(car.color)
}

printCarColor(carForSale)

// Prints "red"

const changeColor = (car: Car) => {
  // But we can't reassign it.
  car.color = "black"
}

changeColor(carForSale)

// Cannot assign to 'color' because it is a read-only property.

It's good to know that in Typescript readonly modifier does not make the property totally immutable.

Although we cannot rewrite the actual property in readonly properties, we can still update its content.

Let's look at an example to make this more clear:

interface Car {
  color: string
  manufacturer: string
  readonly model: { year: number; modelName: string }
  price?: number
}

const carForSale = {
  color: "red",
  manufacturer: "Mercedes",
  model: { year: 2018, modelName: "GLK" },
}

const updateModelYear = (car: Car) => {
  // This still works.
  // You can update readonly properties as long as you dont reassign it's value.
  car.model.year = 2020
  console.log(car.model.year)
}

updateModelYear(carForSale)

// Prints 2020

That's about it for this tutorial. Now you should be able to comfortably start using interfaces in your Typescript code.

Typescript: Getting Started with Interfaces

Using optional properties

Using readonly properties

SHARE

About

Topics

Social