TypeScript Specifying Type Arguments

TypeScript is a powerful statically typed superset of JavaScript that allows you to define and enforce types in your code. One of the key features of TypeScript is the ability to specify type arguments when working with generic functions and classes. This article will provide a comprehensive guide on how to specify type arguments in TypeScript, including syntax, approaches, and complete code examples.

These are the following approaches to specify typescript type arguments:

• Generic Class
• Generic Function

Generic Class

Class generics in TypeScript allow you to create classes that can work with various data types by defining type parameters within the class definition. These parameters enable you to create instances of the class with specific data types.

Syntax:

class GenericClass<T> {
    // Implementation part
}

Where-

• GenericClass defines a TypeScript class called GenericClass that’s generic.
• <T> notation serves as a placeholder for the actual data type to be used within the class.

Example: This TypeScript code defines a generic class called CustomContainer<T> that stores data of any specified type T. It takes an initial value of type T in its constructor, ensuring type safety. It also offers a retrieveData() method to access and return the stored data, preserving its original type. Two instances of CustomContainer are created with different data types (number and string).

Javascript

class CustomContainer<T> {
  constructor(private data: T) {}
  retrieveData(): T {
      return this.data;
  }
}

const customNumberContainer =
    new CustomContainer<number>(400);

const customStringContainer =
    new CustomContainer<string>('GEEKSFORGEEKS');

console.log(customNumberContainer.retrieveData());
console.log(customStringContainer.retrieveData());

Output:

Generics Function

Function generics in TypeScript involve the use of type parameters within function definitions, allowing you to create flexible and reusable functions that work with various data types. These type parameters are placeholders for actual types and enable type inference, ensuring type safety while accommodating different input types. Function generics are valuable for creating versatile and type-conscious functions in TypeScript.

Syntax:

function functionName<T>(arg: T): T {
    // Implementation part
}

Where-

• functionName<T> Defines a generic function named functionName with a type parameter T.
• arg: T specifies a function parameter named arg of type T.
• : T Denotes that the funciton returns a value of the same type T as the input paramater.

Example: This TypeScript code defines a generic function reverseTuple that swaps the types of elements in a two-element tuple. It’s invoked with a tuple [31, ‘GFG’], which is inferred as [number, string], and it returns [‘GFG’, 31]. The result is assigned to ‘reversed’ and logged to the console, demonstrating type swapping in tuples.

Javascript

function reverseTuple<T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]];
}

// Reversing the tuple
const reversed = reverseTuple([31, 'GFG']);

console.log(reversed);

Output: