In this article, you'll learn about generics and see how they can help address this problem.

##Why Do We Need Generics?

Let's begin with a simple example. We will first add different types of objects to an ArrayList. Next, we will try to retrieve them and print their values.

List list = new ArrayList();

list.add("Hello");

String str = (String) list.get(0);

System.out.println("String: " + str);

As you can see, we have added a String object to the ArrayList. Since we are the ones who have written the code, we know what type of object the element represents, but, the compiler does not know that. So, when we attempt to retrieve the value from the list, we get back an Object and we have to perform an explicit casting.

list.add(123);

String number = (String) list.get(1);

System.out.println("Number: " + number);

If we add an Integer to the same list and try to fetch the value, we will get a ClassCastException because an Integer object cannot be cast to a String.

By using Generics, we can solve both problems discussed above. Let's see how.

First, we need to use the diamond operator and narrow the type of object held in this list. We need to mention the object type explicitly within the diamond operator. This will enforce a compile-time check, so you no longer have to perform explicit casting. You will also be able to eliminate the ClassCastException.

List<String> list = new ArrayList();

list.add("Hello");

String str = list.get(0); // No need for explicit casting

System.out.println("String: " + str);

list.add(123); // Throws compile-time error

##Naming Conventions for Type Parameters

In the previous example, you saw that the use of List<String> narrowed the type of the object that the list could hold. Check out the following example of a Box class and how it works with different types of data.

public class Box<T> {
    private T value;

    public void setValue(T value) {
        this.value = value;
    }

    public T getValue() {
        return value;
    }

    public static void main(String[] args) {
        Box<String> stringBox = new Box<>();
        stringBox.setValue("Hello, world!");
        System.out.println(stringBox.getValue());

        Box<Integer> integerBox = new Box<>();
        integerBox.setValue(123);
        System.out.println(integerBox.getValue());
    }
}

Note how the Box<T> class is declared. Here, the T is a type parameter, indicating that the Box class can work with any object of that type. The same is illustrated in the main method where an instance of Box<String> and Box<Integer> are both allowed to be created, thus ensuring type safety.

As per the official documentation:

By convention, type parameter names are single, uppercase letters.

The most commonly used type parameter names are:

E - Element (used extensively by the Java Collections Framework)
K - Key
N - Number
T - Type
V - Value
S,U,V etc. - 2nd, 3rd, 4th types

Let's take a look at how we can write a generic method. Below is the convention:

public static <T> void printArray(T[] inputArr) {
    for (T element : inputArr) {
        System.out.print(element + " ");
    }
    System.out.println();
}

Here, we take an array of any type and print its elements. Note that you need to specify the generic type parameter T in the angle brackets <> before the return type of the method. The method body iterates over the array that we have passed as a parameter, of any type T, and prints each element.

 public static void main(String[] args) {
        // Create different arrays of type Integer, Double and Character
        Integer[] intArr = {1, 2, 3, 4, 5};
        Double[] doubleArr = {1.1, 2.2, 3.3, 4.4, 5.5};
        Character[] charArr = {'H', 'E', 'L', 'L', 'O'};

        System.out.println("Integer array contains:");
        printArray(intArr);   // pass an Integer array

        System.out.println("Double array contains:");
        printArray(doubleArr);   // pass a Double array

        System.out.println("Character array contains:");
        printArray(charArr);   // pass a Character array
    }

We can call this generic method by passing different types of arrays (Integer, Double, Character) and you will see that your program will print the elements of each of these arrays.

##Restrictions on Generics

In Generics, we use bounds to restrict the types that a generic class, interface, or method can accept. There are two types:

####1. Upper Bounds This is used to restrict the generic type to an upper limit. To define an upper bound, you use the extends keyword. By specifying an upper bound, you ensure that the class, interface, or method accepts the specified type and all of its subclasses.

The syntax would be as follows: <T extends SuperClass>.

If you consider the same Box class that we used previously, it can be modified as below:

class Box<T extends Number> {
    private T value;

    public void setValue(T value) {
        this.value = value;
    }

    public T getValue() {
        return value;
    }
}

In this example, T can be any type that extends Number, such as Integer, Double, or Float.

