React-Bootstrap Close Button Variants

TypeScript Using Type Parameters in Generic Constraints

Last Updated : 24 Apr, 2025

TypeScript Generics allows you to write reusable code that works with different types. In this article, we will explore how to use type parameters in generic constraints to ensure that which types are allowed in generic types or functions.

Syntax:

function functionName<Type extends ConstraintType>(arg: Type): ReturnType {
    // Function implementation
}

Where:

<Type> is a type parameter
extends will extend the types to the function
ConstraintType represents the type or set of type that 'Type' must adhere it. This constraint ensures that the generic type 'Type' satisfies certain conditions or has specific properties.
(arg: Type) is the Function parameter list. Here we are specifying that the function takes an argument 'arg' of type 'Type'.

Example 1: The `logLength` function takes an input object that implements the `Lengthy` interface (i.e., has a `length` property), and it logs the length of that object to the console. It demonstrates how TypeScript can use generics and interfaces to enforce type constraints and provide type safety when working with different types of objects.

JavaScript

interface Lengthy {
    length: number;
}

function logLength<T extends Lengthy>(input: T): void {
    console.log(`Length: ${input.length}`);
}

// Output: Length: 17
logLength("Hello, TypeScript");
// Output: Length: 5
logLength([1, 2, 3, 4, 5]);

Output:

Screenshot-(1073) — Output

Example 2: In this example the code demonstrates the creation of two separate queues—one for numbers and one for strings—using TypeScript's generics, ensuring type safety for the elements stored in each queue.

JavaScript

class Queue<T extends number | string> {
    private items: T[] = [];

    enqueue(item: T): void {
        this.items.push(item);
    }

    dequeue(): T | undefined {
        return this.items.shift();
    }
}

const numberQueue = new Queue<number>();
numberQueue.enqueue(1);
numberQueue.enqueue(2);

// Output: 1
console.log(numberQueue.dequeue());

const stringQueue = new Queue<string>();
stringQueue.enqueue("Hello");
stringQueue.enqueue("World");

// Output: Hello
console.log(stringQueue.dequeue());

Output:

Screenshot-(1072) — Output

Conclusion: In this article we have discussed Using Type Parameters in Generic Constraints and it's syntax. And both examples, TypeScript enforces the constraints, providing type safety and preventing potential runtime errors. This allows you to write more reliable and maintainable code when working with generic types in TypeScript.

Reference: https://www.typescriptlang.org/docs/handbook/2/generics.html#using-type-parameters-in-generic-constraints

React-Bootstrap Close Button Variants

vishalgupta703782

Improve

Article Tags :

Similar Reads

TypeScript Using Class Types in Generics

TypeScript Using class types in generics allows you to create more flexible and reusable code by specifying that a generic parameter should be a class constructor. This is particularly useful when you want to work with instances of classes but want to keep the code type safe. You can define a generi

TypeScript Generic Constraints

In TypeScript, generic constraints restrict the types that can be used with a generic type by using the extends keyword. This ensures that the generic type adheres to a specific structure or interface, allowing access to certain properties or methods within the generic type. What are Generic Constra

TypeScript Generic Parameter Defaults

TypeScript Generic Parameter Defaults allow you to specify default values for generic type parameters. This feature provides a fallback type when no explicit type argument is given, making generic types more flexible and easier to use, particularly when type inference is not straightforward. Syntaxf

TypeScript Parameter Type Annotations

TypeScript Parameter type annotations are used to specify the expected data types of function parameters. They provide a way to explicitly define the types of values that a function expects as arguments. Parameter type annotations are part of TypeScript's static typing system, and they help catch ty

TypeScript ConstructorParameters<Type> Utility Type

The TypeScript ConstructorParameters<Type> utility type extracts the parameter types from a constructor function Type. It enhances type safety by enabling the creation of instances with correct constructor arguments, ensuring functions use the precise types expected by the constructor. Syntaxt

TypeScript Interface vs Type Statements

In TypeScript, interface and type are used to define the structure of objects and custom types. While interfaces enforce contracts for classes and support multiple inheritance, types offer flexibility for defining complex and reusable type aliases. Each serves distinct use cases. Table of Content In

Union Type to Intersection Type in TypeScript

To Transform union type to intersection type we have different approaches. In this article, we are going to learn how to Transform union type to intersection type. Below are the approaches used to Transform union type to intersection type: Table of Content Using Distributive Conditional TypesUsing C

How to Create TypeScript Generic Function with Safe Type Matching ?

In TypeScript, generic functions offer a powerful tool for creating flexible and reusable code that can work with various data types. However, ensuring type safety is crucial to prevent runtime errors and maintain code reliability. These are the following approaches:Table of Content Using Type const

TypeScript in operator narrowing Type

In this article, we will learn about the 'in' operator narrowing Type in Typescript. In TypeScript, the 'in' operator is used to narrow or refine the type of an object within a conditional statement or block. It checks whether a specific property or key exists within an object, and if it does, it na

Building Reusable Components in React with TypeScript Generics

In modern web development, reusability is necessary to making capable, and modifiable applications. TypeScript, with its robust typing system, and React, with its component-based architecture, give dynamic tools to reach reusability. One of these tools is Generics. Generics permit developers to make