1
00:00:00,000 --> 00:00:02,331
- Now in order to create an
actual TypeScript project

2
00:00:02,331 --> 00:00:04,890
there's going to be two main
ways that you'll do this.

3
00:00:04,890 --> 00:00:06,450
One is going to be manually doing it

4
00:00:06,450 --> 00:00:08,910
with the TypeScript interface
for the command line

5
00:00:08,910 --> 00:00:09,990
and the second way is going to be

6
00:00:09,990 --> 00:00:11,488
using some type of bundler.

7
00:00:11,488 --> 00:00:13,410
In this video, I'm gonna
be talking all about

8
00:00:13,410 --> 00:00:16,770
how you can do it using the TSC
TypeScript command line tool

9
00:00:16,770 --> 00:00:18,120
and then in the next video I'll cover

10
00:00:18,120 --> 00:00:19,381
how to do it with a bundler.

11
00:00:19,381 --> 00:00:20,460
So what you wanna do

12
00:00:20,460 --> 00:00:22,260
is you want to create a project with npm.

13
00:00:22,260 --> 00:00:24,360
So we can just initialize
a project real quickly

14
00:00:24,360 --> 00:00:27,120
by saying npm init, and we pass in -y.

15
00:00:27,120 --> 00:00:28,920
That'll just give us
all the default values

16
00:00:28,920 --> 00:00:31,169
for our package JSON,
which is perfectly fine.

17
00:00:31,169 --> 00:00:33,120
Then what we're going to
want to do is actually

18
00:00:33,120 --> 00:00:34,969
install the TypeScript compiler

19
00:00:34,969 --> 00:00:37,481
and we only want to install
this as a dev dependency

20
00:00:37,481 --> 00:00:40,110
since it's not actually
something we run in production.

21
00:00:40,110 --> 00:00:41,528
We compile our code in development

22
00:00:41,528 --> 00:00:43,890
and then we push that to production.

23
00:00:43,890 --> 00:00:47,280
So we can install as a
dev dependency TypeScript.

24
00:00:47,280 --> 00:00:49,590
That's all we need to do, just like that.

25
00:00:49,590 --> 00:00:51,441
You can install this
globally if you really want

26
00:00:51,441 --> 00:00:53,598
and I need to make sure I
spell TypeScript properly.

27
00:00:53,598 --> 00:00:54,570
There we go.

28
00:00:54,570 --> 00:00:56,809
Now you can install that as a
global dependency as you want

29
00:00:56,809 --> 00:00:58,740
but I generally recommend installing it

30
00:00:58,740 --> 00:01:00,030
directly into your project.

31
00:01:00,030 --> 00:01:02,190
That way you can actually
have it version stamped.

32
00:01:02,190 --> 00:01:03,023
Right here as you can see,

33
00:01:03,023 --> 00:01:04,890
it's specifically this exact version,

34
00:01:04,890 --> 00:01:06,405
which makes it easier to work with.

35
00:01:06,405 --> 00:01:10,110
Then let's say that we have a
file, we'll call it script.js,

36
00:01:10,110 --> 00:01:12,617
and let's just say cost a =1

37
00:01:12,617 --> 00:01:15,849
and then we'll create a function
that's summing two numbers.

38
00:01:15,849 --> 00:01:20,723
We'll say (a, b,) and we'll
call this like num1, num2.

39
00:01:22,147 --> 00:01:26,700
And then we'll just say return a + b.

40
00:01:26,700 --> 00:01:29,160
There we go, so we just have
some random JavaScript code

41
00:01:29,160 --> 00:01:31,050
and let's actually change
this to a TypeScript file

42
00:01:31,050 --> 00:01:32,668
so we have this as TypeScript code.

43
00:01:32,668 --> 00:01:34,588
Now you notice we're not
getting any types of errors

44
00:01:34,588 --> 00:01:36,241
or any type of other auto complete stuff

45
00:01:36,241 --> 00:01:37,470
being helped out for us,

46
00:01:37,470 --> 00:01:38,490
'cause TypeScript doesn't really know

47
00:01:38,490 --> 00:01:39,660
what any of these types are.

48
00:01:39,660 --> 00:01:41,460
So in order to initialize a config for us

49
00:01:41,460 --> 00:01:43,740
all we need to do is run npx.

50
00:01:43,740 --> 00:01:45,740
That allows us to run
that TypeScript compiler

51
00:01:45,740 --> 00:01:48,731
we just installed locally,
and we type in tsc,

52
00:01:48,731 --> 00:01:51,270
that's the name of the
TypeScript command line tool

53
00:01:51,270 --> 00:01:54,392
that we just installed, and
we want to pass in --init.

54
00:01:54,392 --> 00:01:55,920
That's going to allow us to create

55
00:01:55,920 --> 00:01:58,080
an initialization config file.

56
00:01:58,080 --> 00:02:00,501
Now you can see immediately
we have this tsconfig file

57
00:02:00,501 --> 00:02:02,700
which if we just scroll
through this real quick

58
00:02:02,700 --> 00:02:04,034
you can see it has a bunch
of comments explaining

59
00:02:04,034 --> 00:02:06,780
all of the different options
as well as some really basic

60
00:02:06,780 --> 00:02:08,850
options automatically configured for you.

61
00:02:08,850 --> 00:02:10,530
As you can see, this is a quite large file

62
00:02:10,530 --> 00:02:12,480
with a lot of different
things that you can configure.

63
00:02:12,480 --> 00:02:13,962
We'll talk about this later in the course,

64
00:02:13,962 --> 00:02:15,810
but it's not super important to understand

65
00:02:15,810 --> 00:02:17,340
what everything inside of here does.

66
00:02:17,340 --> 00:02:19,050
But you can obviously
change this as you want.

67
00:02:19,050 --> 00:02:20,130
We'll just leave it as is

68
00:02:20,130 --> 00:02:21,930
and immediately you can see
we're now getting errors

69
00:02:21,930 --> 00:02:23,434
'cause we don't have these things typed.

70
00:02:23,434 --> 00:02:25,500
I'm gonna just type these
as numbers real quick.

71
00:02:25,500 --> 00:02:26,970
Again, it's not important you understand

72
00:02:26,970 --> 00:02:27,803
how this typing works,

73
00:02:27,803 --> 00:02:29,173
it's purely for demonstration purposes

74
00:02:29,173 --> 00:02:30,994
just to get rid of the
errors that we have.

75
00:02:30,994 --> 00:02:33,193
Now, what we can do if we
want to compile this file,

76
00:02:33,193 --> 00:02:35,250
is we can type in tsc again,

77
00:02:35,250 --> 00:02:37,440
but make sure we do npx at the start,

78
00:02:37,440 --> 00:02:38,738
and then we just type
in the name of our file

79
00:02:38,738 --> 00:02:40,889
which in our case is script.ts.

80
00:02:40,889 --> 00:02:42,480
What this is going to
do is it's going to take

81
00:02:42,480 --> 00:02:44,850
our script.ts file,
convert it into JavaScript

82
00:02:44,850 --> 00:02:47,070
by removing all of the TypeScript stuff.

83
00:02:47,070 --> 00:02:48,822
So you can see we now have this script.js.

84
00:02:48,822 --> 00:02:51,150
As you can see, it's
removed every single thing

85
00:02:51,150 --> 00:02:53,220
related to TypeScript from this file,

86
00:02:53,220 --> 00:02:54,840
and it also took things that are maybe

87
00:02:54,840 --> 00:02:56,010
not available in your browser,

88
00:02:56,010 --> 00:02:58,740
for example, the const keyword
and converted it to var.

89
00:02:58,740 --> 00:02:59,880
And based on your ts config,

90
00:02:59,880 --> 00:03:01,072
you can determine what you wanna do.

91
00:03:01,072 --> 00:03:03,570
For example, here our target is es2016

