Generics Typescript

Video is in Swedish

Mastering Generics in TypeScript  

TypeScript, a statically typed JavaScript superset, provides a powerful feature called generics to create reusable and flexible code. Generics allow developers to define functions, classes, or interfaces that can work with multiple data types without compromising type safety.

What are Generics?  

Generics are a way to parameterize types in TypeScript. This means you can define a function or class that takes one or more type parameters, which can be used within the implementation. The type parameters are replaced with actual types when the generic is instantiated.

Benefits of Generics  

1. Reusability: Generics enable you to write reusable code that can work with different data types.
2. Type Safety: Generics ensure type safety by preventing errors at compile-time rather than runtime.
3. Flexibility: Generics allow you to create flexible APIs that can be used in a variety of contexts.

Example: Generic Function  

Here’s an example of a generic function that takes two type parameters, T and U, and returns the sum of two values:

function add<T, U>(a: T, b: U): T | U {
  return a + b;
}

In this example, add is a generic function that takes two type parameters, T and U. The function returns the sum of two values of types T and U, respectively. When you call the function with specific types, TypeScript infers the correct return type:

const result1 = add<number, string>(10, 'hello'); // result1: number | string
const result2 = add<string, boolean>('world', true); // result2: string | boolean

Example: Generic Class  

Here’s an example of a generic class that takes one type parameter, T, and provides a method to create a new instance:

class Container<T> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

In this example, Container is a generic class that takes one type parameter, T. The class provides a method to create a new instance with a value of type T, and returns the value through the getValue method:

const container = new Container<string>('hello'); // container: Container<string>
const value = container.getValue(); // value: string

Conclusion  

Generics in TypeScript provide a powerful way to create reusable, flexible, and type-safe code. By understanding how to use generics effectively, you can write more robust and maintainable software applications. Whether you’re working with functions or classes, generics offer a way to abstract away specific types and focus on the logic of your code.

Resources  

• TypeScript Documentation: Generics
• TypeScript Handbook: Generics

I hope this article has helped you understand the basics of generics in TypeScript. Happy coding!

Video  

Sourcecode