Search⌘ K
AI Features
Home
Courses
Using TypeScript for Building Polymorphic React Components

Constraining Generics

Understand how to constrain TypeScript generics with the extends keyword to ensure only types with specific properties are accepted. This lesson helps you build more type-safe polymorphic React components by restricting generics to valid shapes, improving component reliability and correctness.

We'll cover the following...

Let’s learn one more concept before we begin to leverage TypeScript in our polymorphic component solution.

Getting started

Let’s consider a variant of the echo function. We’ll call this echoLength.

TypeScript 3.3.4
const echoLength = <Value> (v: Value) => {
    console.log(v.length);
    return v.length;
};

Instead of echoing the input value v, the function echoes the length of the input value, i.e., v.length.

If we wrote this code out as ...