1 00:00:02,220 --> 00:00:06,320 So we saw some core types in action - we saw type casting in action, 2 00:00:06,360 --> 00:00:13,330 now let's dive into a bit more advanced types - objects and arrays for example. 3 00:00:13,330 --> 00:00:18,990 Now thus far, I only work with strings of numbers and yes actually HTML input element is an object 4 00:00:18,990 --> 00:00:21,390 in the end, just a specific type of object 5 00:00:21,570 --> 00:00:24,060 but let's have a look at objects in general. 6 00:00:24,330 --> 00:00:30,120 Let's say for whatever reason, when we calculate our result here, we don't want to store that in a constant 7 00:00:30,120 --> 00:00:33,300 result like this or not just in that constant 8 00:00:33,300 --> 00:00:39,780 but instead we also want to create a result container and that should be a Javascript object where we 9 00:00:39,780 --> 00:00:41,950 have the res property and that holds 10 00:00:41,960 --> 00:00:48,470 our result. Now of course, it's a bit redundant to have this extra container but for demo purposes, it's fine. 11 00:00:48,480 --> 00:00:50,700 Now clearly we have an object here, 12 00:00:50,700 --> 00:00:54,560 now in this object we have one property - the res property, 13 00:00:54,770 --> 00:00:58,130 now which type is result container now? 14 00:00:58,170 --> 00:01:00,070 Well it is of type object, 15 00:01:00,090 --> 00:01:03,140 if I add object here, this works, 16 00:01:03,270 --> 00:01:08,160 I can explicitly set this to type object and Typescript won't complain. 17 00:01:08,160 --> 00:01:13,680 Now one problem with this approach is that we don't get the best possible auto completion and type 18 00:01:13,680 --> 00:01:14,160 support. 19 00:01:14,700 --> 00:01:21,370 If I access .res here, I get an error and if I access anything else here, I also get an error. 20 00:01:21,390 --> 00:01:24,560 Now for age, that makes sense but res should definitely work, right, 21 00:01:24,630 --> 00:01:27,180 because we have a res property here. 22 00:01:27,210 --> 00:01:30,230 Well the object type is very general, 23 00:01:30,270 --> 00:01:34,420 it just says it's an object but I have no information about it. 24 00:01:34,680 --> 00:01:37,890 So that's not really the type we want to use day-to-day, 25 00:01:37,900 --> 00:01:44,910 instead we want to be specific and you can define an object type in way more detail in Typescript. Instead 26 00:01:44,910 --> 00:01:46,430 of using object here, 27 00:01:46,470 --> 00:01:52,860 you can use curly braces here in the type assignment and this might look strange at first because it 28 00:01:52,860 --> 00:01:54,690 looks like we are creating an object here 29 00:01:54,720 --> 00:01:59,160 but keep in mind we're on the left side of the equals sign here and we're after a colon, 30 00:01:59,220 --> 00:02:06,000 so this in the end just defines a type and this is just us defining an object type because we can now define 31 00:02:06,120 --> 00:02:08,720 all the key-value pairs we have in this object, 32 00:02:08,910 --> 00:02:15,360 for example we can say this object will have a res property and the type of this res property, 33 00:02:15,420 --> 00:02:21,880 so the values stored in the res property will be a number and now we're making it very clear what's 34 00:02:21,880 --> 00:02:23,650 inside result container. 35 00:02:23,740 --> 00:02:30,430 So now I can access .res here and I can do stuff with it that I can do with numbers but I can't 36 00:02:30,430 --> 00:02:36,970 access to .age for example because there clearly is no age property defined in this object type. 37 00:02:37,030 --> 00:02:43,420 Now of course you can do that but it's redundant because if we remove that we see that's the type Typescript 38 00:02:43,420 --> 00:02:50,620 inferred anyways because again, we can rely on Typescript's type inference and if we initialize an object 39 00:02:50,620 --> 00:02:58,060 with a specific value, then of course Typescript infers the object type to fit that values structure. 40 00:02:58,150 --> 00:03:03,250 So here since I initialize result container with an object that has a res property which holds a 41 00:03:03,250 --> 00:03:09,940 number, Typescript correctly infers that the type of result container is an object type with a res property 42 00:03:10,030 --> 00:03:11,830 which holds a value of type number. 43 00:03:11,860 --> 00:03:13,870 So we don't need to set it explicitly, 44 00:03:13,870 --> 00:03:19,510 I will still do it though to have these for reference but you wouldn't do it in reality because Typescript 45 00:03:19,570 --> 00:03:23,000 inference does its job here. 46 00:03:23,010 --> 00:03:25,390 Now let's take it to the next level, 47 00:03:25,520 --> 00:03:30,540 now let's say we want to store all the result containers in an array now. 48 00:03:30,650 --> 00:03:36,840 So here we could have a results array and now for every time we click 49 00:03:37,340 --> 00:03:46,940 the add button, we reach out to results and we push result container into results and then we log let's 50 00:03:46,940 --> 00:03:58,390 say the results array here. If we do that and we quickly compile this code, let's see what this gives 51 00:03:58,390 --> 00:04:04,000 us. If we reload this page and I add two numbers, you see now I got an array with one element which is 52 00:04:04,000 --> 00:04:07,950 an object which has that res property and the result 53 00:04:07,960 --> 00:04:13,590 and if I now add a second calculation, we get two entries here with these two objects. 54 00:04:13,600 --> 00:04:19,620 So this works as intended but we can add anything to results here. 55 00:04:19,840 --> 00:04:23,810 If I also add let's say the number five here, 56 00:04:23,860 --> 00:04:25,320 this will also work. 57 00:04:25,360 --> 00:04:31,450 Now maybe that is what you need in your app but in most cases, it's probably not what you want. 58 00:04:31,450 --> 00:04:37,450 Now the problem is that I initialize results here and I make it clear that it will be an array but I'm 59 00:04:37,450 --> 00:04:43,210 not specifying which kind of array, which kind of data will be in the array and in Javascript, of course 60 00:04:43,210 --> 00:04:44,620 you can have mixed data 61 00:04:44,620 --> 00:04:51,010 and as I said sometimes you need that but also a lot of the times, you don't need that and you want to 62 00:04:51,010 --> 00:04:53,750 have one data type in an array. 63 00:04:53,770 --> 00:04:57,080 Now you can tell Typescript which data type that should be, 64 00:04:57,090 --> 00:04:58,750 so let's assign a type here 65 00:04:58,920 --> 00:05:05,260 and in this case I want to have a collection of objects in this array and the objects should 66 00:05:05,260 --> 00:05:07,290 have this structure here. 67 00:05:07,360 --> 00:05:09,670 So in that case I can add this as a type 68 00:05:09,670 --> 00:05:15,490 but now I would say that results should be an object of that type but it should be an array holding 69 00:05:15,490 --> 00:05:16,520 such objects 70 00:05:16,690 --> 00:05:22,960 and we make that clear in Typescript by adding square brackets here and with that, we're saying okay this 71 00:05:22,960 --> 00:05:28,830 is an array and the data types in the array will be object of that structure 72 00:05:29,110 --> 00:05:35,650 and now you'll see I get an error down there where I try to push five because five is not assignable 73 00:05:35,680 --> 00:05:39,910 to a parameter of type object which has this structure. 74 00:05:39,910 --> 00:05:46,960 So now again, we avoid an unnecessary mistake by being clear about the types of data we store 75 00:05:46,960 --> 00:05:55,440 and just a side note of course, if we had let's say an array names here which we initialize with a value, 76 00:05:55,680 --> 00:05:58,560 then Typescript would automatically infer the array, 77 00:05:58,620 --> 00:06:01,710 here it infers that this is an array full of strings, 78 00:06:01,710 --> 00:06:06,630 so that is something we can always rely on. Now we can also turn this in a const by the way. 79 00:06:06,660 --> 00:06:10,670 So that is something we can rely on and this is just needed here 80 00:06:10,830 --> 00:06:16,110 if we initialize this with no array or with an empty array and we want to be clear about the types of 81 00:06:16,110 --> 00:06:17,800 data we can add. 82 00:06:17,820 --> 00:06:23,310 Now with that let's take our object here to the next level though. In here, 83 00:06:23,310 --> 00:06:28,070 I now want to also have a function, print, 84 00:06:28,320 --> 00:06:33,100 so I want to the method to be precise because a function in an object is called a method. 85 00:06:33,420 --> 00:06:35,580 We can do that by adding print like this 86 00:06:38,970 --> 00:06:46,060 and in there, I just want to console log this res. 87 00:06:46,070 --> 00:06:52,310 Now I get an error here, I get an error that I can't add a print method here because I clearly 88 00:06:52,310 --> 00:06:56,400 defined that my object will only have one property, res, which is a number, 89 00:06:56,420 --> 00:06:58,910 it won't have a print property which hold a function. 90 00:06:59,630 --> 00:07:05,790 So maybe we should extend our function type here or simply get rid of it here and use inference. 91 00:07:05,810 --> 00:07:09,750 Now this works here and surprisingly, this also works, 92 00:07:09,770 --> 00:07:15,200 I can push this to my array even though in the array, I say nothing about this function here. 93 00:07:15,200 --> 00:07:18,050 Well that is how Typescript simply behaves here, 94 00:07:18,110 --> 00:07:24,090 it doesn't really see this as a problem, that we have more properties than as I defined here, 95 00:07:24,140 --> 00:07:28,910 it's just happy that it gets an object which at least has this res property, it doesn't care that we 96 00:07:28,910 --> 00:07:35,870 have more properties. Still we could be more specific up there and make it clear that any objects that 97 00:07:35,870 --> 00:07:39,640 go into that array should have a print method 98 00:07:39,820 --> 00:07:45,200 and for that we now have a new question to answer, how do we define that 99 00:07:45,200 --> 00:07:51,710 there should be a function in print which has certain types for its possible parameters and certain 100 00:07:51,710 --> 00:07:58,860 return types? Well we assign a type to print and we use a so-called function type here. 101 00:07:59,030 --> 00:08:01,170 This looks like an arrow function here, 102 00:08:01,250 --> 00:08:03,950 we have a list of parameters and then an arrow 103 00:08:04,130 --> 00:08:09,500 but again just as with the object here on the left side of the equal sign, this is not a new function 104 00:08:09,500 --> 00:08:16,070 we create, instead we're just defining the type of a function that will eventually be stored in print 105 00:08:16,960 --> 00:08:21,920 and here I want to have a function which returns nothing, so which has a return type of void and which takes 106 00:08:21,920 --> 00:08:23,340 no parameters 107 00:08:23,510 --> 00:08:26,870 and if it would take parameters, we could simply add them here 108 00:08:26,960 --> 00:08:29,300 but the print function doesn't need any. 109 00:08:29,300 --> 00:08:36,830 So with that, I am making it clear that in results, we have an array of objects where every object has 110 00:08:36,830 --> 00:08:42,860 a res property which is of type number and a print property which actually holds a function, which takes 111 00:08:42,860 --> 00:08:46,530 no parameters and which returns nothing 112 00:08:46,550 --> 00:08:56,150 and with that I can for example call results 0.print here like this and it should just work. 113 00:08:56,240 --> 00:09:00,200 So let's try to compile this and it does compile without errors 114 00:09:00,350 --> 00:09:08,060 and if I now reload, you'll see indeed it prints 10 here and that is coming from this line here. So that's 115 00:09:08,060 --> 00:09:10,200 really nice and useful 116 00:09:10,370 --> 00:09:16,870 and this is how we can work with objects, arrays and functions and how we can work with their types. 117 00:09:16,880 --> 00:09:20,300 Now let's see which other types types Typescript has that we should be aware of.