1
00:00:02,170 --> 00:00:08,650
So now after all these features where we work with the type stem cells so to say where we worked on

2
00:00:08,650 --> 00:00:16,150
checking types costing two times let's come back to features that help us write flexible code.

3
00:00:16,150 --> 00:00:21,730
Of course still relate the two types it is typescript after all but not so much focused on just the

4
00:00:21,730 --> 00:00:23,450
types and how we can manage them.

5
00:00:23,590 --> 00:00:30,010
And for that I want to start with index types a feature that allows us to create objects which are more

6
00:00:30,010 --> 00:00:33,080
flexible regarding the properties they might hold.

7
00:00:33,080 --> 00:00:34,820
Now what do you mean by that.

8
00:00:34,900 --> 00:00:39,730
Let's say you're writing an application where you're validating some user input.

9
00:00:39,730 --> 00:00:45,940
So you have multiple input fields and depending on what the user enters steer and which field it is

10
00:00:45,940 --> 00:00:50,530
you might want to store and eventually show different error messages.

11
00:00:50,530 --> 00:00:55,540
For example if it's an email field you want to check whether it is an email and if it is not you want

12
00:00:55,540 --> 00:00:59,750
to add a proper error message to some error container.

13
00:00:59,890 --> 00:01:08,890
So that's what I'll start with I will have my interface error or container here and that should be an

14
00:01:08,980 --> 00:01:15,100
object hence I user interface here but it should be flexible regarding what it holds ultimately my goal

15
00:01:15,100 --> 00:01:21,190
is that with that we can create objects where we have some error identifier which could be the idea

16
00:01:21,190 --> 00:01:23,700
of the input field to which the error belongs.

17
00:01:23,740 --> 00:01:32,440
For example email and then some error string not a valid email and then we have another property let's

18
00:01:32,440 --> 00:01:40,580
say user name and then an error a string we might be storing for Dad input field if the input is incorrect

19
00:01:41,990 --> 00:01:49,220
must start with a character something like that should be stored in that object.

20
00:01:49,220 --> 00:01:55,720
The problem with that is I don't know in advance which exact property names that we'll have in here.

21
00:01:55,760 --> 00:02:01,700
You could say well we'll have email and user name but for one I want this to be a flexible container.

22
00:02:01,700 --> 00:02:07,820
I want to be able to use it on any form I have in my web page and I might have different forums with

23
00:02:07,820 --> 00:02:10,730
different inputs with different identifiers.

24
00:02:10,730 --> 00:02:16,520
So I don't want to restrict myself to just or email and user name errors.

25
00:02:16,520 --> 00:02:22,850
And in addition even if we always had just email and user name inputs and we just want to store arrows

26
00:02:22,850 --> 00:02:29,330
for those what do we do if just the email is invalid and not the user name then of course in his object

27
00:02:29,600 --> 00:02:32,880
we could store now as a value for a user name.

28
00:02:32,930 --> 00:02:34,640
But I'd like to just admit it.

29
00:02:34,940 --> 00:02:41,480
So did we have an object which only holds properties for inputs where we have an error so that we can

30
00:02:41,480 --> 00:02:47,660
always loop food as object with a for in loop to read all the errors we got for example and don't have

31
00:02:47,690 --> 00:02:51,520
any properties in there which don't actually store an error.

32
00:02:51,560 --> 00:02:57,800
So long story short I need an object where I'm pretty clear regarding the value type it should be a

33
00:02:57,800 --> 00:03:04,070
string but where I don't know in advance how many properties I'll have and which name the properties

34
00:03:04,130 --> 00:03:05,190
will have.

35
00:03:05,390 --> 00:03:08,420
And for such a scenario we can use index types.

36
00:03:08,600 --> 00:03:14,210
You define the index type by using square brackets here remember normally we would write a property

37
00:03:14,210 --> 00:03:24,480
name here but now we use square brackets then any name of your choice for example a key or prop then

38
00:03:24,480 --> 00:03:25,500
a colon.