####2. Lower Bounds This is used to restrict the generic type to a lower limit. To define a lower bound, you use the super keyword. By specifying a lower bound, you ensure that the class, interface, or method accepts the specified type and all of its superclasses.

The syntax would be as follows: <T super SubClass>.

To illustrate the use of lower bounds, let us take a look at the following example:

public static void printList(List<? super Integer> list) {
    for (Object element : list) {
        System.out.print(element + " ");
    }
    System.out.println();
}

The usage of a lower bound <? super Integer> ensures that you can pass the specified type and all of its superclasses, which in this case would be a list of Integer, Number, or Object to the method printList.

##What are Wildcards?

The ? that you saw in the previous example is called a Wildcard. You can use them to refer to an unknown type.

You can use a wildcard with an upper bound, in which case it would look something like this: <? extends Number>. It can also be used with a lower bound, such as <? super Integer>.

##Type Erasure

The generic type that we use in our class, interface, or method is only available at compile time and it is removed at run-time. This is done to ensure backward compatibility, as the older versions of Java (before Java 1.5) do not support it.

The compiler makes use of the generic type information that is available to it to ensure type safety. In the process of type erasure:

• If the type is unbounded, then the parameters get replaced with their bounds or Object type
• If the type is bounded, then the parameters get replaced by the first bound, and the generic type information will be removed after compilation

If we take a look at the Box class example:

public class Box<T> {
    private T value;
    //getters and setters
 }

The above code will become this:

public class Box {
    private Object value;
    //getters and setters
 }

##Conclusion

In this article, we explored the concept of generics in Java and how you can use them, with some basic examples. Understanding and using generics enhances type safety in your program. They also eliminate the need for explicit casting and make your code reusable and maintainable.

Let's connect on LinkedIn.

In this article, we will explore the powerful synergy between TypeScript generics and functional React components.

Generics allow you to define flexible components that can adapt to different data structures and enforce type safety throughout your codebase.

By leveraging Generics in functional components, you can create highly reusable and adaptable UI elements that can seamlessly handle varying data requirements.

In this tutorial, we'll begin by understanding the concept of generics in TypeScript and how they can be beneficial in the context of React development.

We will then dive into practical examples, demonstrating how to define generic functional components in React using TypeScript.

We'll also discuss various use cases where generic props shine, enabling us to build versatile and scalable React applications.

What are Generics in TypeScript?

In order to explore functional components with generics, you need to grasp the fundamentals of generic functions in TypeScript – including their definition and implementation.

In this section, you'll get a concise overview of what generics are and how to implement them in TypeScript. This should equip you with the necessary knowledge to delve deeper into the realm of functional components.

How to declare a generic function in TypeScript

To declare a generic function in TypeScript, we place a generic type parameter, denoted as <T>, at the beginning of the function signature. This <T> represents a type that will be passed when the function is used. It serves as a placeholder for a specific type that will be determined during runtime, similar to how parameters behave in regular functions.

For instance, consider the following function:

function func<T>(value: T):T[] {
   return [value];
}

func('Hello John');

In this example, the generic type parameter T is used to denote that the value parameter and the return type will be of the same type.

When the func function is called with the argument 'Hello John', the inferred type for T becomes string. As a result, the return type of the function is string[], indicating that an array containing the provided string value will be returned.

How to define generics with arrow functions in TypeScript

The syntax for defining a generic function with arrow functions is slightly different from that of the function declaration we've seen before:

export const func = <T>(value: T):T[] => {
   return [value];
}

func('Hello John');

From the above, we see that when using arrow functions to define generic functions in TypeScript, we employ the <T> syntax before the parameter list to indicate a generic type parameter.

Moving on, it's important to note that the generic type parameter T used in the previous examples is merely a descriptive name and can be replaced with any other valid identifier. For example:

export const func = <K>(value: K):K[] => {
   return [value];
}

func('Hello John');

The generic type parameter T has been replaced with K, showcasing that the choice of name for the generic type is flexible and can be customized to match the context or developer preference.

The function func remains generic, capable of accepting any type specified during usage and returning an array of that same type.

Now that you know how to implement generic functions and understand their flexibility in returning any passed type, we'll now learn how to implement generic components in React.

