 in TypeScript is a way to make your code more abstract and reusable. 

Let's say you want to create a function that returns a first element from a given list:

function head(list) {
  return list[0];
}

How to type it? We cannot know beforehand list of what type will be given. 

 to enumerate every possible type we accept:

function head(list: string[]): string
function head(list: number[]): number
function head(list: boolean[]): boolean {
  return list[0];
}

type Entity = string | number | boolean;

function head(list: Entity[]): Entity {
  return list[0];
}

...But all of those ways have a common issue. If we want to pass, for example, an object, we have to define it in the type manually. This isn't convenient, and TypeScript has a better way to do it.

Generic type is a type that accepts arguments and uses them in some way. In the case of our 

function head<TEntity>(list: TEntity[]): TEntity {
  return list[0]
}

. This parameter is used by TypeScript compiler to define the 

 type later. So, when we use this function like this:

We don't have to manually define a type now, since TypeScript will automatically defer it from the argument.

It is easier to think about generics as of “type-functions”. They accept some type-parameters and produce a result-type.

 for you if pass an array of elements with different types.

With generics, you can describe custom types and interfaces in more abstract way. 

Let's say you want to create a type-alias for array and call it 

. You would use this type somehow like this:

With TypeScript, you can define a generic type for this:

You can read it as a ”type-function“. It 

Same with interfaces. You can define an interface with type-parameters to set a type which this interface can work with:

// First, define an interface that accepts
// a TEvent type-parameter:
interface EventHandler<TEvent> {
  
  // Then, pass this parameter as a type of
  // `event` argument of `handle` method:
  handle(event: TEvent): void
}

// When typing a `clickHandler`, 
// define the `TEvent` to be the `MouseEvent` type
const clickHandler: EventHandler<MouseEvent> = {
  
  // The `e` argument will be automatically
  // assigned with `MouseEvent` type.
  handler(e) {}
}

Most of the time generic types and interfaces are used to define type-constraints.

You can also set constraints for your generic types to make sure it is used properly.

. Then, you can specify those types as a 

interface EventHandler<
  // `extends` keyword set a constraint on type-parameter.
  // With this extension `EventHandler` cannot
  // be used with any other type 
  // except for `MouseEvent` or `KeyboardEvent`.
  TEvent extends MouseEvent | KeyboardEvent
> {
  handle(event: TEvent): void
}

You can even define a constraint based on a type-parameter!

 function, that returns the value of a property in an object:

function select(object, key) {
  return object[key];
}

You don't know beforehand what type of object will be passed to this function. However, you can set a constraint on 

 argument to ensure selecting only from existing properties on the 

function select<
  // `TObject` parameter is required as a reference later:
  TObject, 
  // `TKey` refers to keys of `TObject`: 
  TKey extends keyof TObject
>(object: TObject, key: TKey) {
  return object[key];
}

When you use this function with an object:

const example = {
  username: 'Alex',
  age: 26
}

// ...The second argument will accept 
// only `username` and `age`
// because the `example` object 
// has only these 2 keys.
select(example, 'username');

This is also useful when coding in IDE with auto-completion because it will allow you to select a seconds argument:

Imagine you need to convert some type in a way to make every field optional. 

type SomeType = {
  key1: number;
  key2: string;
}

// Convert it to => 

type OptionalType = {
  key1?: number;
  key2?: number;
}

. Utility types are generic types that perform some transformation on a given type-parameters.

 makes every key in a given object optional.

There are many other useful utility types 

