1
00:00:00,520 --> 00:00:03,640
In this lecture, we're going to learn about generics.

2
00:00:03,850 --> 00:00:06,700
They are a feature, a frequently used in angular.

3
00:00:07,060 --> 00:00:11,920
They allow functions or classes to be strict and flexible at the same time.

4
00:00:12,340 --> 00:00:16,450
Generics function similarly to parameters, but with data types.

5
00:00:16,750 --> 00:00:17,830
Sounds confusing.

6
00:00:18,070 --> 00:00:21,940
Let's look at an example and the motivations behind generics.

7
00:00:22,240 --> 00:00:23,320
They're super simple.

8
00:00:23,320 --> 00:00:29,050
Once you see them in action for this demonstration, let's work inside an empty file.

9
00:00:29,230 --> 00:00:33,430
We will create a new file called generics dots.

10
00:00:35,990 --> 00:00:39,980
Inside this file, we will create a class called Q.

11
00:00:42,630 --> 00:00:47,700
In this scenario, let's pretend this class can handle a collection of items.

12
00:00:48,010 --> 00:00:54,550
It'll manage from moving and pushing items into the class that's already possible with array functions.

13
00:00:54,780 --> 00:01:01,380
However, you may want to replicate this behavior if you're interested in having refined control over

14
00:01:01,380 --> 00:01:04,530
how items get added or removed from an array.

15
00:01:05,250 --> 00:01:10,950
For this example, we will restrict the data type that can be added or removed from the array.

16
00:01:11,430 --> 00:01:14,760
First, we will create a property called data.

17
00:01:15,150 --> 00:01:17,070
It'll be a private property.

18
00:01:19,790 --> 00:01:26,630
Privatising their way will prevent external code from interacting with the era, we are being very strict

19
00:01:26,630 --> 00:01:27,530
with our array.

20
00:01:27,950 --> 00:01:31,160
Next, we will define a method called add.

21
00:01:33,800 --> 00:01:36,770
This method will accept an argument called item.

22
00:01:39,540 --> 00:01:43,680
This argument will be pushed into the data era with the push function.

23
00:01:46,100 --> 00:01:49,640
Lastly, we will create a method called Remove.

24
00:01:51,870 --> 00:01:59,460
The remove method will remove the first item in the array inside this method, we will call the shift

25
00:01:59,460 --> 00:02:01,410
function on the data array.

26
00:02:03,940 --> 00:02:06,940
The current implementation has a couple of problems.

27
00:02:07,090 --> 00:02:11,920
The biggest problem is how we're adding and removing values at the moment.

28
00:02:12,100 --> 00:02:14,560
Any value can be added or removed.

29
00:02:14,830 --> 00:02:22,870
Let's look at an example below this class, we will create a new instance of the class called name Q.

30
00:02:25,360 --> 00:02:27,700
Our queue will hold an array of names.

31
00:02:27,970 --> 00:02:31,690
Let's try pushing two names by calling the ad function.

32
00:02:32,110 --> 00:02:33,820
The first name will be a string.

33
00:02:34,120 --> 00:02:35,980
The second name will be a number.

34
00:02:40,530 --> 00:02:44,400
We're pushing in two different data types, which we may not want.

35
00:02:44,670 --> 00:02:48,780
We're not restricting the type of data that can be pushed into the object.

36
00:02:49,140 --> 00:02:53,820
One solution would be to add annotations to the parameters of the function.

37
00:02:54,510 --> 00:02:58,110
Let's try that in the ad functions parameters.

38
00:02:58,200 --> 00:03:00,120
We will set the type two string.

39
00:03:02,740 --> 00:03:06,280
By adding this annotation, TypeScript will throw an error.

40
00:03:06,580 --> 00:03:09,370
It's not letting us push a number, which is great.

41
00:03:09,640 --> 00:03:11,260
It helped us catch an error.

42
00:03:11,530 --> 00:03:14,070
Let's change this value to a string.

43
00:03:16,500 --> 00:03:18,420
So far, so good, right?

44
00:03:18,780 --> 00:03:20,790
Let's try creating a new queue.

45
00:03:21,060 --> 00:03:23,670
The new queue will be called no queue.

46
00:03:26,260 --> 00:03:29,710
Unlike the first queue, this queue will store numbers.

47
00:03:29,950 --> 00:03:33,370
Let's try adding a new number with the add function.

48
00:03:35,890 --> 00:03:39,190
We'll get an air, even though we have a different queue.

49
00:03:39,220 --> 00:03:40,930
We can't use another type.

50
00:03:41,260 --> 00:03:44,290
Our queue is restricted to storing strings.

51
00:03:44,620 --> 00:03:48,130
We may want to restrict our array to a single data type.

52
00:03:48,370 --> 00:03:51,640
But the data type should be flexible from queue to queue.

53
00:03:52,060 --> 00:03:54,160
How do we get the best of both worlds?