In the following section, I'll provide a step-by-step walkthrough of how to create and utilize generic components. This will help you harness the power of generics in React development.

How to Define and Use Generic Components in React

Just like with generic functions, you can take component reusability to the next level by designing generic components with the integration of TypeScript generics.

Declaring the generic props that a generic component will accept is the initial step in designing the component. We can build a parameterized props interface that supports different data types by using TypeScript generics.

interface MyComponentProps<T> {
  data: T;
  // Add additional props specific to your component
}

Once the generic props interface is defined, you can then implement the generic component itself. This involves using the declared generic props and integrating them into the component's structure.

Similar to the TypeScript function description in the previous section, it has the same implementation.

function MyComponent<T>({ data }: MyComponentProps<T>) {

  return (
    <div>
      {/* JSX content */}
    </div>
  );
}

Following this, you can also define generic components using arrow function syntax. But this is different when you are writing your code in a JSX.Element file.

To avoid ambiguity between generic type parameters and a jsx component, you add a trailing comma to the type parameter to differentiate it from a JSX.Element. For example:

interface MyComponentProps<T> {
  data: T;
}
// notice the trailing comma after <T
const MyComponent = <T,>({ data }: MyComponentProps<T>) => {
  return (
  <div>{JSX content}</div>;
  )
};
export default MyComponent;

Example Use Case Of Generic Components

Let's say you want to develop a data visualization dashboard capable of presenting data from diverse sources, each with its unique structures and properties. But you want to create a reusable component that can generate a summary of any data object, focusing on a specific property.

This scenario provides an opportunity to delve into a practical application of a generic component in React.

By extending the type parameter to an object and utilizing the keyof operator within the interfaces, you can construct a component that offers both flexibility and type safety.

This approach harnesses the capabilities of TypeScript's robust type system, empowering you to work with a variety of objects seamlessly.

To achieve this, define a generic component called Summary<T> that accepts a type parameter T extending an object. You'll also use the keyof operator to specify the property of the object that you want to display in the summary:

interface SummaryProps<T extends object, K extends keyof T> {
  data: T;
  property: K;
}

export function Summary<T extends object, K extends keyof T>({
  data,
  property,
}: SummaryProps<T, K>) {
  const value = data[property] as string;

  return (
    <div>
      {(typeof property === "string") ? (
        <p>
          {property}: {value}{" "}
        </p>
      ) : (
        ""
      )}
    </div>
  );
}

In the Summary component, we defined a generic type parameter T that extends object, ensuring that data passed to the component is an object type.

The second type parameter K uses the keyof T notation, indicating that it must be a key of the T object type. This way, you can access a specific property of the data object based on the provided property value.

Within the component, we extracted the value from the data object using the property as the key. To ensure the value is treated as a string, we used the as keyword to perform a type assertion: data[property] as string to avoid assignment errors. This type assertion tells TypeScript to treat the value as a string.

The component then returns a <div> element containing a conditional rendering of a <p> element. The code then checks if the property is of type string using typeof property === "string". In this way, it also prevents assignment mistakes.

If it evaluates to true, the code renders the <p> element, displaying the property and value. Otherwise, an empty string gets returned.

Having defined the component, let's consider an example where you have two different data sources: User and Product. Each data source has its own properties, but you want to display a summary based on a specific property.

You can start by defining the User interface to represent user data, specifying properties such as id, name, and email. Similarly, create the Product interface to represent product data, including properties like id, name, and price, like this:

interface User {
  id: number;
  name: string;
  email: string;
}

interface Product {
  id: number;
  name: string;
  price: number;
}

Next, you can create instances of these data objects. For example, userData can represent a user and productData can represent a product, with their respective properties filled with sample data:

const userData: User = {
  id: 1,
  name: "John Doe",
  email: "johndoe@example.com"
};

const productData: Product = {
  id: 1,
  name: "Smartphone",
  price: 999
};

To utilize the Summary component, provide it with different data sources and specify the property you want to display in the summary.

For instance, you can use <Summary<User, "name">> to render a summary of the user's name, and <Summary<Product, "price">> to display the price of the product:

