---
title: Bitovi Academy - Interfaces
description: Learn how to write Interfaces, set optional properties, and use interfaces in classes and functions.
---

- ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg)
  
  [AI implementation](https://www.bitovi.com/services/ai-consulting?hsLang=en-us)
- ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg)
  
  [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting?hsLang=en-us)
- ![Project management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg)
  
  [Project management](https://www.bitovi.com/services/agile-project-management-consulting?hsLang=en-us)
- ![Product design](https://www.bitovi.com/hubfs/icon%20-%20design.svg)
  
  [Product design](https://www.bitovi.com/services/product-design-consulting?hsLang=en-us)
- ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg)
  
  [Frontend development](https://www.bitovi.com/services/frontend-development-consulting?hsLang=en-us)
- [View more
  
  →
  
  ](https://www.bitovi.com/digital-consulting-services?hsLang=en-us)

We're Experts in...

- [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting?hsLang=en-us)
- [AI training](https://www.bitovi.com/ai-training-for-software-engineers?hsLang=en-us)
- [Angular](https://www.bitovi.com/services/frontend/angular-consulting?hsLang=en-us)
- [Design Systems](https://www.bitovi.com/services/axure-figma-migration?hsLang=en-us)
- [React](https://www.bitovi.com/services/frontend/react-consulting?hsLang=en-us)
- [Temporal](https://www.bitovi.com/services/backend/temporal-consulting?hsLang=en-us)
- [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native?hsLang=en-us)
- [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting-1?hsLang=en-us)

Showcase

![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png)

[View case study](https://www.bitovi.com/en/bitovi-yum-case-study?hsLang=en-us)

More Projects

- [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign?hsLang=en-us)
- [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies)
- [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp?hsLang=en-us)
- [View more
  
  →
  
  ](https://www.bitovi.com/our-software-consulting-work?hsLang=en-us)

Open Source Tools

We build powerful tools and open source them to support the community.

[See what we've built →](https://www.bitovi.com/open-source?hsLang=en-us)

- [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg)
  
  BlogWe post about perfecting software delivery
  
  ](https://bitovi.com/blog)
- [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg)
  
  PartnershipsLearn about Bitovi's technology partners
  
  ](https://www.bitovi.com/partnerships?hsLang=en-us)
- [![Academy](https://www.bitovi.com/hubfs/limbo/icons/icon-academy.svg)
  
  AcademyFree courses to build delivery skills
  
  ](https://www.bitovi.com/academy/?hsLang=en-us)
- [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg)
  
  Open source toolsUse our tools or contribute to our open source mission.
  
  ](https://www.bitovi.com/open-source?hsLang=en-us)

Let's Connect

- [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg)
  
  Discord
  
  ](https://discord.gg/J7ejFsZnJ4)
- [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg)
  
  LinkedIn
  
  ](https://www.linkedin.com/company/bitovi/)
- [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg)
  
  GitHub
  
  ](https://github.com/bitovi/)

![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png)

Name *

Work Email *

Phone

What's your project?

Send

### Contact Us

(312) 620-0386contact@bitovi.com

- [ Advanced JavaScript ](https://www.bitovi.com/academy/learn-advanced-javascript.html?hsLang=en-us)
- [ DOM and jQuery ](https://www.bitovi.com/academy/learn-dom-jquery.html?hsLang=en-us)
- [ Debug JavaScript ](https://www.bitovi.com/academy/learn-to-debug-javascript.html?hsLang=en-us)
- [ Learn TypeScript ](https://www.bitovi.com/academy/learn-typescript.html?hsLang=en-us) 
    - [ Why TypeScript ](https://www.bitovi.com/academy/learn-typescript/why-typescript.html?hsLang=en-us)
    - [ IDE Support ](https://www.bitovi.com/academy/learn-typescript/ide-support.html?hsLang=en-us)
    - [ Setting Up Your Environment ](https://www.bitovi.com/academy/learn-typescript/setting-up-your-environment.html?hsLang=en-us)
    - [ Modules ](https://www.bitovi.com/academy/learn-typescript/modules.html?hsLang=en-us)
    - [ Types ](https://www.bitovi.com/academy/learn-typescript/types.html?hsLang=en-us)
    - [ Functions ](https://www.bitovi.com/academy/learn-typescript/functions.html?hsLang=en-us)
    - [ Classes ](https://www.bitovi.com/academy/learn-typescript/classes.html?hsLang=en-us)
    - [ Interfaces ](https://www.bitovi.com/academy/learn-typescript/interfaces.html?hsLang=en-us)
    - [ Keyof and Typeof ](https://www.bitovi.com/academy/learn-typescript/keyof-typeof.html?hsLang=en-us)
    - [ Generics ](https://www.bitovi.com/academy/learn-typescript/generics.html?hsLang=en-us)
    - [ Utility Types ](https://www.bitovi.com/academy/learn-typescript/utility-types.html?hsLang=en-us)
- [ Learn React Native ](https://www.bitovi.com/academy/learn-react-native.html?hsLang=en-us)
- [ Learn Web Components ](https://www.bitovi.com/academy/learn-web-components.html?hsLang=en-us)
- [ Agile Program Management With Jira ](https://www.bitovi.com/academy/learn-agile-program-management-with-jira.html?hsLang=en-us)
- [ Learn RxJS ](https://www.bitovi.com/academy/learn-rxjs.html?hsLang=en-us)
- [ Giving a Training ](https://www.bitovi.com/academy/training.html?hsLang=en-us)
- [ Learn Technology Consulting ](https://www.bitovi.com/academy/learn-technology-consulting.html?hsLang=en-us)
- [ Learn React ](https://www.bitovi.com/academy/learn-react.html?hsLang=en-us)
- [ Learn NgRx ](https://www.bitovi.com/academy/learn-ngrx.html?hsLang=en-us)
- [ Learn Graphql ](https://www.bitovi.com/academy/learn-graphql.html?hsLang=en-us)
- [ Learn Docker ](https://www.bitovi.com/academy/learn-docker.html?hsLang=en-us)
- [ Learn CanJS ](https://www.bitovi.com/academy/learn-canjs.html?hsLang=en-us)
- [ Learn Angular ](https://www.bitovi.com/academy/learn-angular.html?hsLang=en-us)
- [ Advanced TypeScript ](https://www.bitovi.com/academy/advanced-typescript.html?hsLang=en-us)

[View More Courses](https://www.bitovi.com/academy/#courses) [ ]

# Interfaces `page`

Learn how to write Interfaces, set optional properties, and use interfaces in classes and functions.

## Overview

In this section, you will:

- Write interfaces.
- Set optional properties.
- Use the power of interfaces in classes and functions.

## Objective 1: Define interfaces for objects

Interfaces are a powerful way to enforce types and document what our code provides. Interfaces used in classes allow "loose coupling" while providing a shape. Multiple classes can use interfaces in many different ways. This section will cover how to write interfaces, setting optional properties, and the power of using interfaces in classes and functions.

### Interfaces in TypeScript

An interface in TypeScript is a way to define the shape an entity should adhere to. An interface defines the members: properties, methods, and events. It may be easy to think of it as the signature of an API. It’s worth noting that interfaces aren’t transpiled into our output JavaScript; they’re only used for type-checking during the development process.

```
// Interface describing object
interface Dinosaur {
  name: string;
  breed: string;
  height: number;
  location: string;
}

// Function with interface describing parameter
function trackDino(dino: Dinosaur) {
  console.info(dino.location);
}

const blue = {
  name: "blue",
  breed: "Velociraptor",
  height: 7,
  location: "Section B",
};
trackDino(blue);
// Logs "Section B"

```

### Interfaces in function parameters

Interfaces are incredibly useful in describing the shape of objects we want to use in multiple situations. The following functions both require a `Dinosaur` object shape we’ve defined in the `Dinosaur` interface.

```
interface Dinosaur {
  name: string;
  breed: string;
  location: string;
}

const dinoA = {
  name: "Blue",
  breed: "Velociraptor",
  location: "Section B",
};

const dinoB = {
  name: "Sally",
  location: "Section C",
};

function dinoCatcher(dinosaur: Dinosaur) {
  console.info(`Caught ${dinosaur.name} at ${dinosaur.location}`);
}

dinoCatcher(dinoA);
// Works!

dinoCatcher(dinoB);
// Error: Argument of type '{ name: string; location: string; }' is not assignable to parameter of type 'Dinosaur'.
// Property 'breed' is missing in type '{ name: string; location: string; }'.

```

### Optional properties

Sometimes all properties on an object don’t need to be required, so using the `?` tells the TypeScript compiler which properties aren’t required.

```
interface Dinosaur {
  name: string;
  breed: string;
  height?: number;
  location: string;
}

function trackDino(dino: Dinosaur) {
  console.info(dino.location);
}

const blue = {
  name: "blue",
  breed: "Velociraptor",
  location: "Section B",
};
// Works
trackDino(blue);
// Logs "Section B"

```

### Classes implementing interfaces

In the case that a class needs to follow an object structure, we can use interfaces to define that 'contract'.

```
interface Dinosaur {
  name: string;
  breed: string;
  height?: number;
  location: string;
}

class DinoWithRoar implements Dinosaur {
  name: string;
  breed: string;
  height?: number;
  location: string;
  roar(): void {
    console.info("roar");
  }
}

```

### Setup 1

✏️ Create **src/interfaces/address.ts** and update it to be:

```
interface Address {}

export default Address;
```

✏️ Create **src/interfaces/dinoPark.ts** and update it to be:

```
import Address from "./address";

interface DinoPark {}

export default DinoPark;
```

### Verify 1

✏️ Create **src/interfaces/address.test.ts** and update it to be:

```
import assert from "node:assert/strict";
import { describe, it } from "node:test";
import type Address from "./address";

describe("Interfaces", () => {
  function checkAddress(address: Address) {
    var keys = Object.keys(address);
    assert.deepEqual(keys, ["street", "city", "state", "zip"]);
  }

  it("Address", () => {
    checkAddress({
      street: "123 Main",
      city: "Sandusky",
      state: "Ohio",
      zip: "12345",
    });
  });
});

```

✏️ Create **src/interfaces/dinoPark.test.ts** and update it to be:

```
import assert from "node:assert/strict";
import { describe, it } from "node:test";
import type DinoPark from "./dinoPark";
import type Address from "./address";

describe("Interfaces", () => {
  function checkAddress(address: Address) {
    var keys = Object.keys(address);
    assert.deepEqual(keys, ["street", "city", "state", "zip"]);
  }

  it("DinoPark", () => {
    function checkFullDinoPark(dinoPark: DinoPark) {
      var keys = Object.keys(dinoPark);
      assert.deepEqual(keys, ["name", "image", "address"], "has an image");
      checkAddress(dinoPark.address);
    }

    checkFullDinoPark({
      name: "Isla Sorna Park",
      image: "http://dino.com/pic.jpg",
      address: {
        street: "123 Main",
        city: "Sandusky",
        state: "Ohio",
        zip: "12345",
      },
    });

    function checkPartialDinoPark(dinoPark: DinoPark) {
      var keys = Object.keys(dinoPark);
      assert.deepEqual(keys, ["name", "address"], "optional image");
      checkAddress(dinoPark.address);
    }
    checkPartialDinoPark({
      name: "Isla Sorna Park",
      address: {
        street: "123 Main",
        city: "Sandusky",
        state: "Ohio",
        zip: "12345",
      },
    });
  });
});

```

### Exercise 1

We’re going to write some interfaces to set up for the next problem. Edit the files `address.ts` and `dinoPark.ts` to create an interface to define an `Address` and `DinoPark` object shown below:

```
const address = {
  street: "",
  city: "",
  state: "",
  zip: "",
};

const park = {
  name: "",
  image: "",
  address: {
    street: "",
    city: "",
    state: "",
    zip: "",
  },
};
```

Hint: the interface should have properties and types:

- `name` (string)
- `image` (string) (optional)
- `address` 
    - `street` (string)
    - `city` (string)
    - `state`(string)
    - `zip` (string)

**Have issues with your local setup?** You can use either [StackBlitz](https://stackblitz.com/fork/github/bitovi/academy/tree/main/exercises/typescript/09-interfaces/01-problem?file=src/address.ts) or [CodeSandbox](https://codesandbox.io/p/devbox/github/bitovi/academy/tree/main/exercises/typescript/09-interfaces/01-problem?file=src/address.ts) to do this exercise in an online code editor.

### Solution 1

If you’ve implemented the solution correctly, the tests will pass when you run `npm run test`!

Click to see the solution

✏️ Update **src/interfaces/address.ts** to be:

```
interface Address {
  street: string;
  city: string;
  state: string;
  zip: string
}

export default Address;
```

✏️ Update **src/interfaces/dinoPark.ts** to be:

```
import Address from "./address";

interface DinoPark {
  name: string;
  image?: string;
  address: Address;
}

export default DinoPark;
```

**Have issues with your local setup?** See the solution in [StackBlitz](https://stackblitz.com/fork/github/bitovi/academy/tree/main/exercises/typescript/09-interfaces/01-solution?file=src/interfaces/address.ts) or [CodeSandbox](https://codesandbox.io/p/devbox/github/bitovi/academy/tree/main/exercises/typescript/09-interfaces/01-solution?file=src/interfaces/address.ts).

Make sure you have this solution implemented correctly before moving on to the next exercise.

## Objective 2: Define interfaces for functions

### Interfaces describing functions

We can also use interfaces to describe functions, basically creating reusable types for functions. On the left side (in parenthesis) we list the parameters, and to the right of the colon, we state the return type.

```
interface DinoDNAMixer {
  (dino1: string, dino2: string, spliceIdx: number): string;
}

const dinoMaker: DinoDNAMixer = (dino1, dino2, spliceIdx) => {
  return dino1.substring(spliceIdx) + dino2.substring(spliceIdx);
};

const newDino = dinoMaker("CGGCAD", "ACGCAA", 3);
console.info(newDino); // Logs 'CADCAA'

```

It’s possible to use the `type` keyword as an interface to describe a function.

```
type DinoDNAMixer = (dino1: string, dino2: string, spliceIdx: number) => string;

const dinoMaker: DinoDNAMixer = (dino1, dino2, spliceIdx) => {
  return dino1.substring(spliceIdx) + dino2.substring(spliceIdx);
};

const newDino = dinoMaker("CGGCAD", "ACGCAA", 3);
console.info(newDino); // Logs 'CADCAA'

```

### Setup 2

✏️ Create **src/interfaces/slug.ts** and update it to be:

```

export default function createParkSlug(dinoPark) {
  return dinoPark.name.toLowerCase().replace(/ /g, '-');
}
```

### Verify 2

✏️ Create **src/interfaces/slug.test.ts** and update it to be:

```
import assert from "node:assert/strict";
import { describe, it } from "node:test";
import { createParkSlug } from "./slug";

describe("Interfaces", () => {
  it("createParkSlug", function () {
    const result = createParkSlug({
      name: "Isla Sorna Park",
      address: {
        street: "123 Main",
        city: "Sandusky",
        state: "Ohio",
        zip: "12345",
      },
    });
    assert.equal(result, "isla-sorna-park", "slug works");
  });
});

```

### Exercise 2

In the `slug.ts` file, edit the `createParkSlug` function to take a parameter that is the interface `DinoPark` created previously and returns a slug for the park by replacing any spaces with dashes. Example: the park `Isla Sorna Park` should return the slug `Isla-Sorna-Park`.

**Have issues with your local setup?** You can use either [StackBlitz](https://stackblitz.com/fork/github/bitovi/academy/tree/main/exercises/typescript/09-interfaces/02-problem?file=src/interfaces/slug.ts) or [CodeSandbox](https://codesandbox.io/p/devbox/github/bitovi/academy/tree/main/exercises/typescript/09-interfaces/02-problem?file=src/interfaces/slug.ts) to do this exercise in an online code editor.

### Solution 2

If you’ve implemented the solution correctly, the tests will pass when you run `npm run test`!

Click to see the solution

✏️ Update **src/interfaces/slug.ts** to be:

```
import DinoPark from "./dinoPark";

export function createParkSlug(dinoPark: DinoPark) {
  return dinoPark.name.toLowerCase().replace(/ /g, '-');
}
```

**Have issues with your local setup?** See the solution in [StackBlitz](https://stackblitz.com/fork/github/bitovi/academy/tree/main/exercises/typescript/09-interfaces/02-solution?file=src/interfaces/slug.ts) or [CodeSandbox](https://codesandbox.io/p/devbox/github/bitovi/academy/tree/main/exercises/typescript/09-interfaces/02-solution?file=src/interfaces/slug.ts).

## Next steps

Next, let’s take a look at [keyof and typeof](https://www.bitovi.com/academy/learn-typescript/keyof-typeof.html?hsLang=en-us) to create new types from types.

###### On this page...

###### Get help

If you need [help](https://discord.gg/J7ejFsZnJ4) with an exercise, please reach out to us on [Discord](https://discord.gg/J7ejFsZnJ4)

If you find a bug, please [create an issue](https://github.com/bitovi/academy/issues/new) or email [contact@bitovi.com](mailto:contact@bitovi.com?Subject=Training%20Suggestion)

## Join the Bitovi Newsletter

 Do you want to receive updates about new Bitovi Academy courses, Bitovi open source projects, and dev community news? If so, please provide your email. We won’t spam you or give it away for any reason!  
*By providing your email you agree to receive communications from Bitovi*

![](https://bitovi.github.io/academy/static/img/close.svg)

```json
{
     "@context": "http://schema.org",
     "@type": "Organization",
     "mainEntityOfPage":{
          "@type":"WebPage",
          "@id":"https://www.bitovi.com/academy/learn-typescript/interfaces.html",
          "description": "Learn how to write Interfaces, set optional properties, and use interfaces in classes and functions. 
"
     },
     "url": "http://bitovi.com",
     "logo": "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg",
     "image": "https://www.bitovi.com/hubfs/bitovi-logo-x2.png",
     "name": "Bitovi Web App Consulting",
     "alternateName": "Bitovi",
      "naics": "541511",
      "description": "Bitovi is a UX, UI design and front-end JavaScript development consulting company",
     "address": {
          "@type": "PostalAddress",
          "streetAddress": "1134 Pine Tree Lane ",
          "addressLocality": "Libertyville",
          "addressRegion": "IL",
          "addressCountry": "United States",
          "postalCode": "60048"
     },
     "areaServed": {
          "@type": "GeoCircle",
          "geoMidpoint": {
               "@type": "GeoCoordinates",
               "latitude": "41.8781",
               "longitude": "87.6298"
          },
          "geoRadius": "5000 km"
     },
     "telephone": "312-620-0386",
     "email": "contact@bitovi.com",
     "sameAs": [
          "https://www.facebook.com/BitoviLLC/",
          "https://twitter.com/bitovi",
          "https://www.linkedin.com/company/bitovi"
     ]
}
```