Generic Functions, Type Inference and Generics

A free video tutorial from Angular University
Best Selling Angular Courses | 100k+ students | 16 courses
Rating: 4.6 out of 5Instructor rating
17 courses
155,481 students
Generic Functions, Type Inference and Generics

Learn more from the full course

Typescript Masterclass & FREE E-Book

Learn Typescript: Build a Node REST API in Typescript, query it with Angular

07:09:41 of on-demand video • Updated September 2022

Code in Github repository with downloadable ZIP files per section
Use Typescript with confidence in a full stack development context
Learn how to build Node Js processes with Typescript
Learn how to build a small Angular application using the Angular CLI
Have an Angular Client that queries an HTTP REST API using the Angular HTTP Module
Have deep understanding of the Typescript 2 Type System, and know how to leverage it in practice
know how to import third party type definitions and use them to build better programs
Understand the benefits of Type Safety and leverage them to build better programs
Know How to Build a small REST API with Express and Typescript
Know how to query a SQL database using Sequelize and Typescript
English [Auto]
Let's say for example that we have here an array of heroes and you can see that these are objects so each object has a property which has a name and the value that is a string. We could define such a type by using an interface so we could declare an interface name has a name that has a property which is a string. So we can now use this interface to add here that type of notation and say Heroes is an array of has name and the program would compile correctly. Now let's say that we would like to create a clone of these arrays so let's call it here to the clone array clones and we are going to declare it as being also as a type of array of has name. In order to clone the array Let's define a function clone array. So in order to clone an array we're going to receive an array as input and notice that now we receive an array implicitly has a nanny type we are going to declare this as being an array of type any way because the array that we want to clone could be of any type when the return result of this function should also be an array of any. Let's do a very simple implementation of this method. We are going to use the slice array operator. So we are going to slice the array starting at position 0. So this will effectively create another array similar to the heroes array. Now we can use this function. But take a look. We are using the type and so this is not type safe code we can use global array to clone it. So let's try out. We call clone array and we passin heroes. Let's now log out the result to the screen as you can see we have no further compilation errors. Let's try this out in the terminal. So as usual to run these file generics not yes we have created here in our package that Jayson generics NPM script that we can run with the command NPM run generics. Let's do that in the terminal. So if we do NPM run generics we are going to get the clone array printed to the screen as expected. So this is working. So what is the problem in this code that generics can help us improve. Take a look this variable here clone's if we do control shift P on it we can see that it's of type has name array but this is only because we have defined the type explicitly because if we remove the type annotation we will see what is type that is being inferred. So it's an array of any. So with this definition of Clow Nery we have not preserve the type of the array that we were cloning we to any irri and we return that and Yuriy. So we can no longer rely here at the level of the closed variable in type inference to help us write our code. We would like to improve upon that. And there is a way to do it using generics. Let's turn on the clone array function into a generic function. For that we use this angle bracket notation and we define here a type that will be used inside the function. So this type could be any character we usually by convention use the t measure school. Now this is a type definition and we can use it here inside the function. So instead of any We are going to use here the details and we will also return the details. So if we hit control as we can see that everything is still compiling correctly. But now this program is typesafe meaning if we go to colognes and we do control shift P we can see that this is now a variable of type has name. Notice that we did not have to hear for example the type his name although we could have but this was not necessary with typescript generics we can infer that the T type based on the input parameter of the generic Mefford we don't have to define the generic type explicitly associated to the function although we do notice also that T does not have to be an interface or a class or a custom type. In general we could also have here for example an array of numbers and we could create an array called clone numbers that would clone the numbers array so we can also be implicitly primitive type again. We could have defined here the type number explicitly but we didn't have to type inference determined for ERs that cloned number is a number array. So see the generics functionality is very useful for writing code that is independent of the type. This is typically the case in Medford that handle containers of another type. We want to be able to work with the container in this case the array we want to be able to use slice filter my Purdue's and all the standard array operators without independently of the type contained inside the array. We want to be able to preserve type inference across our program without having to write multiple clone array functions for different types other than has name. We want to make the function generic and the name generics.