TypeScriptGenerics and advanced types
Generic constraints (extends)
Requiring a type parameter to match a specific shape.
Example
#TypeScript
function longest<T extends { length: number }>(a: T, b: T): T {
return a.length >= b.length ? a : b
}
console.log(longest('HTML', 'JavaScript'))
console.log(longest([1, 2, 3], [4, 5]))Result
JavaScript [1, 2, 3]
Definition and usage
#A type parameter with no constraint can be anything, so inside the function you can’t assume it has any particular field. The notation <T extends { length: number }> says: “T can be any type, but it must have a length field.”
Thanks to constraints, a generic function can safely use the parameter’s properties, and the compiler rejects calls with types that don’t have them.
A very common combination is with keyof: <T, K extends keyof T> guarantees that the second argument is one of the first object’s keys.
Syntax
#Syntax
function name<T extends Condition>(param: T) { … }More examples
#TypeScript
function pluck<T, K extends keyof T>(items: T[], key: K): T[K][] {
return items.map((item) => item[key])
}
const students = [
{ name: 'Emma', level: 7 },
{ name: 'Jack', level: 3 }
]
console.log(pluck(students, 'name'))
console.log(pluck(students, 'level'))Result
['Emma', 'Jack'] [7, 3]
TypeScript
longest(10, 20)
// Error: Argument of type 'number' is not assignable to parameter of type '{ length: number; }'.Good practices
#- Constrain type parameters only as much as the function’s code actually requires. Too narrow a constraint reduces the function’s usefulness.
- The pattern
K extends keyof Tis the foundation of safe functions that work on object keys.
Related entries
#- Generics <T>Types and functions with a type parameter that work for many types without losing precision.
- keyofCreates a union of the key names of a given object type.
- Indexed access types T[K]Retrieves the type of a field from another type, just like reading a property from an object.
- Conditional typesTypes chosen based on a condition: T extends U ? X : Y.
Spotted a mistake or missing an example? Write to us.