TypeScript Generic Function

Introduction

In this chapter, we will explore generic functions in TypeScript. Generics allow you to write flexible, reusable functions that can work with different types while maintaining type safety. This is particularly useful for writing utility functions that need to operate on various types of data.

Table of Contents

• Definition
• Generic Function Syntax
• Using Generic Functions
• Type Constraints in Generic Functions
• Multiple Type Variables
• Conclusion

Definition

A generic function is a function that can operate on different types of data without sacrificing type safety. By using generics, you can create functions that work with various types while ensuring that the type constraints are enforced.

Generic Function Syntax

Syntax

function functionName<T>(parameter: T): T {
  // function implementation
}

Using Generic Functions

Example

Here, we create a generic function identity that takes a parameter of type T and returns a value of the same type. This function works with any type, providing flexibility while ensuring type safety.

function identity<T>(value: T): T {
  return value;
}

// Using the generic function with a number
let numberValue = identity<number>(42);
console.log(numberValue); // Output: 42

// Using the generic function with a string
let stringValue = identity<string>("Hello, TypeScript!");
console.log(stringValue); // Output: Hello, TypeScript!

In this example, the identity function is used with both a number and a string. The type parameter T allows the function to accept any type, and the type is inferred based on the arguments provided.

Type Constraints in Generic Functions

You can add constraints to a generic function to limit the types that can be used. This is done using the extends keyword.

Example

Here, we create a generic function logLength that takes a parameter of type T, where T must have a length property. This ensures that only types with a length property can be passed to the function.

interface Lengthwise {
  length: number;
}

function logLength<T extends Lengthwise>(value: T): void {
  console.log(value.length);
}

// Using the generic function with a string
logLength("Hello, TypeScript!"); // Output: 16

// Using the generic function with an array
logLength([1, 2, 3, 4, 5]); // Output: 5

// Using the generic function with an object
logLength({ length: 10, value: "Some value" }); // Output: 10

In this example, the logLength function ensures that the value parameter has a length property. This allows the function to operate safely on any type that meets this constraint.

Multiple Type Variables

You can use multiple type variables in a generic function to work with multiple types simultaneously.

Example

Here, we create a generic function pair that takes two parameters of different types and returns a tuple containing both values.

function pair<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}

// Using the generic function with a number and a string
let numberAndStringPair = pair<number, string>(42, "TypeScript");
console.log(numberAndStringPair); // Output: [42, 'TypeScript']

// Using the generic function with two strings
let stringPair = pair<string, string>("Hello", "World");
console.log(stringPair); // Output: ['Hello', 'World']

In this example, the pair function uses two type variables T and U to accept two parameters of different types and return a tuple containing both values.

Conclusion

In this chapter, we covered generic functions in TypeScript, including their definition, syntax, and how to use them with various types. We also explored adding type constraints and using multiple type variables in generic functions. Understanding generic functions is essential for writing flexible, reusable, and type-safe TypeScript code.