Implementing generic parameter constraints

It is possible to require generic parameters to have a particular structure. We'll learn how to do this in this lesson.

Parameter constraint syntax

The syntax for a parameter constraint is to put the type that the parameter must be compatible with after the extends keyword:

Copy
<T extends ContrainingType>

A simple example

We are going to explore default generic parameter contraints in an exercise.

Open exercise in CodeSandbox

The code contains an interface and a generic function.

• Add a constraint to the generic parameter in logItems to ensure it has the same structure as the Logable interface.

The type error will now disappear.

Neat!

• Copy the code from below into the editor:

Copy
const heading = {
  name: "Heading",
  props: { text: "Chapter 1" },
  log: () => console.log("Chapter 1 heading"),
};
const button = {
  name: "Button",
  props: { text: "Save" },
  trace: () => console.log("Save button"),
};
logItems([heading, button]);

This code invokes the logItems function with two objects.

• Update the button object to have a log method:

Copy
const button = {
  ...
  log: () => console.log("Save button")
};

The type error is resolved.

A more complex example

A parameter constraint can be dependent on another generic parameter. We are going to work through an example of this.

• Copy the code from below and paste it into the editor:

Copy
interface Form<T> {
  values: T;
}
function getFieldValue<T>(form: Form<T>, fieldName: string) {
  return form.values[fieldName];
}

• Update the getFieldValue as follows:

Copy
function getFieldValue<T, K extends keyof T>(
  ...
  fieldName: K
) {
  ...
}

We have added a second generic parameter called K. This has a constraint that requires it to be a property name (or key) from type T.

The TypeScript keyof keyword queries the keys of the type referenced after it.

We have also used K as a type annotation on the fieldName parameter.

The type error on getFieldValue is now resolved.

• Let's consume the getFieldValue function by copying the code from below and pasting it into the editor:

Copy
1const contactForm = {
2  values: {
3    name: "Bob",
4    email: "bob@someemail.com",
5  },
6};
7console.log(getFieldValue(contactForm, "name"));
8console.log(getFieldValue(contactForm, "phone"));

Good stuff!

Summary

Generic parameter constraints allow us to write more strongly-typed code and are particularly useful in functions and classes. This is because functions and classes contain implementation, and generic parameter constraints will enable us to force generic parameters to have a particular structure for use in the implementation code.

Next up is a quiz to test what we have learned.