0
1
00:00:00,000 --> 00:00:04,141
Hey welcome to this new Typescript course. So in this
1

2
00:00:04,141 --> 00:00:07,021
course we're going to discover
Typescript language and I will
2

3
00:00:07,021 --> 00:00:10,781
assume that you don't know
anything about it obviously but
3

4
00:00:10,781 --> 00:00:13,941
I would just assume that you
have some basic knowledges with
4

5
00:00:13,941 --> 00:00:19,421
JavaScript, HTML and CSS. So if
you are here today it's
5

6
00:00:19,421 --> 00:00:22,941
probably because you've heard
that Typescript is quite famous
6

7
00:00:22,941 --> 00:00:27,501
is probably... You probably heard
that it's used a lot by
7

8
00:00:27,501 --> 00:00:32,121
developers in companies in
professional project etc...
8

9
00:00:32,121 --> 00:00:35,241
and probably also that it's
related to JavaScript closely
9

10
00:00:35,241 --> 00:00:39,801
related to JavaScript. All of
that is true. But we're going
10

11
00:00:39,801 --> 00:00:43,561
to see exactly what typescript
is. So typescript is what we
11

12
00:00:43,561 --> 00:00:48,361
call a JavaScript superset. It
just means that anything that
12

13
00:00:48,361 --> 00:00:52,361
you have in JavaScript you will
also have it with typescript
13

14
00:00:52,361 --> 00:00:54,841
but you're just going to have
other features, additional
14

15
00:00:54,841 --> 00:00:58,441
features with typescript like
the typing system. We're going
15

16
00:00:58,441 --> 00:01:02,041
to see what this is exactly
after but what you have to
16

17
00:01:02,041 --> 00:01:07,361
remember is that any value
JavaScript code is valid typescript
17

18
00:01:07,361 --> 00:01:10,801
code, okay? So you can
use typescript and just write
18

19
00:01:10,801 --> 00:01:14,641
JavaScript and you will be
fine, everything is going to
19

20
00:01:14,641 --> 00:01:17,601
work as expected. But the cool
thing is that you will have
20

21
00:01:17,601 --> 00:01:24,161
other features. You have to
understand that typescript is a
21

22
00:01:24,161 --> 00:01:27,841
tool for developers only
meaning that it's for example
22

23
00:01:27,841 --> 00:01:32,481
not going to improve the
performances of your
23

24
00:01:32,481 --> 00:01:35,601
application okay it's not going
to make it faster but it's
24

25
00:01:35,601 --> 00:01:39,361
going to help you produce less
errors while writing code for
25

26
00:01:39,361 --> 00:01:42,401
example it's going to make your
code easier to understand easier
26

27
00:01:42,401 --> 00:01:46,001
to maintain but it's definitely
not going to make your code
27

28
00:01:46,001 --> 00:01:49,841
faster, and this is because
in the end actually when you're
28

29
00:01:49,841 --> 00:01:53,521
writing typescripts it's just
going to produce javascript. This
29

30
00:01:53,521 --> 00:01:56,801
is because typescript is not
understood at all for example
30

31
00:01:56,801 --> 00:02:02,241
by the browsers, so you're
never going to to see some type
31

32
00:02:02,241 --> 00:02:06,961
script code behind the scene
running if you inspect the code
32

33
00:02:06,961 --> 00:02:10,881
in your browser and this is
because it will be compiled
33

34
00:02:10,881 --> 00:02:13,681
into JavaScript so you're just
going to see some JavaScript
34

35
00:02:13,681 --> 00:02:17,041
and that is one reason of why
for example is not going to
35

36
00:02:17,041 --> 00:02:19,881
make your application faster
because in the end it's just
36

37
00:02:19,881 --> 00:02:25,041
JavaScript okay so type script
is just for you while you are
37

38
00:02:25,041 --> 00:02:32,421
coding. (very important). Now one of the main
difference between typescript
38

39
00:02:32,421 --> 00:02:36,661
and JavaScript is when it's
running. When it's going to
39

40
00:02:36,661 --> 00:02:41,221
check if something is wrong in
your code. With JavaScript the
40

41
00:02:41,221 --> 00:02:45,541
code is going to be executed
and tested when it's running,
41

42
00:02:45,541 --> 00:02:48,581
when it's finally running when
your app is running. And this
42

43
00:02:48,581 --> 00:02:51,461
means that you're going to see
the errors only once your app
43

44
00:02:51,461 --> 00:02:54,421
is running and maybe for
example crashing if something
44

45
00:02:54,421 --> 00:02:57,841
is wrong. You probably notice
that you have an error in your
45

46
00:02:57,841 --> 00:03:01,521
JavaScript code the page is
just going to become a white
46

47
00:03:01,521 --> 00:03:05,521
page and you will have a red
error in your console while
47

48
00:03:05,521 --> 00:03:09,121
Typescript has something called
the static type checking
48

49
00:03:09,121 --> 00:03:12,481
meaning that you're going to be
able to see the errors before
49

50
00:03:12,481 --> 00:03:15,681
you run the code so for example
you will be able to see them
50

51
00:03:15,681 --> 00:03:18,001
while you're coding you will be
able to see them in your
51

