TypeScript Generics Tutorial

Introduction to Generics

In TypeScript, generics are a way to create reusable functions and classes that can work with multiple types. They allow you to define a type parameter that can be specified when the function or class is used.

Step 1: Define a Generic Function

Create a new file called utils.ts and add the following code:

function first<T>(arr: T[]): T {
  return arr[0];
}

This code defines a generic function called first that takes an array of type T and returns the first element of the array.

Step 2: Use the Generic Function

Create a new file called main.ts and add the following code:

const numbers = [1, 2, 3];
const firstNumber = first(numbers);
console.log(firstNumber);
const strings = ['a', 'b', 'c'];
const firstString = first(strings);
console.log(firstString);

This code uses the first function to get the first element of an array of numbers and an array of strings.

Step 3: Define a Generic Class

Add the following code to the utils.ts file:

class Container<T> {
  private value: T;
  constructor(value: T) {
    this.value = value;
  }
  getValue(): T {
    return this.value;
  }
}

This code defines a generic class called Container that has a private property value of type T and a method getValue that returns the value.