Check out a free preview of the full Visual Studio Code course

The "Generics" Lesson is part of the full, Visual Studio Code course featured in this preview video. Here's what you'd learn in this lesson:

Mike reviews how to incorporate type checking for generics. For example, promises that wrap other values, which have their own types, are defined using this concept of generics

Preview
Close

Transcript from the "Generics" Lesson

[00:00:00]
>> Mike North: Getting a little bit more involved here, there is support for generics, so if anyone here has worked with Android apps, or other languages that support parameterized types, this is what that looks like. The benefit here, before we look at what it does exactly, we want all of the benefits of our build-time type safety.

[00:00:24]
But we may want to operate across a variety of different types. So in this case, we've got a function with some interesting annotations here. Some interesting stuff in the comments. It's called gimmieFive, and if we look at what the function does, it creates an array with pre-allocated with five spaces.

[00:00:43]
And then it will fill all of the items from zero, one, two, three, and four with a copy of or a reference to whatever item is passed into the function. So if I pass into students, we're going to get an array with five copies of that string. Students, students, students, students, students.

[00:01:05]
Right, five times. And so the type of this variable here, type of students, is going to be an array of strings. So we can push something in it, and it should work just fine. It will be great. Now if we do something like this and we push in when we say gimmieFive, we pass in an object like that.

[00:01:29]
The type of this object variable here is gonna be a little bit different than what you might expect, especially if you're coming from the Java world or the nominally typed world where you'd say that's an array of objects. Really it's an array of this type here. It's an array of objects who have a property key whose value is a string.

[00:01:58]
So when we try to push an empty object in here whose structure doesn't match, that it has no key or if we provided a key and they had a number as the value, it would object in a very similar way. The structure did not match. But that's the idea behind a generic.

[00:02:17]
Now let's look at how we're defining it. What we're saying here, this line here says I have a parameterized type and I'm going to refer to it as T, meaning we'll figure it out later. Whatever T is, we're going to refer to it later. But here on out, when I say capital T, I mean whatever type we happen to be working with here.

[00:02:42]
I take as a parameter called item, I take a parameter called item and its type is T, and whatever I return, it is an array of Ts, so when I give this function a string, T becomes string and so I return an array of strings. When I give it a number, I say give me five and I pass the number one in.

[00:03:05]
It's gonna give me back an array of numbers, right. Whatever you pass it, it's gonna return an array of the same type.
>> Mike North: So that is a generic. Now, we can use generics more deliberately using a syntax like this. So, this is useful when dealing with things like arrays and promises, usually containers for other values, right?

[00:03:29]
Where what we're effectively saying is, I am a promise, or promise-looking thing that resolves to a string Right? This is useful, because now we can type not only that it's a promise, but that it resolves to the correct thing. And so if we were expecting to take a promise that resolves to a number as an argument, type script would provide us some safety here.

[00:03:54]
It would let us know I'm not supposed to mix those, it's not going to give me what I want. You may look at this and see, we might have some JSX issues, that's true. So this predates JSX. There are some loopholes that we can use. For example, we can use this here instead of something like this.

[00:04:22]
And this will only really bite you in TypeScript where that kind of expression lives outside of a comment, right. But this here might throw TypeScript off a little bit in particular when we talk about casting. In TypeScript, which for those who are going to the TypeScript workshop later, it looks kinda like this.

[00:04:47]
This is only valid in TypeScript. We're basically saying cast 31 to a number but this looks a lot like JSX, so we run into problems there.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now