1
00:00:00,180 --> 00:00:05,700
In this lecture, we're going to look at how to annotate variables for this demonstration.

2
00:00:05,760 --> 00:00:07,500
Let's work inside a new file.

3
00:00:07,800 --> 00:00:11,280
I'll create a file called variables dots.

4
00:00:13,710 --> 00:00:20,280
Inside this file, we will create a variable called my name will set this variable to a string.

5
00:00:22,960 --> 00:00:29,290
Variables can be annotated with the same syntax we used for annotating function arguments and return

6
00:00:29,290 --> 00:00:31,780
values after the variable name.

7
00:00:31,930 --> 00:00:36,530
We will add a colon, followed by the data type since we're storing a name.

8
00:00:36,550 --> 00:00:39,820
It makes sense to set the data type two string.

9
00:00:42,510 --> 00:00:43,860
It's as simple as that.

10
00:00:44,130 --> 00:00:47,910
You may be wondering, what types can we use and type annotation?

11
00:00:48,270 --> 00:00:51,210
Every primitive type is supported in TypeScript.

12
00:00:51,480 --> 00:00:55,590
I'll add a comment above to list them the following types are supported.

13
00:00:55,890 --> 00:00:57,330
String No.

14
00:00:57,510 --> 00:01:00,240
Boolean No and undefined.

15
00:01:02,890 --> 00:01:07,540
By annotating variables, we can't reassign the variable to a different type.

16
00:01:07,960 --> 00:01:12,250
If we ever reassign the variable, the value must be of the same type.

17
00:01:12,760 --> 00:01:18,550
For example, if we were to update the mining variable to a number, we would encounter an error.

18
00:01:21,140 --> 00:01:26,570
If we hover our mouse over the reassignment, we will get an error telling us we can't use a number.

19
00:01:26,990 --> 00:01:29,420
This is because we're restricted to strings.

20
00:01:30,080 --> 00:01:34,120
If we were to change the value to another string, the error goes away.

21
00:01:36,480 --> 00:01:43,200
One of the cool things about TypeScript is type inference, admittedly, adding type annotations can

22
00:01:43,200 --> 00:01:44,880
make our code seem cluttered.

23
00:01:45,210 --> 00:01:46,620
They're incredibly helpful.

24
00:01:46,880 --> 00:01:50,820
We should take every opportunity to make our code simple and clean.

25
00:01:51,270 --> 00:01:55,470
TypeScript is intelligent to detect the data types of our variables.

26
00:01:55,800 --> 00:01:58,080
This feature is called type inference.

27
00:01:58,710 --> 00:02:01,440
Let's remove the type annotation from the variable.

28
00:02:03,980 --> 00:02:09,620
Even though we've removed the annotation, TypeScript will set the variables data type to a string.

29
00:02:09,949 --> 00:02:15,500
If we hover our mouse over the variable name, the editor will tell us the type is set to string.

30
00:02:15,920 --> 00:02:17,150
How is this possible?

31
00:02:17,360 --> 00:02:18,830
It's because of our value.

32
00:02:19,070 --> 00:02:25,670
If a variable is initialized with a value, typescript will infer the type based on the value.

33
00:02:26,180 --> 00:02:30,650
In this example, we're setting the mining variable to a string.

34
00:02:31,010 --> 00:02:36,050
Therefore, TypeScript will infer the variable is a string below.

35
00:02:36,110 --> 00:02:41,030
If we were to set the variable to a number, we would get the same error as before.

36
00:02:43,740 --> 00:02:46,080
This feature is incredibly convenient.

37
00:02:46,290 --> 00:02:49,710
We should always take advantage of this feature whenever we can.

38
00:02:50,040 --> 00:02:56,640
It's redundant to set the type if TypeScript is capable of inferring the type for us for the rest of

39
00:02:56,640 --> 00:02:57,360
this course.

40
00:02:57,570 --> 00:03:01,710
If TypeScript can infer the type, we will let it set the type.

41
00:03:02,400 --> 00:03:03,930
There are some limitations.

42
00:03:04,110 --> 00:03:08,670
Firstly, it only works if the variable is initialized with a value.

43
00:03:08,970 --> 00:03:13,530
If we were to omit the value, TypeScript would not infer the data type.

44
00:03:13,890 --> 00:03:20,970
For example, if we remove the value and then hover our mouse over the name, the type is set to any.

45
00:03:23,590 --> 00:03:30,340
The any type is given to a variable when TypeScript isn't sure what data type to use, it allows for

46
00:03:30,340 --> 00:03:33,010
a variable to store any type of value.

47
00:03:33,370 --> 00:03:37,150
We can store numbers, strings, objects, et cetera.

48
00:03:37,480 --> 00:03:42,370
If we were to switch between different data types, TypeScript wouldn't throw an error.

49
00:03:42,670 --> 00:03:46,780
To be clear, this data type is exclusive to TypeScript.

50
00:03:47,470 --> 00:03:50,290
In some cases, you may want this behavior.

51
00:03:50,560 --> 00:03:55,030
However, most of the time we want to be strict with our data types.

52
00:03:55,390 --> 00:03:58,780
I'll revert this variable to its original value.

53
00:04:01,530 --> 00:04:07,800
The second limitation we should be aware of is that this feature is not available to function parameters.

54
00:04:08,160 --> 00:04:12,180
Let's switch over to the example Dot's file for a moment.

55
00:04:12,520 --> 00:04:16,829
Next, we will remove the type annotations from the parameters.

56
00:04:19,380 --> 00:04:25,590
After removing them, TypeScript will annotate both parameters with the any type, even though we're

57
00:04:25,590 --> 00:04:31,050
passing in numbers, TypeScript still doesn't know what data type the parameter should be.

58
00:04:31,470 --> 00:04:34,230
I'll add the annotations back to the function.

59
00:04:34,950 --> 00:04:38,580
That's about it, for variables will continue in the next one.