39
00:03:25,710 --> 00:03:32,820
And then the value type of the property and then an object you can't have strings numbers or as symbols

40
00:03:33,060 --> 00:03:34,090
as a property.

41
00:03:34,140 --> 00:03:36,870
You for example can't use boolean here.

42
00:03:36,870 --> 00:03:43,380
That's not allowed but you can use string here with that and simply saying that whatever object I'm

43
00:03:43,380 --> 00:03:52,280
constructing based on this error container interface later must have properties which are strings user

44
00:03:52,410 --> 00:03:56,620
name for example would be a valid string even if I don't rapid in quotes.

45
00:03:56,690 --> 00:04:00,950
Then we add a colon and then the value type which is string.

46
00:04:00,980 --> 00:04:05,090
So with that I'm saying I don't know the exact property name.

47
00:04:05,120 --> 00:04:07,700
I also don't know do property count.

48
00:04:07,700 --> 00:04:14,960
I just know that every property which is added to does object which is based on error container must

49
00:04:14,960 --> 00:04:21,320
have a property name which can be interpreted as a string and the value for that property also must

50
00:04:21,320 --> 00:04:22,100
be a string.

51
00:04:22,100 --> 00:04:24,130
That's what I'm saying here.

52
00:04:24,290 --> 00:04:32,540
Now with that we also still can add predefined properties however only if they're of the same type as

53
00:04:32,540 --> 00:04:33,310
this year.

54
00:04:33,440 --> 00:04:39,770
So we could add an idea which is of type String and then any object we build that adheres to this interface

55
00:04:39,770 --> 00:04:44,420
must have an I.D. property and can add as many other properties as it once.

56
00:04:44,450 --> 00:04:49,670
But we can't set I.D. to a number here for example because we have an index type here.

57
00:04:49,670 --> 00:04:51,430
So that is a restriction we have.

58
00:04:51,470 --> 00:04:56,590
If we build such an object so now what's the consequence.

59
00:04:56,590 --> 00:05:03,700
Now we can create an error bag for example which is of type error container which therefore is an object

60
00:05:03,820 --> 00:05:08,750
and it would be valid like this because we don't have to add any properties that is all valid.

61
00:05:08,830 --> 00:05:15,520
But of course we can now add some for example email not a valid email and this is OK it would not be

62
00:05:15,520 --> 00:05:21,490
OK if I instead assigned a number here because we're saying every property needs a string value type

63
00:05:21,730 --> 00:05:23,800
so we must use a string here.

64
00:05:23,800 --> 00:05:29,170
If I use a number here that would work because that can be interpreted as a string as well so I can

65
00:05:29,170 --> 00:05:32,470
also use a number as a key type here if I wanted to.

66
00:05:32,590 --> 00:05:40,860
I'm pretty free regarding what I use here if it would change the prop type here to No.

67
00:05:41,170 --> 00:05:47,160
Then you can do that and this would be OK but this wouldn't because email is not a number DESC can't

68
00:05:47,160 --> 00:05:51,590
be converted to a number it can be treated as a string but not as a number.

69
00:05:51,600 --> 00:05:57,180
So this is how you control which type of properties or which property names you allow.

70
00:05:57,180 --> 00:06:02,670
And here I indeed want to allow a string property names so anything which can be converted to a string

71
00:06:03,060 --> 00:06:04,470
is a valid property name.

72
00:06:04,470 --> 00:06:06,900
And then the value has to be a string as well.

73
00:06:06,990 --> 00:06:13,890
And as I said Of course now we can add multiple values here multiple properties I should say must start

74
00:06:14,490 --> 00:06:18,180
with a capital character.

75
00:06:18,240 --> 00:06:24,720
So this is now such a error back we could build with the help of our container which gives us this extra

76
00:06:24,720 --> 00:06:32,070
flexibility that we don't need to know in advance which property names we want to use and how many properties

77
00:06:32,100 --> 00:06:32,520
we need.