<Summary<User, "name"> data={userData} property="name" />
<Summary<Product, "price"> data={productData} property="price" />

The full code looks like this:

interface User {
  id: number;
  name: string;
  email: string;
}

interface Product {
  id: number;
  name: string;
  price: number;
}

const userData: User = {
  id: 1,
  name: "John Doe",
  email: "johndoe@example.com"
};

const productData: Product = {
  id: 1,
  name: "Smartphone",
  price: 999
};

// Usage of Summary component with different data sources and properties
<Summary<User, "name"> data={userData} property="name" />
<Summary<Product, "price"> data={productData} property="price" />

TypeScript's powerful type inference mechanism comes into play in this scenario. When you provide the data and property to the Summary component, TypeScript ensures that the specified property is valid for the corresponding data source.

If you mistakenly attempt to use an invalid property, such as providing "email" as the property for the Product data, the TypeScript compiler will raise a type error. This ensures type safety and helps prevent potential runtime issues.

By leveraging TypeScript's static type checking, we gain the benefits of type safety and validation when working with generic components like Summary. This also helps catch errors early in the development process and ensures that the provided data and property combinations are correct.

Conclusion

In this guide, we have explored the concept of generics in TypeScript and how they can be applied to create powerful and reusable components in React.

Generics allow us to define components that are flexible enough to work with various data types while maintaining type safety.

Throughout this article, you learned generics fundamentals, including the implementation of generic functions. We then delved into the world of generic components in React, demonstrating how to define and implement them using both arrow and named function methods.

As you continue your journey with TypeScript, I encourage you to explore further the power and flexibility of generic props. By utilizing generics, you can unlock new possibilities in creating reusable and type-safe components that empower your React applications. Happy coding!

Use Case for Generics

Let's start with a simple example, where you want to print the value of an argument passed:

function printData(data: number) {
    console.log("data: ", data);
}

printData(2);

Now, let's suppose you want to make printData a more generic function, where you can pass any type of argument to it like: number/ string/ boolean. So, you might think to follow an approach like below:

function printData(data: number | string | boolean) {
    console.log("data: ", data);
}

printData(2);
printData("hello");
printData(true);

But in the future, you might want to print an array of numbers using the same function. In that case the types will increase and it will become cumbersome to maintain all those different types.

This is when Generics come into the picture.

How Generics Work in TS

Generics are like variables – to be precise, type variables – that store the type (for example number, string, boolean) as a value.

So, you can solve the problem we discussed above with generics as shown below:

function printData<T>(data: T) {
    console.log("data: ", data);
}

printData(2);
printData("hello");
printData(true);

In the above example printData-generics.ts, there is a slight difference in syntax:

1. You use a type variable inside angular brackets after the function name <T>

2. You then assign the type variable to the parameter data: T

Let's explore these differences a bit more.

To use generics, you need to use angular brackets and then specify a type variable inside them. Developers generally use T, X and Y. But it can be anything depending upon your preference.

You can then assign the same variable name as the type to the parameter of the function.

Now, whatever argument you pass to the function, it gets inferred and there's no need to hardcode the type anywhere.

Even if you pass an array of numbers or an object to the printData function, everything will be displayed properly without TS complaining:

function printData<T>(data: T) {
    console.log("data: ", data);
}

printData(2);
printData("hello");
printData(true);
printData([1, 2, 3, 4, 5, 6]);
printData([1, 2, 3, "hi"]);
printData({ name: "Ram", rollNo: 1 });

Let's see another example:

function printData<X,Y>(data1: X, data2: Y) {
    console.log("Output is: ", data1, data2);
}

printData("Hello", "World");
printData(123, ["Hi", 123]);

In above example, we passed 2 arguments to printData and used X and Y to denote the types for both the parameters. X refers to 1st value of the argument and Y refers to 2nd value of the argument.

Here as well, the types of data1 and data2 are not specified explicitly because TypeScript handles the type inference with the help of generics.

How to Use Generics with Interfaces

You can even use generics with interfaces. Let's see how that works with the help of a code snippet:

interface UserData<X,Y> {
    name: X;
    rollNo: Y;
}

const user: UserData<string, number> = {
    name: "Ram",
    rollNo: 1
}

