1
00:00:02,250 --> 00:00:08,260
Now with that, we're nearing the end and there's just one more type I also want to introduce or one

2
00:00:08,280 --> 00:00:08,960
Typescript feature

3
00:00:08,970 --> 00:00:13,350
I want to introduce and that's the generic types feature.

4
00:00:13,440 --> 00:00:14,070
Now what's that?

5
00:00:15,000 --> 00:00:18,680
Well we already are working with one generic type here.

6
00:00:18,780 --> 00:00:27,430
If we have a look at our results here, we see this is an array, an array full of calculation containers.

7
00:00:27,840 --> 00:00:33,330
Now array turns out to be a type in Typescript which is a so-called generic type,

8
00:00:33,330 --> 00:00:38,580
we could say that results is of type array here but Typescript wouldn't like this

9
00:00:38,580 --> 00:00:46,290
as you see. It tells us that the generic type array, t, whatever that is, requires one type argument.

10
00:00:46,290 --> 00:00:53,360
There are certain values in Javascript as well as in Typescript therefore that simply work together

11
00:00:53,400 --> 00:01:00,660
with other value types and other values and the array is such a value, the array itself is a value, any

12
00:01:00,660 --> 00:01:06,440
array is an object but an array of course only really works because it stores other values,

13
00:01:06,510 --> 00:01:12,900
so we get two types work together, the array and the data in the array and therefore, we want to be clear

14
00:01:12,900 --> 00:01:20,970
that results holds an array but we also want to be clear about which array. Now we could say array any

15
00:01:21,900 --> 00:01:26,270
and use these strange angled brackets to connect these two types.

16
00:01:26,310 --> 00:01:34,150
We have an array and what's in the array is anything but we can also be more precise and say it's an

17
00:01:34,150 --> 00:01:39,880
array of calculation containers and in the end what we used before, calculation container with square

18
00:01:39,910 --> 00:01:49,420
brackets thereafter, is just syntactic sugar for this notation here, where we use the generic

19
00:01:49,450 --> 00:01:56,410
array type to be very precise about the type of data inside of it and there are other generic types

20
00:01:56,470 --> 00:01:57,630
in Typescript as well,

21
00:01:57,640 --> 00:02:04,450
for example the promise type. If you have a promise, for example because you're using the fetch API to

22
00:02:04,450 --> 00:02:12,520
make a HttpRequest, then of course you have a promise as a return type but that promise will

23
00:02:12,580 --> 00:02:18,130
eventually resolve a value and that value will also be of a type,

24
00:02:18,130 --> 00:02:22,600
so a promise is another example of two types working together.

25
00:02:22,600 --> 00:02:26,870
We have the promise type and the promise will give us another type of data,

26
00:02:26,860 --> 00:02:32,470
therefore a promise is another generic type in Typescript, just like array,

27
00:02:32,470 --> 00:02:38,290
it's the combination of multiple types and you can also build your own generic types if you have something

28
00:02:38,290 --> 00:02:39,390
like this.

29
00:02:39,550 --> 00:02:47,830
If we have a very simple dummy function, maybe at the very bottom here, logAndEcho which doesn't do

30
00:02:47,830 --> 00:02:56,420
much but which gets a value and which then logs the value and returns it,

31
00:02:56,720 --> 00:02:59,380
then this could be a generic function.

32
00:02:59,390 --> 00:03:02,720
Now here we accept any type of data you could say

33
00:03:02,720 --> 00:03:05,360
but then we don't get any extra Typescript support.

34
00:03:05,570 --> 00:03:13,790
If I call logAndEcho and pass in hi there, then I know logAndEcho returns what I passed in there and

35
00:03:13,790 --> 00:03:14,810
that's a string

36
00:03:14,810 --> 00:03:20,300
so I would like to do string stuff with it like split it but I can't do that.

37
00:03:20,420 --> 00:03:21,710
Why can't I do that?

38
00:03:21,860 --> 00:03:26,840
Because Typescript doesn't know what logAndEcho returns, it returns anything because I set the value type

39
00:03:26,840 --> 00:03:31,810
to anything here. So that's where generic types can help us,

40
00:03:31,880 --> 00:03:34,520
we can create a generic function in this case,

41
00:03:34,520 --> 00:03:39,650
you can also have generic classes and objects but here we can build a generic function.

42
00:03:39,650 --> 00:03:46,400
We do that by adding angled brackets after logAndEcho, so before the parameter list and then typically

43
00:03:46,400 --> 00:03:52,100
you use t as a placeholder for the type but you can use any identifier you want but t is what you'd

44
00:03:52,100 --> 00:03:59,720
see most often and then you say val is also of type t and what you're saying with that is whoever calls

45
00:03:59,720 --> 00:04:05,600
logAndEcho should give me the precise, the exact type of data he wants to work with and then I know

46
00:04:05,600 --> 00:04:10,400
that I will get an argument of this type and you can use that generic type anywhere in the function,

47
00:04:10,540 --> 00:04:14,920
either for the parameters or inside of that function body, wherever you need it

48
00:04:15,470 --> 00:04:20,870
and here when I call logAndEcho, I can now make it clear that I pass in a string here and now I get

49
00:04:20,870 --> 00:04:25,550
nice auto completion if I for example want to split the result or whatever I want to do.

50
00:04:26,420 --> 00:04:30,030
So that's how I can build my own generic function in this case.

51
00:04:30,030 --> 00:04:34,730
Now as I said, you can also build your own generic classes and so on but this would now lead a bit too

52
00:04:34,730 --> 00:04:35,210
far,

53
00:04:35,240 --> 00:04:40,370
there is way more you can do with Typescript but this is only meant to be an introduction which gets

54
00:04:40,370 --> 00:04:45,830
you to think about Typescript and gets you introduced to some of the core features which you then will

55
00:04:45,830 --> 00:04:47,030
see throughout

56
00:04:47,030 --> 00:04:52,550
other projects you're working on or which you will then see once you dive deeply into Typescript.

57
00:04:52,730 --> 00:04:55,420
So these are generic types, they're everywhere,

58
00:04:55,430 --> 00:05:00,440
there are built-in generic types like array and promise and you can also build your own ones.