All language subtitles for 010 Diving Into Generics_en

Now, we'll of course, work a lot with functions

once we start working with React and TypeScript

and therefore we'll then see

all those function types in action there.

I wanna conclude this basic introduction

to TypeScript with a slightly more advanced

yet very important TypeScript feature.

And that would be Generics.

Now this can be tricky to wrap your head around,

but I'll try my best to explain it such that it makes sense.

Let's say we have a function here,

which I'll name 'insertAtBeginning',

and this function takes an array and the value

as parameters,

and the array should be

any array full of any kinds of values.

And the values should be any kind of value

because I don't care in this function

if it's an array full of numbers or strings

or of personal objects.

Whatever it is, what I wanna do in this function,

is I wanna create a new array,

for example by using the spread operator

and copying the existing array,

that's a standard modern JavaScript feature

also supported by TypeScript.

And then in front of that old array,

I wanna insert the value.

And then I want to return this new array here.

That could be a utility helper function,

which we create to have a function

which we can easily call to add a value

in an array without changing the existing array.

So the advantage of this function could be

that the original array never changes,

but instead we're getting a brand new array.

Now for this,

I could of course have a demo array with,

let's say free values,

and then I get my updated array

Where I call 'insertAtBeginning'

and I pass in the demo array.

And then a value of minus one let's say.

With that, I know that the updated array

will be this array with minus one inserted at the beginning.

So this will give me minus one, one, two, three.

And hence thereafter I might wanna do things with that array

which I can do with an array full of numbers.

But the problem is that updated array,

if I hover over it

is inferred to be of type any array.

So an array full of any kind of values.

TypeScript here doesn't pick up

that it's an array full of numbers.

Why, because here I have any, as a type

And I can't say that I only wanna allow numbers here,

because what if I want to use this utility function

with an array full of strings?

So we need any, but at the same time

that kind of removes all kind of TypeScript support

we might be getting after calling this function.

We're not getting any good TypeScript support for updated

array thereafter, because that is an inferred

to be an array full of any kind of objects

or any kind of values.

And that's not useful.

If I then for example, try to access the first element

and called split here, which I could call on a string.

I don't get an error here.

I would get a runtime error instead

because I can't call split on a number.

But again, TypeScript doesn't know that the first value

in updated array is a number.

We know it as a developer, but because of our type

definitions here, which we need,

TypeScript doesn't know it.

And to work around such problems,

we have this feature of Generics

and that's why I had does lengthy introduction here

because it is important to understand why

this feature exists.

With this Generics feature, we can convert this function

to a Generic function.

For this we use a special syntax here

after the function name,

in front of the parameter list, we add angle brackets

and that's now not a standard JavaScript feature

but really only a feature we can use here

since we're using TypeScript.

And in here we can define a Generic type which will only

be available inside of this function.

Typically that's called T for type

but any identifier of your choices okay.

Now you can use this type in your function,

including the parameter list.

And here I'm saying, I want to use this for my array.

So my array will be full of Ts and my value.

This should always be of type T.

But how does this help us?

Well like this set of codes it's just very cryptic,

but now when we call this function, now TypeScript actually

is able to understand that

it should look at the concrete values of the arguments here.

And it understands that this is an array of numbers

and this is just a number and they are free to understand

that updated array will be an array of numbers.

Because of this generic type feature, because we're telling

TypeScript that the type here is actually not any type

it's not any kind of value.

Instead, we tell it that the type of this array and

of this value should be the same

just that this is an array,

but it's an array full of the same types of values

as this single value has it.

And that's an important piece of information.

Therefore, TypeScript is able to look at the type

of demo array, which it knows.

It knows that this is a, an array of numbers it's able

to infer this, and it looks at this type.

And then it knows that logically, the array which gets

constructed here has to be of the same type

as the input array.

It's able to infer this here.

And hence, it's able to infer

that what we get back here has to be an array of numbers.

And if I would call, 'insertAtBeginning' here

with an array of strings

Like this, and I then pass in a string here,

and I have my string array here,

TypeScript is also able to infer this correctly

because again, it looks at this type and this type

and it knows that the return type is of the same value

as this type, as T input array, enhance it again,

infers this correctly.

And therefore for the updated array here where it knows

that it has to be an array full of numbers.

It's now able to warn me when I try to call split.

It tells me that this does not exist on type number.

So that's just as important feature of generics.

It's simply helps you write functions in this case,

which are type safe yet flexible.

They are flexible.

They work with any type, but then once a certain type

is used for that function, execution,

that type is locked in and known.

And that allows you to get the best

of both worlds, flexibility and type safety.

Again, I am fully aware that this generics feature can still

be tricky to wrap your head around,

but we'll also see it in action.

Soon when we start working with reactants type stripped

and then combined with what you learn here,

it should become clearer and clearer

how it works and why it's important.

And speaking off that let's know, leave this basics file

and this non react project, and let's instead move

towards a react project, which is using TypeScript.