A type argument supplies a type to a generic function, interface, or component. In TypeScript, it appears in angle brackets, such as `getMiddle<number>([0, 1, 2])`. The generic function can then relate its input and output types without committing to one element type. Function calls often infer the argument from their values, so write it explicitly when inference is too narrow or unclear. section 5.3.1
function getMiddle<Type>(list: Type[]): Type {
const mid = Math.floor(list.length / 2);
return list[mid];
}
The same `Type` parameter describes both the array elements and the returned element. A number array therefore produces a number; a string array produces a string. section 5.3.1
An explicit argument can also make a type less precise. `getMiddle<number | string>([0, 1, 2])` has a `number | string` return type even though the supplied values are numbers. Prefer the inferred type when it already captures the intended relationship. section 5.3.1
In React, supply a type argument where an initial value or an API signature cannot express the intended type:
- `useState<null | boolean>(null)` permits an initially undecided value to become a Boolean; `useState<string[]>([])` permits strings to be added to an initially empty array. section 6.1.1
- `createContext<DarkMode | null>(null)` allows a later provider value to contain the expected object. `useContext` then receives its type from that context without another argument. section 6.1.3
- `forwardRef<HTMLInputElement, InputProps>(...)` identifies the ref element first and component props second. Typing the callback’s ref as `Ref<HTMLInputElement>` is another option; choose one approach consistently. section 5.3.8
- `PropsWithChildren<HeadingProps>` adds children to named props. Its empty-props default is available in React 18 and later; React 17 and earlier require an explicit argument for children-only props. section 5.3.2
One pagination component, different item types
Define `PaginableProps<Type>` with `items: Type[]` and a renderer whose `item` is `Type`. A generic `Paginable<Type>` can then paginate employee cards or high-score entries while keeping each renderer aligned with its items. Watch the boundary: memoizing or forwarding a ref to a generic component can cause its type argument to be forgotten and requires a workaround. section 6.2 section 6.5
