A generic function uses a type parameter to keep its inputs and output related without fixing their type in advance. For an array operation, that means accepting `Type[]` and returning `Type`: the function works across element types, but a number array cannot silently produce a string result. Typing both sides as `any` would lose that check. section 5.3.1
function getMiddle<Type>(list: Type[]): Type {
const mid = Math.floor(list.length / 2);
return list[mid];
}
The `getMiddle<Type>` declaration puts the same type parameter on the array argument and return value. Its body can stay unchanged across calls. section 5.3.1
Usually, TypeScript infers `Type` from the argument: `getMiddle([0, 1, 2])` returns a number, while `getMiddle(['pear', 'apple', 'banana'])` returns a string. You can supply a type argument explicitly, but a broader argument such as `number | string` also broadens the return type—even when this particular input contains only numbers. Use an explicit argument when inference is insufficient or makes the typing harder, not by default. section 5.3.1
From generic function to generic pagination component
A React component is also a function, so the same relationship can govern its props. `Paginable<Type>` accepts `items: Type[]` and a `Renderer` whose `item` prop is `Type`. It paginates four items per page and can render either employee cards or high-score entries without replacing the pagination logic. Each rendered list has its own page state. The useful abstraction is the link between the items and their renderer, not an assumption that every item has the same shape. section 6.2
Generic components have integration costs. Applying React’s `forwardRef` or `memo` can cause TypeScript to lose the component’s generic type; the described remedies are a post-application type cast or an augmentation of React’s type definitions. Keep that limitation in mind when adding wrappers to an otherwise well-typed reusable component. section 6.5
