1 00:00:02,490 --> 00:00:10,350 So arrays are supported and with numbers strings boolean objects and arrays we got the core values or 2 00:00:10,350 --> 00:00:17,610 value types javascript knows supported in typescript as you will learn at the example of objects and 3 00:00:17,610 --> 00:00:21,390 arrays typescript even offers way more functional he's there. 4 00:00:21,440 --> 00:00:24,570 But that's a bit more advanced which is why we'll have a look at that later. 5 00:00:24,930 --> 00:00:30,960 But even these core types with what you'll learn in the previous lectures are supported now typescript 6 00:00:31,010 --> 00:00:37,680 all to adds a couple of new concepts new types which we don't know from vanilla javascript. 7 00:00:37,680 --> 00:00:40,220 For example the tuple type. 8 00:00:40,350 --> 00:00:44,400 Now you might note tuples from other programming languages. 9 00:00:44,400 --> 00:00:46,600 Javascript does not have them. 10 00:00:46,620 --> 00:00:51,430 This is a tuple for example and you would say well this is an array. 11 00:00:51,570 --> 00:00:58,820 It is an array but it's a fixed length array and actually not just fixed length but all the fixed type. 12 00:00:58,810 --> 00:01:00,760 Now where could this be handy. 13 00:01:00,780 --> 00:01:10,710 Let's say here on our person we actually have another property roll which is an array with exactly two 14 00:01:10,710 --> 00:01:15,430 elements where the first one is let's say a numeric identifier like two. 15 00:01:15,540 --> 00:01:23,120 And the second one is a string identifier and a human readable description like author. 16 00:01:23,130 --> 00:01:29,610 Now this should always have exactly two elements because a user or a person in this application which 17 00:01:29,610 --> 00:01:35,590 we're writing let's say can only have one role and a role is only made up of two elements. 18 00:01:35,610 --> 00:01:39,630 Of course we could have used an object here but for some reason we want to have an array with exactly 19 00:01:39,630 --> 00:01:43,540 two elements where the first element always is the numeric identifier. 20 00:01:43,650 --> 00:01:50,220 And the second element always is the string identifier or description or however you want to call it. 21 00:01:50,250 --> 00:01:55,790 Now if we hover over this typescript actually infers this strange type which we haven't seen before. 22 00:01:55,880 --> 00:02:01,260 Effectively this means typescript understands that we have an array which might hold even strings or 23 00:02:01,260 --> 00:02:02,060 numbers. 24 00:02:02,070 --> 00:02:05,600 This is a union type and we'll dive into those later. 25 00:02:05,670 --> 00:02:12,110 The key takeaway is that typescript understands that this should be an array with these types of values. 26 00:02:12,120 --> 00:02:18,580 The downside is that we could run this code though person role push admin. 27 00:02:18,830 --> 00:02:24,980 Now for our application this might not make sense because we know we only need two elements still typescript 28 00:02:24,980 --> 00:02:27,560 doesn't know that we only want two elements. 29 00:02:27,620 --> 00:02:31,300 We would also be able to switch person role. 30 00:02:31,310 --> 00:02:35,220 The second element with index one to be a number as well. 31 00:02:35,240 --> 00:02:42,750 This would work because typescript only knows that role should be of type String or no array and therefore 32 00:02:42,770 --> 00:02:48,320 assigning a number here to the second element and therefore replacing it with a number would be allowed 33 00:02:48,350 --> 00:02:52,350 because we're just saying something about the types we generally can use in there. 34 00:02:52,640 --> 00:02:58,580 We know we want to have exactly that structure two elements first element no second element string but 35 00:02:58,580 --> 00:03:01,820 typescript doesn't do that well for such a scenario. 36 00:03:01,820 --> 00:03:10,300 A tuple would be perfect we can tell typescript what role should be by explicitly setting the type of 37 00:03:10,300 --> 00:03:11,050 role. 38 00:03:11,050 --> 00:03:17,500 So here we also have an example where typescript doesn't fir a type but we explicitly want to override 39 00:03:17,500 --> 00:03:18,240 it. 40 00:03:18,250 --> 00:03:24,130 Now here we can therefore add an explicit object type by adding a colon after person then the curly 41 00:03:24,130 --> 00:03:27,460 braces and then name should be a string. 42 00:03:27,460 --> 00:03:33,750 Age should be a number and Hobbes should be a string array so all as inferred by typescript. 43 00:03:33,790 --> 00:03:37,010 So for dad we wouldn't have required this explicit assignment. 44 00:03:37,040 --> 00:03:39,100 And as you learn it would have been bad. 45 00:03:39,100 --> 00:03:45,940 But now we have a scenario where the inference does not work in the way we want and we want to set roll 46 00:03:46,210 --> 00:03:47,370 to be a tuple. 47 00:03:47,560 --> 00:03:52,360 Now instead of setting a two string array or number array we're using the same type that was inferred 48 00:03:52,360 --> 00:03:53,470 here earlier. 49 00:03:53,470 --> 00:03:55,210 We can now use a special type. 50 00:03:55,210 --> 00:04:02,860 We use square brackets again but now inside of the square brackets we add no and then a comma and then 51 00:04:02,860 --> 00:04:04,030 string. 52 00:04:04,030 --> 00:04:12,100 Now this marks a tuple type here a tuple is a special construct typescript understands in JavaScript 53 00:04:12,100 --> 00:04:17,890 it will be a normal array but during development with typescript we'll get errors with code like this 54 00:04:17,890 --> 00:04:18,710 here. 55 00:04:18,790 --> 00:04:23,820 Now what do tuples do this year tells typescript. 56 00:04:24,020 --> 00:04:30,200 I want to have a special array with exactly two elements because I have exactly two types in there and 57 00:04:30,200 --> 00:04:32,050 the first element should be a number. 58 00:04:32,060 --> 00:04:33,840 The second element should be a string. 59 00:04:34,490 --> 00:04:46,700 Hence if we compiled this code here I get an error regarding 10 not being a sizable as a type here because 60 00:04:46,700 --> 00:04:49,940 we want to have a string as a second value. 61 00:04:49,940 --> 00:04:56,990 And if I identified 10 as a second value here then I obviously don't follow this rule. 62 00:04:56,990 --> 00:05:05,670 Now if your comment is out and we compile this works that's a bit strange because why does pushing work 63 00:05:05,670 --> 00:05:06,330 here. 64 00:05:06,330 --> 00:05:12,270 Because we're all the saying that role should have exactly two elements to why can we push admin onto 65 00:05:12,270 --> 00:05:20,460 the role array here push actually is an exception which is allowed and bowls so unfortunately types 66 00:05:20,460 --> 00:05:22,270 who can't catch this error. 67 00:05:22,420 --> 00:05:28,540 But at least it ensures that we're not assigning a wrong value here and outside of push. 68 00:05:28,630 --> 00:05:31,390 We also get some support regarding the length. 69 00:05:31,570 --> 00:05:38,260 If we set person to roll to a new value for example an empty array is not allowed one with exactly the 70 00:05:38,260 --> 00:05:45,010 structure we defined up there is allowed if I added an extra element year then we would again get an 71 00:05:45,010 --> 00:05:45,890 error. 72 00:05:45,940 --> 00:05:47,530 So the length isn't forced. 73 00:05:47,560 --> 00:05:50,730 If we assign it like this but not for pushing and so on. 74 00:05:50,740 --> 00:05:56,110 This is something you have to be aware of but still getting this support and this support is pretty 75 00:05:56,110 --> 00:06:02,890 nice and if you have a scenario where you need exactly x amount of values in an array and you know the 76 00:06:02,890 --> 00:06:09,370 type of each value in advance then you might want to consider a tuple instead of an array to get even 77 00:06:09,370 --> 00:06:15,910 more strictness into your apt to be even clearer about the type of data you're working with the type 78 00:06:15,910 --> 00:06:17,410 of data you're expecting.