described in the TypeScript documentation

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">How to Use Generics in TypeScript</h1><p><a href="https://www.typescriptlang.org/docs/handbook/generics.html" rel="noopener noreferrer nofollow">Generics</a> in TypeScript is a way to make your code more abstract and reusable. </p><p>Let's say you want to create a function that returns a first element from a given list:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-b06rG" id="cm-b06rG">function head(list) {
  return list[0];
}</textarea><p>How to type it? We cannot know beforehand list of what type will be given. </p><p>We could use <a href="https://www.typescriptlang.org/docs/handbook/functions.html#overloads" rel="noopener noreferrer nofollow">overloads</a> to enumerate every possible type we accept:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-761Gp" id="cm-761Gp">function head(list: string[]): string
function head(list: number[]): number
function head(list: boolean[]): boolean {
  return list[0];
}</textarea><p>...Or we could use a union type:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-BUl9v" id="cm-BUl9v">type Entity = string | number | boolean;

function head(list: Entity[]): Entity {
  return list[0];
}</textarea><p>...But all of those ways have a common issue. If we want to pass, for example, an object, we have to define it in the type manually. This isn't convenient, and TypeScript has a better way to do it.</p><h2><a name="generics" id="generics">Generics</a></h2><p>Generic type is a type that accepts arguments and uses them in some way. In the case of our <code>head</code> function, we can declare:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-vVeto" id="cm-vVeto">function head&lt;TEntity&gt;(list: TEntity[]): TEntity {
  return list[0]
}</textarea><p>The angle brackets define a <em>type-parameter</em>. This parameter is used by TypeScript compiler to define the <code>TEntity</code> type later. So, when we use this function like this:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-p4hwL" id="cm-p4hwL">const first = head([1, 2, 3]);</textarea><p>...the <code>TEntity</code> becomes a <code>number</code>. </p><p>When we use the function like this:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-K7qBs" id="cm-K7qBs">const first = head(['a', 'b', 'c']);</textarea><p>...the <code>TEntity</code> becomes a <code>string</code>.</p><p>We don't have to manually define a type now, since TypeScript will automatically defer it from the argument.</p><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>It is easier to think about generics as of “type-functions”. They accept some type-parameters and produce a result-type.</p></div></div><p>It will even <a href="https://www.typescriptlang.org/play?#code/GYVwdgxgLglg9mABACwKYEMAmAeAKgPgAoAbGAZygC5FcBtAXQEprdEBvAWAChFfEAnVFBD8kpCrQAM9bgF9u3CAgqJgMfioC8KDJkK0AjABpEAcnSmTwdMTKomAbiA" rel="noopener noreferrer nofollow">defer a union type</a> for you if pass an array of elements with different types.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201209100743513_%C2%ABScreenshot%C2%BB%202020-12-09%20at%2013.06.43.png" attachmentid="50cd855a-382f-4abc-b660-f0db52e3c37d" contenteditable="false"><div></div></figure><h2><a name="generic-types-and-interfaces" id="generic-types-and-interfaces">Generic Types and Interfaces</a></h2><p>With generics, you can describe custom types and interfaces in more abstract way. </p><p>Let's say you want to create a type-alias for array and call it <code>List</code>. You would use this type somehow like this:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-10H1P" id="cm-10H1P">const numbers: List&lt;number&gt; = [1, 2, 3];</textarea><p>With TypeScript, you can define a generic type for this:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-COa4s" id="cm-COa4s">type List&lt;TEntity&gt; = TEntity[];</textarea><p>You can read it as a ”type-function“. It <em>takes an argument</em> <code>TEntity</code> and <em>returns</em> an <code>array of TEntity</code>.</p><p>Same with interfaces. You can define an interface with type-parameters to set a type which this interface can work with:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-h9Byf" id="cm-h9Byf">// First, define an interface that accepts
// a TEvent type-parameter:
interface EventHandler&lt;TEvent&gt; {
  
  // Then, pass this parameter as a type of
  // `event` argument of `handle` method:
  handle(event: TEvent): void
}

