Understanding TypeScript Generics

type ApiResponse<T> = {
//                ^?
    data: T;
    status: number;
    error?: string;
};

// Usage
type User = { id: number; name: string };
const userResponse: ApiResponse<User> = {
    data: { id: 1, name: "Alice" },
    status: 200,
};

type Company = { id: number; name: string; address: string };
const companyResponse: ApiResponse<Company> = {
    data: { id: 1, name: "Alice", address: "Saigon, Vietnam" },
    status: 200,
};

interface KeyValuePair<K, V> {
    key: K;
    value: V;
}

// Usage
const stringPair: KeyValuePair<string, string> = { key: "name", value: "Alice" };
const numberPair: KeyValuePair<number, boolean> = { key: 42, value: true };

class MyStorage<T> {
    private items: T[] = [];

    addItem(item: T): void {
        this.items.push(item);
    }

    getAllItems(): T[] {
        return this.items;
    }
}

// Usage
const stringStorage = new MyStorage<string>();
stringStorage.addItem("Hello world");
const stringItems = stringStorage.getAllItems();

const numberStorage = new MyStorage<number>();
numberStorage.addItem(42);
const numberItems = numberStorage.getAllItems();

function createKeyValueStore<K, V>() {
  return new Map<K, V>();
}

const userAges = createKeyValueStore<string, number>();
//     ^?

userAges.set("Alice", 28);
userAges.set("Bob", 35);


// Generic syntax for arrow functions
const createStoreWithInitialValue = <K, V>(key: K, value: V) => {
  const store = new Map<K, V>();
  store.set(key, value);
  return store;
};

// Notice that in this case we didn’t have to explicitly pass the type in the angle brackets (<>)
// This behaviour is called "type parameter inference", the TS compiler just looked at the values of "key" and "value", and set Type to its type.
const productPrices = createStoreWithInitialValue("Laptop", 1200);
//      ^?

type DropdownProps<T> = {
    items: T[];
    getLabel: (item: T) => string;
    onSelect: (item: T) => void;
};

function Dropdown<T>({ items, getLabel, onSelect }: DropdownProps<T>) {
    return (
        <select onChange={(e) => onSelect(items[Number(e.target.value)])}>
            {items.map((item, index) => (
                <option key={index} value={index}>
                    {getLabel(item)}
                </option>
            ))}
        </select>
    );
}


// Usage
type Product = {
  id: number;
  name: string;
}
const ProductDropdown = () => {
    const products: Product[] = [
        { id: 1, name: "Laptop" },
        { id: 2, name: "Phone" },
    ];

    return (
        <>
            <Dropdown
//              ^?
                items={products}
                getLabel={(product) => product.name}
                onSelect={(product) => console.log("Selected:", product)}
            />

            {/*You can also manually pass the explicit type to the Dropdown component just like what you do with normal functions*/}
            <Dropdown<string>
//              ^?
                items={['Apple', 'Banana', 'Orange']}
                getLabel={(item) => item}
                onSelect={(item) => console.log("Selected:", item)}
            />
        </>
    );
};