92
00:03:03,570 --> 00:03:05,970
which is quite an old
version of JavaScript

93
00:03:05,970 --> 00:03:08,040
but that's why it's
converting our const into var

94
00:03:08,040 --> 00:03:09,420
just to make sure that that is available

95
00:03:09,420 --> 00:03:10,860
inside of the version of JavaScript

96
00:03:10,860 --> 00:03:12,180
that you are specifically targeting.

97
00:03:12,180 --> 00:03:13,500
And you can change this
to whatever you want.

98
00:03:13,500 --> 00:03:15,278
Now, let's say for example our
code actually had an error.

99
00:03:15,278 --> 00:03:17,250
For example, we try to
call this sum function

100
00:03:17,250 --> 00:03:19,290
by just passing it one
number instead of two.

101
00:03:19,290 --> 00:03:21,000
You can see we obviously have an error.

102
00:03:21,000 --> 00:03:22,890
If we try to compile our code like this,

103
00:03:22,890 --> 00:03:24,690
you'll notice that we're
going to get a console error

104
00:03:24,690 --> 00:03:25,890
being printed out essentially saying,

105
00:03:25,890 --> 00:03:27,660
hey, it cannot run this code

106
00:03:27,660 --> 00:03:29,299
because there's this error in the code.

107
00:03:29,299 --> 00:03:30,819
But if we go and look at our output

108
00:03:30,819 --> 00:03:32,850
you'll notice it actually
changed our output.

109
00:03:32,850 --> 00:03:35,310
You can see it's calling that
function with one argument.

110
00:03:35,310 --> 00:03:36,571
If you don't want this to happen

111
00:03:36,571 --> 00:03:39,251
one thing that you can do
when you run your command

112
00:03:39,251 --> 00:03:43,552
is you can also pass at
the noEmitOnError flag

113
00:03:43,552 --> 00:03:45,210
and essentially what that's going to do

114
00:03:45,210 --> 00:03:46,043
is if there's an error,

115
00:03:46,043 --> 00:03:47,880
it won't actually output
a JavaScript file.

116
00:03:47,880 --> 00:03:49,575
So we can delete that file
and we're gonna run this again

117
00:03:49,575 --> 00:03:51,234
and you'll notice it's not going to output

118
00:03:51,234 --> 00:03:54,330
that JavaScript file until we
remove our error, for example,

119
00:03:54,330 --> 00:03:56,310
by passing this two different numbers.

120
00:03:56,310 --> 00:03:58,590
Now, when we run this, it's
going to be correct code

121
00:03:58,590 --> 00:04:00,870
so it'll actually output
that JavaScript file.

122
00:04:00,870 --> 00:04:01,950
If that's the behavior you want,

123
00:04:01,950 --> 00:04:03,210
make sure you have that option

124
00:04:03,210 --> 00:04:05,100
either enabled in your config file here,

125
00:04:05,100 --> 00:04:07,590
if we just search for noEmitOnError,

126
00:04:07,590 --> 00:04:09,270
you can see that we have
this option right here

127
00:04:09,270 --> 00:04:11,280
that we can enable, or
make sure you pass it

128
00:04:11,280 --> 00:04:12,689
in to the command line directly.

129
00:04:12,689 --> 00:04:14,460
Now, this is the most basic way

130
00:04:14,460 --> 00:04:15,977
of using the command
line to actually compile

131
00:04:15,977 --> 00:04:19,405
your TypeScript code,
but in 99% of use cases,

132
00:04:19,405 --> 00:04:21,556
you're not going to be
setting this up manually.

133
00:04:21,556 --> 00:04:23,880
Instead, you're going to be
using some type of bundler

134
00:04:23,880 --> 00:04:26,220
or framework that does
all of this work for you.

135
00:04:26,220 --> 00:04:27,810
And in the next video I'm
gonna show you exactly

136
00:04:27,810 --> 00:04:29,110
how to do that using Vite.