52
00:03:18,001 --> 00:03:22,961
favorite code editor. So let me
give you an example. Let's say
52

53
00:03:22,961 --> 00:03:25,601
on the left we have some
JavaScript code and on the
53

54
00:03:25,601 --> 00:03:32,001
right here we have some type
script code. And yes, it's
54

55
00:03:32,001 --> 00:03:34,481
exactly the same code and this
is because you remember any
55

56
00:03:34,481 --> 00:03:38,801
JavaScript code that is valid
is also valid type script code.
56

57
00:03:38,801 --> 00:03:43,181
Yep. So for now I haven't
written anything that is
57

58
00:03:43,181 --> 00:03:46,061
specific to Typescript for now
it's just JavaScript code
58

59
00:03:46,061 --> 00:03:49,101
Now what is going to happen if
you run this code well
59

60
00:03:49,101 --> 00:03:52,381
obviously here you have
declared a name that is a
60

61
00:03:52,381 --> 00:03:55,981
string okay and after that
you're trying to run it like if
61

62
00:03:55,981 --> 00:03:59,261
it's a function so this is
obviously nothing right and
62

63
00:03:59,261 --> 00:04:02,461
this is going to produce an
error at some point and with
63

64
00:04:02,461 --> 00:04:05,981
JavaScript well you're just
going to see your error when
64

65
00:04:05,981 --> 00:04:09,021
your application is going to
run okay so JavaScript is not
65

66
00:04:09,021 --> 00:04:11,781
going to see anything when
you're going to write the code.
66

67
00:04:11,781 --> 00:04:14,741
It's going to say yeah sure,
write that, maybe it's going to
67

68
00:04:14,741 --> 00:04:20,261
crash, maybe not, who knows?
You will at some point. Uh
68

69
00:04:20,261 --> 00:04:24,741
While with Typescript, well if
you use typescript, in your code
69

70
00:04:24,741 --> 00:04:28,821
editor, you will see that this
little piece of code is going
70

71
00:04:28,821 --> 00:04:32,021
to be underlined in red for
example and in your terminal
71

72
00:04:32,021 --> 00:04:36,101
well type script is going to
cry and say no, this is wrong,
72

73
00:04:36,101 --> 00:04:39,461
you should not write this, this
is not a function, this is a
73

74
00:04:39,461 --> 00:04:44,101
string, you cannot call that as
a function. And this is going
74

75
00:04:44,101 --> 00:04:47,701
to make a huge difference while
you are coding because for now
75

76
00:04:47,701 --> 00:04:51,301
here this example is very
simple but let's say that
76

77
00:04:51,301 --> 00:04:57,301
actually this error here is
actually wrapped into a
77

78
00:04:57,301 --> 00:05:01,701
condition that is satisfied
very rarely , so you almost
78

79
00:05:01,701 --> 00:05:05,461
never enter in this condition
just imagine one second that
79

80
00:05:05,461 --> 00:05:08,981
this code is running in
production maybe it will take I
80

81
00:05:08,981 --> 00:05:12,821
don't know two three months
before a user end up in this
81

82
00:05:12,821 --> 00:05:16,661
condition and this error 
could stay unnoticed for a very
82

83
00:05:16,661 --> 00:05:19,461
long time and it's only in
three months that you will
83

84
00:05:19,461 --> 00:05:23,061
final notice that "Oh no I have
an error in my code now it's
84

85
00:05:23,061 --> 00:05:26,581
crashing the users cannot
access the page anymore" And
85

86
00:05:26,581 --> 00:05:30,421
it's too late. While with typescript 
you would have been
86

87
00:05:30,421 --> 00:05:33,621
notified instantly while
writing the code you don't have
87

88
00:05:33,621 --> 00:05:38,101
to test ,for example, this
use case in your code to make
88

89
00:05:38,101 --> 00:05:40,661
sure that this is not working
this is definitely not working
89

90
00:05:40,661 --> 00:05:44,701
because this is related to the
typing system that you are not
90

91
00:05:44,701 --> 00:05:47,901
satisfying okay this a string
this is not a function you
91

92
00:05:47,901 --> 00:05:51,101
should not write that and that
is why typescript is so
92

93
00:05:51,101 --> 00:05:53,581
helpful it's going to tell you
that you have something wrong
93

94
00:05:53,581 --> 00:05:59,181
before the code is running. Okay ?
Alright so that was a really
94

95
00:05:59,181 --> 00:06:03,101
brief overview of Typescript
and obviously for now as you
95

96
00:06:03,101 --> 00:06:05,341
can see we haven't really
written anything that is
96

97
00:06:05,341 --> 00:06:09,261
specific to type script it's
just JavaScript code so you
97

98
00:06:09,261 --> 00:06:12,701
will see that we will have to
write and learn the the
98

99
00:06:12,701 --> 00:06:16,221
typescript syntax to really be
able to produce this kind of
99

100
00:06:16,221 --> 00:06:19,921
error and to make the code
resilient and less prone to
100

101
00:06:19,921 --> 00:06:23,921
errors. Alright, so see you in
the next video to start
101

102
00:06:23,921 --> 00:06:28,641
learning really how to use
Typescript.