1
00:00:01,210 --> 00:00:05,050
Now that we've gotten through some administrative stuff we're now going to dive into our first technical

2
00:00:05,050 --> 00:00:07,930
topic and start to discuss exactly what typescript is.

3
00:00:07,930 --> 00:00:09,540
So what is typescript.

4
00:00:09,550 --> 00:00:11,410
You know what are we doing here.

5
00:00:11,410 --> 00:00:16,510
Well at the end of the day I want you to imagine that when we write typescript code we are really just

6
00:00:16,570 --> 00:00:17,950
writing javascript.

7
00:00:17,950 --> 00:00:19,120
That's what's really happening here.

8
00:00:19,120 --> 00:00:25,240
We're still writing javascript all the knowledge you have around javascript like arrays objects functions

9
00:00:25,630 --> 00:00:32,410
and even yes 2015 syntax like restructuring and Arrow functions and classes all that knowledge still

10
00:00:32,470 --> 00:00:34,920
applies to the world of typescript as well.

11
00:00:34,990 --> 00:00:39,610
The only thing that we're really doing with typescript is adding in a little bit additional syntax to

12
00:00:39,610 --> 00:00:43,630
our code to handle something called the type system.

13
00:00:43,630 --> 00:00:45,210
This is what typescript is all about.

14
00:00:45,250 --> 00:00:51,120
As you might guess and it's what we're gonna spend the vast majority of this course learning about let's

15
00:00:51,120 --> 00:00:55,630
get a quick overview on the type system and understand what's going on with it.

16
00:00:55,690 --> 00:00:59,310
The goal of the type system is to help us catch errors during development.

17
00:00:59,350 --> 00:01:03,030
In other words when we're actually writing your code in our code editor.

18
00:01:03,460 --> 00:01:07,070
Think about how we catch errors right now with javascript code.

19
00:01:07,150 --> 00:01:10,790
Let's imagine that you're writing out some amount of JavaScript inside of your editor and maybe there

20
00:01:10,790 --> 00:01:12,730
is a bug inside of it.

21
00:01:12,730 --> 00:01:17,940
How would you find that bug well really with JavaScript the only way to do that is to actually execute

22
00:01:17,940 --> 00:01:20,620
your code and see that air up here.

23
00:01:20,740 --> 00:01:26,800
And that's not super efficient so as an improvement to the development workflow we use the type system

24
00:01:27,040 --> 00:01:32,830
to help us catch errors during development while you and I are writing our code typescript is going

25
00:01:32,830 --> 00:01:39,100
to be constantly analyzing it and looking for bugs if it finds any possible bug it's then going to pop

26
00:01:39,100 --> 00:01:44,060
open an error message inside of your code editor until you hate something might be wrong here.

27
00:01:44,950 --> 00:01:49,070
And that's going to essentially be a signal to you as a developer that you might need to fix up your

28
00:01:49,070 --> 00:01:56,670
code not to do this error checking the typescript compiler is going to use something called type annotations

29
00:01:56,730 --> 00:01:58,420
to analyze our code base.

30
00:01:58,800 --> 00:02:02,450
You and I are going to be responsible for adding in these type annotations.

31
00:02:02,670 --> 00:02:07,530
You can kind of think of these type annotations as being like little comments to describe the purpose

32
00:02:07,620 --> 00:02:14,680
of our code or the information that is flowing through our program the type system is only active during

33
00:02:14,680 --> 00:02:15,650
development.

34
00:02:15,730 --> 00:02:20,980
So in other words once we go to deploy our application or even run it inside of our browser in a development

35
00:02:20,980 --> 00:02:27,610
environment the entire type system falls away your browser has no idea what typescript is.

36
00:02:27,730 --> 00:02:32,310
And no J.S. likewise no J.S. has no idea what typescript is either.

37
00:02:32,320 --> 00:02:37,810
So all this extra syntax we're going to add into our code never makes it into the browser it never makes

38
00:02:37,810 --> 00:02:42,760
it into No j yes we're going to first compile our TypeScript and we're going to get some javascript

39
00:02:42,820 --> 00:02:47,940
out of that and that JavaScript is what we're going to actually execute.

40
00:02:47,980 --> 00:02:52,130
Finally this is something I want to point out just because it's a little bit different than other languages

41
00:02:52,160 --> 00:02:59,040
that are strongly typed the typescript compiler does not do any performance optimization whatsoever.

42
00:02:59,060 --> 00:03:02,430
Now this is very different than many other languages in many other languages.

43
00:03:02,510 --> 00:03:08,420
The type system can be used to optimize some code that you write using the compiler but that is not

44
00:03:08,420 --> 00:03:11,330
the case here with typescript All right.

45
00:03:11,330 --> 00:03:15,890
So to kind of help you understand this process here let's run through the common scenario of how we're

46
00:03:15,890 --> 00:03:21,720
going to actually write some code and run it inside the browser or with no J.S. so you and I are going