54
00:03:54,670 --> 00:04:00,640
One solution would be to duplicate the Class one version for strings, another four numbers.

55
00:04:00,910 --> 00:04:03,280
Unfortunately, that's not scalable.

56
00:04:03,580 --> 00:04:10,000
If we want our class to be reusable, developers should be able to use it without modifying the original

57
00:04:10,000 --> 00:04:10,630
class.

58
00:04:10,900 --> 00:04:13,900
We can tackle this issue by using generics.

59
00:04:14,470 --> 00:04:17,170
A generic is a placeholder for data types.

60
00:04:17,410 --> 00:04:23,530
After the class name, we'll add a pair of angle brackets inside these brackets.

61
00:04:23,710 --> 00:04:25,840
We will give the placeholder a name.

62
00:04:26,110 --> 00:04:27,820
We will use the letter T.

63
00:04:30,520 --> 00:04:36,220
Next, we will update the ad function by setting the parameters data type two T.

64
00:04:38,960 --> 00:04:44,660
Afterward, we will annotate the data property to be an array of the tea type.

65
00:04:47,350 --> 00:04:51,820
Lastly, we will add angle brackets to both new instances.

66
00:04:52,120 --> 00:04:54,850
They must be placed before the parentheses.

67
00:04:55,180 --> 00:04:57,460
The first instance will have string.

68
00:04:57,850 --> 00:05:00,100
The second instance will have a number.

69
00:05:02,660 --> 00:05:04,490
Let me break down what's going on.

70
00:05:04,880 --> 00:05:08,150
The generic is the letter T in the angle brackets.

71
00:05:08,390 --> 00:05:10,520
It's a placeholder for the data type.

72
00:05:10,910 --> 00:05:13,790
The letter T can represent any data type.

73
00:05:14,150 --> 00:05:20,420
This can be strings, numbers, Boolean or custom types by defining this generic.

74
00:05:20,510 --> 00:05:22,940
We can use it anywhere in our class.

75
00:05:23,540 --> 00:05:28,040
In this case, we're adding it to the item parameter in the add function.

76
00:05:28,400 --> 00:05:34,130
If this generic is set to string, the item parameter will be restricted to strings.

77
00:05:34,610 --> 00:05:41,540
If it represents the number type, the item parameter will be restricted to numbers, so on and so forth.

78
00:05:41,990 --> 00:05:47,990
We can configure the data type when we create a new instance, which we're doing in the code below.

79
00:05:48,440 --> 00:05:52,760
For example, the first instance is setting the type two string.

80
00:05:53,150 --> 00:05:56,870
Therefore, only strings can be pushed into the array.

81
00:05:57,230 --> 00:06:02,290
We can prove this by removing the quotes from one of the values in the add function.

82
00:06:04,960 --> 00:06:07,330
An air gets thrown by the compiler.

83
00:06:07,630 --> 00:06:10,060
It's telling us the type must be string.

84
00:06:10,390 --> 00:06:17,170
Despite these string data Typekit not being present in the class TypeScript can intelligently restrict

85
00:06:17,170 --> 00:06:20,500
the values to strings and the second instance.

86
00:06:20,740 --> 00:06:24,970
The array is restricted to numbers by using generics.

87
00:06:25,150 --> 00:06:30,400
We can have type safety while allowing our class to be flexible for any type.

88
00:06:31,090 --> 00:06:33,400
You may be wondering why the letter T..

89
00:06:33,670 --> 00:06:36,370
Truthfully, we can use any name we'd like.

90
00:06:36,640 --> 00:06:40,090
For example, we can swap this name with the word baseball.

91
00:06:42,620 --> 00:06:44,240
This class will still work.

92
00:06:44,480 --> 00:06:49,310
However, it's common practice to use the letter T, which is short for a type.

93
00:06:49,610 --> 00:06:52,520
It's not required, but standard among developers.

94
00:06:52,730 --> 00:06:59,240
In most documentation and examples, you will find developers like to use the letter T at the end of

95
00:06:59,240 --> 00:06:59,780
the day.

96
00:06:59,870 --> 00:07:03,650
It's up to you to decide if you want to follow this naming convention.

97
00:07:06,210 --> 00:07:09,480
Generics can be applied to functions and class methods.

98
00:07:09,750 --> 00:07:11,700
They're not exclusive to classes.

99
00:07:12,000 --> 00:07:18,060
The first example shows how the generic can be used for our parameters and return type.

100
00:07:18,480 --> 00:07:22,500
The same goes for the class method throughout this course.

101
00:07:22,590 --> 00:07:24,000
Generics will pop up.

102
00:07:24,360 --> 00:07:29,280
It's not common to create them, but it's always good to know how they work under the hood.

103
00:07:29,670 --> 00:07:35,250
In a similar sense, decorators are another feature will be using, but won't be writing.

104
00:07:35,550 --> 00:07:40,950
It is still good to know how they work, though we'll learn about decorators in the next lecture.