The extends keyword
Typescript is a complete language (a Turing complete language ); thus, it has a few keywords to work with. One of that keywords is extends. This keyword can be very confusing since it encompasses a couple of concepts or meanings that depend on the context where it is used.
Inheritance with extends
The inheritance in Typescript refers to allowing you to create new interfaces that inherit or extend the behavior of a previous one.
sponsor
Tu producto o servicio podría estar aquí
interface User {
firstName: string;
lastName: string;
email: string;
}
interface StaffUser extends User {
roles: Array<Role>
}
What you can see in the above snippet is:
- The interface
Userdescribes a type with some properties that represent a user. StaffUserinterface represents a user with the same properties asUserbut also one more: roles.
This usage of extends can be used to inherit from multiple interfaces simultaneously by just using comma-separated names of the base interfaces.
interface StaffUser extends User, RoleUser {
}
extends as constrain.
extends can also be used to constrain the type or to narrow the scope of a type.
export type QueryFunction<
T = unknown,
TQueryKey extends QueryKey = QueryKey,
> = (context: QueryFunctionContext<TQueryKey>) => T | Promise<T>
The example above (from a real-world implementation of tanstack-query) shows a type named as QueryFunction. This is a generic type that accepts two values: T and TQueryKey.
What matter here is to note the usage of the extends keyword: TQueryKey extends QueryKey = QueryKey. This can be read as TQueryKey and should be of type Query with a default value of QueryKey.
The previous usage of extends narrowing down or constraining the generic is the cornerstone to be able to implement conditional types since the extends will be used as a condition to check if a generic is off a particular type.
😃 Thanks for reading!
Did you like the content? Found more content like this by joining to the Newsletter or following me on Twitter
