Typescript Generic Types: Master generics for writing reusable components

Mastering TypeScript generics is an essential skill for creating reusable and type-safe components, especially in a frontend development context like React.

1. Basic Generic Types

Generics allow functions, classes, and interfaces to work with any data type. Here’s a basic example:

1function identity<T>(arg: T): T {
2    return arg;
3}
4

<T> is the generic type variable. Here, T can be any type.
You can use identity<number>(5) or identity<string>("hello") to specify the type, or let TypeScript infer it.

2. Using Generics in Interfaces and Classes

Generics are helpful for creating reusable interfaces or classes.

1interface KeyValuePair<K, V> {
2    key: K;
3    value: V;
4}
5
6class DataStore<T> {
7    private data: T[] = [];
8    add(item: T) {
9        this.data.push(item);
10    }
11    getAll(): T[] {
12        return this.data;
13    }
14}
15

Here, KeyValuePair<K, V> is a generic interface that can handle different types for key and value.
DataStore<T> is a generic class storing any type of data specified by T.

3. Constraining Generics

Sometimes, you’ll want to limit the types a generic can accept using constraints with extends.

1function printName<T extends { name: string }>(obj: T) {
2    console.log(obj.name);
3}

This function only accepts objects with a name property.
Example usage: printName({ name: "Amir", age: 30 });

4. Default Generic Types

TypeScript allows you to set default types for generics, which makes them optional.

1interface ApiResponse<T = any> {
2    data: T;
3    error?: string;
4}
5

If no type is specified, ApiResponse will default to any.
You can override it like ApiResponse<string>.

5. Generics in React Components

Generics are invaluable in React components, allowing flexible prop types.

1interface ListProps<T> {
2    items: T[];
3    renderItem: (item: T) => JSX.Element;
4}
5
6function List<T>({ items, renderItem }: ListProps<T>) {
7    return <>{items.map(renderItem)}</>;
8}
9

This List component can render any type of item array and use any item-rendering logic.
Usage: <List items={['Apple', 'Banana']} renderItem={(item) => <p>{item}</p>} />

6. Utility Types with Generics

TypeScript offers utility types like Partial, Readonly, and Record, which you can use to work with generics:

1function updateObject<T>(obj: T, updates: Partial<T>): T {
2    return { ...obj, ...updates };
3}
4

Here, Partial<T> makes all properties in T optional.
updateObject can apply partial updates to an object of any type T.

7. Extending Types for More Specificity

You can extend one generic type with another, combining types with constraints for specific scenarios:

1function getProp<T, K extends keyof T>(obj: T, key: K) {
2    return obj[key];
3}
4

Here, K extends keyof T means that K can only be a property key from T.
This function ensures the safety of accessing properties on an object.

8. Practical Example in React - Generic Form Component

Suppose you want a generic form component that can handle any kind of data object.

1interface FormProps<T> {
2    initialValues: T;
3    onSubmit: (values: T) => void;
4}
5
6function Form<T>({ initialValues, onSubmit }: FormProps<T>) {
7    const [values, setValues] = useState<T>(initialValues);
8
9    const handleChange = (key: keyof T, value: any) => {
10        setValues((prevValues) => ({ ...prevValues, [key]: value }));
11    };
12
13    return (
14        <form onSubmit={() => onSubmit(values)}>
15            {Object.keys(values).map((key) => (
16                <input
17                    key={key}
18                    value={(values as any)[key]}
19                    onChange={(e) => handleChange(key as keyof T, e.target.value)}
20                />
21            ))}
22        </form>
23    );
24}
25

Form<T> can handle any object type passed as initialValues and submit that type safely.
Use it with different data structures, e.g., <Form initialValues={{ name: '', age: 0 }} onSubmit={handleSubmit} />.

Generics in TypeScript improve the reusability, readability, and safety of your code by enforcing type constraints dynamically. Once you’re comfortable, they become a powerful tool for building scalable frontend applications.

Typescript Function Types and Overloading: Define types for functions, including parameter and return types

PHP Basics: Syntax, variables, data types, operators.