Generic Interfaces

Part of the Introduction To TypeScript section of Coddy's JavaScript journey — lesson 61 of 73.

Just as you can create generic functions, you can also create generic interfaces. This allows you to define the shape of an object while keeping certain property types flexible and reusable.

Here's how you create a generic interface using the same type parameter syntax:

interface Container {
  value: T;
  isEmpty: boolean;
}

The <T> after the interface name creates a type parameter that can be used throughout the interface definition. In this example, the value property will have whatever type you specify when using the interface, while isEmpty remains a fixed boolean type.

When you use a generic interface, you specify the concrete type in angle brackets:

const stringContainer: Container = {
  value: "hello",
  isEmpty: false
};

const numberContainer: Container = {
  value: 42,
  isEmpty: false
};

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Challenge

Easy

Create a generic interface named Result that can hold data of any type along with success information.

The interface should have two properties:

success of type boolean
data of type T (the generic type parameter)

Create the following objects using your generic interface:

stringResult of type Result<string> with success: true and data: "Operation completed"
numberResult of type Result<number> with success: true and data: 42
booleanResult of type Result<boolean> with success: false and data: false
arrayResult of type Result<string[]> with success: true and data: ["item1", "item2", "item3"]

Create a generic function named processResult that:

Uses a generic type parameter T
Takes one parameter result of type Result<T>
Returns a string message
If success is true, returns "Success: [data]"
If success is false, returns "Failed: [data]"

Print the following outputs:

Print the result of calling processResult with stringResult
Print the result of calling processResult with numberResult
Print the result of calling processResult with booleanResult
Print the result of calling processResult with arrayResult
Print stringResult.data

Cheat sheet

Generic interfaces allow you to define the shape of an object while keeping certain property types flexible and reusable.

Create a generic interface using type parameter syntax:

interface Container<T> {
  value: T;
  isEmpty: boolean;
}

The <T> after the interface name creates a type parameter that can be used throughout the interface definition.

Use a generic interface by specifying the concrete type in angle brackets:

const stringContainer: Container<string> = {
  value: "hello",
  isEmpty: false
};

const numberContainer: Container<number> = {
  value: 42,
  isEmpty: false
};

Try it yourself

// TODO: Write your code here

// Create the generic Result interface


// Create the objects using the Result interface


// Create the generic processResult function


// Print the required outputs

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Generic Interfaces

Cheat sheet

All lessons in Introduction To TypeScript