In above snippet, <string, number> are passed to the interface UserData. In this way, UserData becomes a reusable interface in which any data type can be assigned depending upon the use case.

Here in this example, name and rollNo will always be string and number, respectively. But this example was to showcase how you can use generics with interfaces in TS.

Thanks for reading!

If you found this article useful, do share it with your friends and colleagues.

Types

Java is a statically typed language, which means you must first declare a variable and its type before using it.

For example: int myInteger = 42;

Enter generic types.

Generic types

Definition: “A generic type is a generic class or interface that is parameterized over types.”

Essentially, generic types allow you to write a general, generic class (or method) that works with different types, allowing for code re-use.

Rather than specifying obj to be of an int type, or a String type, or any other type, you define the Box class to accept a type parameter <;T>. Then, you can use T to represent that generic type in any part within your class.

Now, enter covariance and contravariance.

Covariance and contravariance

Definition

Variance refers to how subtyping between more complex types relates to subtyping between their components (source).

An easy-to-remember (and extremely informal) definition of covariance and contravariance is:

• Covariance: accept subtypes
• Contravariance: accept supertypes

Arrays

In Java, arrays are covariant, which has 2 implications.

Firstly, an array of type T[] may contain elements of type T and its subtypes.

Number[] nums = new Number[5];nums[0] = new Integer(1); // Oknums[1] = new Double(2.0); // Ok

Secondly, an array of type S[] is a subtype of T[] if S is a subtype of T.

Integer[] intArr = new Integer[5];Number[] numArr = intArr; // Ok

However, it’s important to remember that: (1) numArr is a reference of reference type Number[] to the “actual object” intArr of “actual type” Integer[].

Therefore, the following line will compile just fine, but will produce a runtime ArrayStoreException (because of heap pollution):

numArr[0] = 1.23; // Not ok

It produces a runtime exception, because Java knows at runtime that the “actual object” intArr is actually an array of Integer.

Generics

With generic types, Java has no way of knowing at runtime the type information of the type parameters, due to type erasure. Therefore, it cannot protect against heap pollution at runtime.

As such, generics are invariant.

ArrayList<Integer> intArrList = new ArrayList<>();ArrayList<Number> numArrList = intArrList; // Not okArrayList<Integer> anotherIntArrList = intArrList; // Ok

The type parameters must match exactly, to protect against heap pollution.

But enter wildcards.

Wildcards, covariance, and contravariance

With wildcards, it’s possible for generics to support covariance and contravariance.

Tweaking the previous example, we get this, which works!

ArrayList<Integer> intArrList = new ArrayList<>();ArrayList<? super Integer> numArrList = intArrList; // Ok

The question mark “?” refers to a wildcard which represents an unknown type. It can be lower-bounded, which restricts the unknown type to be a specific type or its supertype.

Therefore, in line 2, ? super Integer translates to “any type that is an Integer type or its supertype”.

You could also upper-bound the wildcard, which restricts the unknown type to be a specific type or its subtype, by using ? extends Integer.

Read-only and write-only

Covariance and contravariance produce some interesting outcomes. Covariant types are read-only, while contravariant types are write-only.

Remember that covariant types accept subtypes, so ArrayList<? extends Number> can contain any object that is either of a Number type or its subtype.

In this example, line 9 works, because we can be certain that whatever we get from the ArrayList can be upcasted to a Number type (because if it extends Number, by definition, it is a Number).

But nums.add() doesn’t work, because we cannot be sure of the “actual type” of the object. All we know is that it must be a Number or its subtypes (e.g. Integer, Double, Long, etc.).

With contravariance, the converse is true.

Line 9 works, because we can be certain that whatever the “actual type” of the object is, it must be Integer or its supertype, and thus accept an Integer object.

But line 10 doesn’t work, because we cannot be sure that we will get an Integer. For instance, nums could be referencing an ArrayList of Objects.

Applications

Therefore, since covariant types are read-only and contravariant types are write-only (loosely speaking), we can derive the following rule of thumb: “Producer extends, consumer super”.

A producer-like object that produces objects of type T can be of type parameter <? extends T>, while a consumer-like object that consumes objects of type T can be of type parameter <? super T>.