47
00:03:21,720 --> 00:03:24,110
to write some typescript code inside of our editor.

48
00:03:24,120 --> 00:03:29,280
And remember we can think of typescript as really just being plain javascript but with these type annotation

49
00:03:29,280 --> 00:03:35,800
things added in then once we want to actually run our code we're gonna feed that code into the typescript

50
00:03:35,800 --> 00:03:36,950
compiler.

51
00:03:36,970 --> 00:03:42,790
This is a command line tool that's going to read our code check it for any possible errors and then

52
00:03:42,790 --> 00:03:50,380
convert it into plain javascript you and I are then going to take that JavaScript code and feed it into

53
00:03:50,380 --> 00:03:52,230
the browser or into no us.

54
00:03:52,300 --> 00:03:54,100
And finally execute it.

55
00:03:55,020 --> 00:03:59,680
So again we do not execute typescript we always are executing javascript.

56
00:03:59,930 --> 00:04:04,650
And so when I say that you and I are still writing technically javascript code here it is because the

57
00:04:04,650 --> 00:04:10,290
code we're writing it is going to end up as javascript just it has these extra little type annotation

58
00:04:10,290 --> 00:04:12,760
things in it all right.

59
00:04:12,760 --> 00:04:17,490
So to give you a really practical example of this I want to show you a quick little web page here.

60
00:04:17,510 --> 00:04:22,740
This is a in browser typescript compiler so I can open up this link inside of a new browser tab.

61
00:04:24,000 --> 00:04:27,630
Now on the left hand side you're going to see a little bit of typescript code and I know this is kind

62
00:04:27,630 --> 00:04:32,100
of cut off right there but I just want to give you the impression that this typescript right here has

63
00:04:32,100 --> 00:04:34,260
a bunch of additional syntax in it.

64
00:04:34,270 --> 00:04:34,710
All right.

65
00:04:34,800 --> 00:04:35,730
Just take a look at this code.

66
00:04:35,730 --> 00:04:37,640
We don't need to understand what it does.

67
00:04:37,680 --> 00:04:43,080
You can tell at just a glance that there's a lot of extra stuff in here and it does not look like normal

68
00:04:43,080 --> 00:04:47,830
javascript it's on the left hand side we've got the typescript.

69
00:04:47,830 --> 00:04:52,750
This page is going to compile that code and then print out the equivalent javascript on the right hand

70
00:04:52,750 --> 00:04:53,870
side.

71
00:04:53,890 --> 00:04:57,400
So this is the output from the typescript compiler and looking at that.

72
00:04:57,400 --> 00:05:04,300
Yep it sure looks like plain javascript so I can't say it enough like I said I'm gonna repeat it many

73
00:05:04,300 --> 00:05:05,410
times throughout this course.

74
00:05:05,470 --> 00:05:07,600
We're still writing javascript code.

75
00:05:07,690 --> 00:05:12,550
We're just adding in little extra pieces of syntax here and there.

76
00:05:12,550 --> 00:05:17,500
And these extra pieces of syntax are meant to help the typescript compiler understand what we're trying

77
00:05:17,500 --> 00:05:21,040
to do with our code base so it can help us catch errors.

78
00:05:21,040 --> 00:05:21,550
That's it.

79
00:05:21,550 --> 00:05:24,440
That's the entire typescript world.

80
00:05:24,450 --> 00:05:27,270
All right let's do a quick wrap up on what we learned in this video.

81
00:05:27,300 --> 00:05:30,300
So first off when we write typescript we're still writing javascript.

82
00:05:30,300 --> 00:05:36,280
We're just adding in these extra little type annotation things secondly typescript has no effect on

83
00:05:36,280 --> 00:05:38,410
how our code actually gets executed.

84
00:05:38,410 --> 00:05:44,800
In other words there is no performance optimization or anything like that now finally the best way to

85
00:05:44,800 --> 00:05:49,360
think of typescript in my opinion or kind of an effective analogy is to think of typescript as being

86
00:05:49,360 --> 00:05:54,730
like a friend who is sitting behind you while you are writing code and maybe that friend is looking

87
00:05:54,730 --> 00:05:58,190
at every line of code you're writing and happy helping you catch errors.

88
00:05:58,300 --> 00:06:00,380
That's what typescript is really doing for us.

89
00:06:00,460 --> 00:06:03,250
It is a helper to help us catch errors.

90
00:06:03,340 --> 00:06:07,870
It doesn't actually have any impact on the final code that we output or the actual code that we run

91
00:06:07,870 --> 00:06:08,940
inside the browser.

92
00:06:08,980 --> 00:06:12,780
It's just there during development okay.

93
00:06:12,800 --> 00:06:14,450
So now we've got a better idea of typescript.

94
00:06:14,450 --> 00:06:18,350
Let's take a quick pause right here and we're gonna do a little bit of environment setup in the next

95
00:06:18,350 --> 00:06:18,770
video.