Search⌘ K
AI Features
Home
Courses
Using TypeScript with React

Creating generic interfaces

Explore creating generic interfaces in TypeScript to define flexible and type-safe structures, such as forms with varying fields and validation errors in React applications. Understand how to apply generics to interfaces for better code maintainability and error prevention.

We'll cover the following...

Generic interface syntax

We can pass types into an interface that are used within its definition like we can to a function. The syntax for a generic interface is below:

interface InterfaceName<T1, T2, ...> {
    ...
}

The members of the interface can reference the generic types passed into it.

Generic interface example

A common use case for a generic interface is a generic form interface. This is because all forms have values, default values, validation rules, etc. but the specific fields differ from form to form.

Below is a simple generic form interface:

interface Form<T> {
  values:
...