Generics
In TypeScript, generics are used to assign multiple types to a function or variable without the value losing that specific type information upon return. The any
keyword is similar in that it accommodates any and all types. However, it will not retain specific type information.
Syntax
Generics are defined with <
>
brackets surrounding name(s) of the generic type(s), like Array<T>
or Map<Key, Value>
.
interface MyType<GenericValue> {
value: GenericValue;
}
let myVar: MyType<string> = { value: 'Hello, World!' };
Generic types can be used with the following:
Example of Using Generics
In the following snippet, Box<Value>
is a generic interface
that with a generic Value
type within. Next, two variables, numberBox
and stringBox
, are explicitly declared to be of type Box<number>
and Box<string>
, respectively:
interface Box<Value> {value: Value;}let numberBox: Box<number> = { value: 7 };let stringBox: Box<string> = { value: 'Marathon' };
Inferring Generic Types
Generics can be inferred from usage when not explicitly provided.
Here, logAndReturnValue<Value>
is inferred first to have a generic Value
of type Date
:
function logAndReturnValue<Value>(value: Value): Value {console.log(value);return value;}const result = logAndReturnValue(new Date('2021-12-21')); // Type: Date
Here, the KeyValueStore
class instance is inferred to have generic <string, number>
, and its makePair()
, therefore, returns type [string, number]
:
class KeyValueStore<Key, Value> {#key: Key;#value: Value;constructor(key: Key, value: Value) {this.#key = key;this.#value = value;}makePair(): [Key, Value] {return [this.#key, this.#value];}}const store = new KeyValueStore('year', 2794);const pair = store.makePair(); // Type: [string, number]
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn TypeScript on Codecademy
- Career path
Full-Stack Engineer
A full-stack engineer can get a project done from start to finish, back-end to front-end.Includes 51 CoursesWith Professional CertificationBeginner Friendly150 hours - Free course
Learn TypeScript
Learn TypeScript, a superset of JavaScript that adds types to make the language scale!Intermediate10 hours