1 00:00:02,130 --> 00:00:07,290 For that again I'm back in our dummy project set up which we used over and over again in there we can 2 00:00:07,290 --> 00:00:12,870 run and people start to bring up that development server and then in a new terminal window with the 3 00:00:12,900 --> 00:00:19,020 server running in a different terminal window I'm running TSC dash W to start my typescript compilation 4 00:00:19,020 --> 00:00:24,240 process and keep that up and running with that of course we got an empty page because there's nothing 5 00:00:24,240 --> 00:00:30,870 on it but now we can play around in the apt yes file and get started with generics and I think it's 6 00:00:30,990 --> 00:00:37,860 easiest to understand generics if we have a look at a default type which is built into typescript with 7 00:00:37,860 --> 00:00:44,260 which we actually worked a lot which turns out to be a generic and that would be an array. 8 00:00:44,490 --> 00:00:49,220 Let's say we have an array of names Max and manual. 9 00:00:49,220 --> 00:00:51,590 Let's say we get two names in there. 10 00:00:51,630 --> 00:00:57,210 Then of course the type of the names constant is an array of strings. 11 00:00:57,240 --> 00:01:04,410 Now actually we could think of this as two types being combined just as you can have an object with 12 00:01:04,410 --> 00:01:10,560 different properties where in every property you might be storing a different type an array also is 13 00:01:10,560 --> 00:01:13,760 just a thing with different data in it. 14 00:01:13,770 --> 00:01:16,330 In this case with strings in it. 15 00:01:16,470 --> 00:01:20,240 So we actually have the array type just in array. 16 00:01:20,280 --> 00:01:25,140 And if I would remove the names here and cut them you would see that times code would inferred as to 17 00:01:25,140 --> 00:01:27,360 be an array of type any. 18 00:01:27,380 --> 00:01:29,080 So with any data in there. 19 00:01:29,250 --> 00:01:32,630 Indeed typescript knows the array type. 20 00:01:32,740 --> 00:01:35,210 So we could say this year should be an array. 21 00:01:35,280 --> 00:01:41,350 But as you see if I specified like this we get an error even though I can tell you that this array type 22 00:01:41,580 --> 00:01:48,720 like this exists a typescript but we see that it's a generic type and that it requires one type argument. 23 00:01:48,780 --> 00:01:50,960 And so that's something we haven't seen before. 24 00:01:50,970 --> 00:01:53,800 We never heard about generic types before. 25 00:01:53,910 --> 00:01:59,400 Now this strange notation here whenever you see something like this in typescript you're dealing with 26 00:01:59,490 --> 00:02:07,680 a generic type a generic type is a type which is kind of connected with some other type and is really 27 00:02:07,680 --> 00:02:14,170 flexible regarding which exact type that Abbott type is sounds difficult. 28 00:02:14,170 --> 00:02:16,870 Well let's go back to that array example. 29 00:02:16,870 --> 00:02:19,330 We know that we want to store an array here. 30 00:02:19,420 --> 00:02:22,290 So an array itself could be a type. 31 00:02:22,290 --> 00:02:26,350 It's a list of data that on its own already makes up a type. 32 00:02:26,350 --> 00:02:29,790 You could say just like an object is a type on its own. 33 00:02:29,830 --> 00:02:32,250 Even if we don't know yet which data will go in there. 34 00:02:32,260 --> 00:02:39,900 So an array is a type on its own but an array of course stores data of a certain type in there. 35 00:02:39,910 --> 00:02:46,180 Now the array type itself does not care which type of data is stored in there the array type does not 36 00:02:46,180 --> 00:02:53,260 care whether you are storing a list of strings of numbers of objects or of mixed data the array type 37 00:02:53,260 --> 00:02:59,650 really doesn't care but it does care about getting at least some information even if you are telling 38 00:02:59,650 --> 00:03:05,880 it I don't know by setting this to type any array it's better than not specifying anything. 39 00:03:05,920 --> 00:03:10,660 Now this is one way of defining an array type the type of data which is stored in there and then square 40 00:03:10,660 --> 00:03:15,970 brackets the other way which would create exactly the same type would be to use that array thing and 41 00:03:15,970 --> 00:03:22,600 then these angular brackets and now between these angled brackets you specify the type of data which 42 00:03:22,600 --> 00:03:30,940 should go into the array for example a string and this year is 100 percent the same as defining this 43 00:03:30,940 --> 00:03:31,980 type here. 44 00:03:32,150 --> 00:03:38,500 Of course here you could all use a union type to say does arrays stores strings or numbers or you use 45 00:03:38,590 --> 00:03:42,920 any if you don't want to say anything about the type or as we just had its string. 46 00:03:43,000 --> 00:03:49,500 So this is a generic type a generic type built into typescript a type which is connected to another 47 00:03:49,510 --> 00:03:54,030 type where we want to know which our type dead is. 48 00:03:54,040 --> 00:03:59,890 So to typescript can give us better support because here for example if we noted what we store in there 49 00:04:00,190 --> 00:04:01,490 will be a string. 50 00:04:01,570 --> 00:04:09,430 Well then we know whenever I access an element in that array I can do string stuff with it. 51 00:04:09,430 --> 00:04:15,730 I can call all these string methods for example and typescript will not complain because it knows well 52 00:04:15,790 --> 00:04:18,220 this array holds strings. 53 00:04:18,250 --> 00:04:21,790 That's the idea of generic types a certain type. 54 00:04:21,790 --> 00:04:29,080 In this case the array type might simply work better or work at all if you provide an additional information 55 00:04:29,080 --> 00:04:33,470 about a type of data that's provided in this array type. 56 00:04:33,490 --> 00:04:36,660 And of course the array type is just one example. 57 00:04:36,670 --> 00:04:42,180 Another generic type which is built into typescript is the promise type. 58 00:04:42,190 --> 00:04:45,500 Now promises are javascript feature right. 59 00:04:45,520 --> 00:04:46,270 It's not a typo. 60 00:04:46,270 --> 00:04:46,950 Good feature. 61 00:04:47,020 --> 00:04:52,810 You can create promises in JavaScript and in case you're not sure what promises are attached you find 62 00:04:52,810 --> 00:04:53,690 a link. 63 00:04:53,950 --> 00:04:58,200 A promise can be created by using new promise. 64 00:04:58,200 --> 00:05:04,950 Again this is a constructor function a class built into javascript and the promise constructor function 65 00:05:04,950 --> 00:05:11,330 takes one argument which itself is a function which then in turn will get to arguments eventually resolve 66 00:05:11,360 --> 00:05:12,630 and a reject function. 67 00:05:12,630 --> 00:05:19,620 Now these will be passed in automatically to us by JavaScript in the browser and then in a promise we 68 00:05:19,620 --> 00:05:27,330 can for example set a timer and then in that callback function off that timer we could resolve the outer 69 00:05:27,330 --> 00:05:28,200 promise. 70 00:05:28,200 --> 00:05:38,040 So in here in this callback function we could call resolve and say this is done now when we do so. 71 00:05:38,040 --> 00:05:43,880 This promise here creates a new object a promise object which is stored in the promised constant. 72 00:05:43,890 --> 00:05:50,010 Now this promise constant actually has a specific type of type promise and then again you see these 73 00:05:50,100 --> 00:05:56,480 angular brackets because this promise eventually will resolve to something. 74 00:05:56,490 --> 00:06:02,340 Now here it says unknown because times Square does not fully able to understand that we actually will 75 00:06:02,340 --> 00:06:07,590 resolve to a string here but therefore we could say this is a promise which eventually will yield a 76 00:06:07,590 --> 00:06:08,170 string. 77 00:06:08,250 --> 00:06:11,270 And we do so by again using our generic type. 78 00:06:11,460 --> 00:06:18,570 The main type is promise but a promise just like an array kind of works to gather with other types an 79 00:06:18,570 --> 00:06:21,990 array used other types because it's stored data in it. 80 00:06:21,990 --> 00:06:27,840 Date of certain types and a promise works together with other types because eventually it kind of returns 81 00:06:28,170 --> 00:06:29,730 some data of some type. 82 00:06:29,790 --> 00:06:33,000 And in this case that's a promise which eventually returns a string. 83 00:06:33,000 --> 00:06:37,590 Now again why is that useful why is this extra type information useful. 84 00:06:37,590 --> 00:06:43,110 Well if we just had a promise type here and that would not be allowed but if we said promise of type 85 00:06:43,200 --> 00:06:48,850 anything which would basically the same as if types could you wouldn't know generic types if it wouldn't 86 00:06:48,850 --> 00:06:51,320 have any information about what we get back. 87 00:06:51,340 --> 00:06:56,620 Well then on this promise of course we can use then as we can do and all promises and eventually we'll 88 00:06:56,620 --> 00:06:59,820 get some data but we know nothing about that data. 89 00:06:59,860 --> 00:07:04,510 I can't call a string method on it for example while I can because it's any in this case. 90 00:07:04,840 --> 00:07:10,750 But I don't get any particular types support I could all the try stuff on it which definitely won't 91 00:07:10,750 --> 00:07:11,540 work. 92 00:07:12,200 --> 00:07:17,720 For example if we turns around and we return a number here I could still call a string method here because 93 00:07:17,720 --> 00:07:20,140 typescript has no information about the data. 94 00:07:20,150 --> 00:07:26,450 This promise will eventually yield now with generic types we give that information to typescript we 95 00:07:26,450 --> 00:07:33,290 can tell typescript that this promise will eventually yield a string or in this case a number and then 96 00:07:33,290 --> 00:07:34,960 times can warn us here. 97 00:07:35,000 --> 00:07:41,360 If I try to save does it will give us an error because it knows hey this promise eventually will yield 98 00:07:41,360 --> 00:07:44,450 a number and you can call split on that. 99 00:07:44,450 --> 00:07:48,050 So we get better type safety with generic types. 100 00:07:48,050 --> 00:07:53,900 So you're really flexible regarding what you do with that generic type information an array knows which 101 00:07:53,900 --> 00:07:57,160 data it stores a promise knows which data it returns. 102 00:07:57,200 --> 00:08:01,790 If you build your own generic classes or functions you might do something totally different in there 103 00:08:02,120 --> 00:08:08,090 but in the end generic types help you to get additional type information if you've got a more complex 104 00:08:08,330 --> 00:08:15,020 class or more complex function that does something with the data that's coming in in a way where it 105 00:08:15,020 --> 00:08:20,990 doesn't really care about the data being of one particular type but where you want to store the type 106 00:08:20,990 --> 00:08:24,790 information of the incoming data to get better typescript support. 107 00:08:24,890 --> 00:08:30,920 Whenever you work with your generic types so whenever you work with that promise or that array that's 108 00:08:30,920 --> 00:08:33,320 basically the idea of generics. 109 00:08:33,320 --> 00:08:36,320 So this year all were built in generics. 110 00:08:36,320 --> 00:08:37,520 Let's comment that out. 111 00:08:37,520 --> 00:08:40,430 Let's now build our own generic type word. 112 00:08:40,450 --> 00:08:42,470 Let's use our own generic types.