// When typing a `clickHandler`, 
// define the `TEvent` to be the `MouseEvent` type
const clickHandler: EventHandler&lt;MouseEvent&gt; = {
  
  // The `e` argument will be automatically
  // assigned with `MouseEvent` type.
  handler(e) {}
}</textarea><p>Most of the time generic types and interfaces are used to define type-constraints.</p><h2><a name="generic-constraints" id="generic-constraints">Generic Constraints</a></h2><p>You can also set constraints for your generic types to make sure it is used properly.</p><p>Let's say you want your <code>EventHandler</code> to be used only with <code>MouseEvent</code> or <code>KeyboardEvent</code>. Then, you can specify those types as a <em>constraint</em>:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-24Bm4" id="cm-24Bm4">interface EventHandler&lt;
  // `extends` keyword set a constraint on type-parameter.
  // With this extension `EventHandler` cannot
  // be used with any other type 
  // except for `MouseEvent` or `KeyboardEvent`.
  TEvent extends MouseEvent | KeyboardEvent
&gt; {
  handle(event: TEvent): void
}</textarea><p>You can even define a constraint based on a type-parameter!</p><p>Let's say you want to create a <code>select</code> function, that returns the value of a property in an object:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-NhGZO" id="cm-NhGZO">function select(object, key) {
  return object[key];
}</textarea><p>You don't know beforehand what type of object will be passed to this function. However, you can set a constraint on <code>key</code> argument to ensure selecting only from existing properties on the <code>object</code>:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-3XQe4" id="cm-3XQe4">function select&lt;
  // `TObject` parameter is required as a reference later:
  TObject, 
  // `TKey` refers to keys of `TObject`: 
  TKey extends keyof TObject
&gt;(object: TObject, key: TKey) {
  return object[key];
}</textarea><p>When you use this function with an object:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-NDl6D" id="cm-NDl6D">const example = {
  username: 'Alex',
  age: 26
}

// ...The second argument will accept 
// only `username` and `age`
// because the `example` object 
// has only these 2 keys.
select(example, 'username');</textarea><p>This is also useful when coding in IDE with auto-completion because it will allow you to select a seconds argument:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201209103448444_%C2%ABScreenshot%C2%BB%202020-12-09%20at%2013.34.33.png" attachmentid="ebdb4130-906d-460e-b3e8-00e51c06b8e4" contenteditable="false" data-width="1512" data-height="550"><div></div></figure><h2><a name="utility-types" id="utility-types">Utility Types</a></h2><p>Imagine you need to convert some type in a way to make every field optional. </p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-waRUt" id="cm-waRUt">type SomeType = {
  key1: number;
  key2: string;
}

// Convert it to =&gt; 

type OptionalType = {
  key1?: number;
  key2?: number;
}</textarea><p>TypeScript already has a <code>Partial</code> <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html" rel="noopener noreferrer nofollow">utility type</a>. Utility types are generic types that perform some transformation on a given type-parameters.</p><p>In our case, <code>Partial</code> makes every key in a given object optional.</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-Gw1gt" id="cm-Gw1gt">type OptionalType = Partial&lt;SomeType&gt;;</textarea><p>There are many other useful utility types <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html" rel="noopener noreferrer nofollow">described in the TypeScript documentation</a>.</p><h2><a name="sources" id="sources">Sources</a></h2><ul><li><p><a href="https://www.typescriptlang.org/docs/handbook/generics.html" rel="noopener noreferrer nofollow">Generics in TypeScript</a></p></li><li><p><a href="https://www.typescriptlang.org/docs/handbook/functions.html#overloads" rel="noopener noreferrer nofollow">Overloads</a></p></li><li><p><a href="https://www.typescriptlang.org/play?#code/GYVwdgxgLglg9mABACwKYEMAmAeAKgPgAoAbGAZygC5FcBtAXQEprdEBvAWAChFfEAnVFBD8kpCrQAM9bgF9u3CAgqJgMfioC8KDJkK0AjABpEAcnSmTwdMTKomAbiA" rel="noopener noreferrer nofollow">Union Type Example</a></p></li><li><p><a href="https://www.typescriptlang.org/docs/handbook/utility-types.html" rel="noopener noreferrer nofollow">Utility Types</a></p></li></ul>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

How to Use Generics in TypeScript

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript