Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,340 --> 00:00:05,030
So now that we know what TypeScript is,
2
00:00:05,030 --> 00:00:08,990
that we can add types to our programs with it
3
00:00:08,990 --> 00:00:12,900
and how the syntax generally looks like,
4
00:00:12,900 --> 00:00:15,940
let's make sure we can all use TypeScript.
5
00:00:15,940 --> 00:00:18,720
And therefore if you search for TypeScript,
6
00:00:18,720 --> 00:00:21,620
you can visit typescriptlang.org
7
00:00:21,620 --> 00:00:24,180
and that's the official TypeScript webpage
8
00:00:24,180 --> 00:00:26,820
where you can learn more about TypeScript
9
00:00:26,820 --> 00:00:30,280
and where you can also learn how to install TypeScript.
10
00:00:30,280 --> 00:00:33,020
As a side note, if you want to learn way more
11
00:00:33,020 --> 00:00:35,790
about TypeScript, I also do have a complete
12
00:00:35,790 --> 00:00:39,970
TypeScript course where I dive deeply into TypeScript.
13
00:00:39,970 --> 00:00:43,320
In this module, I'll just cover some basics.
14
00:00:43,320 --> 00:00:45,720
So if you want to learn more my full course
15
00:00:45,720 --> 00:00:47,770
might be interesting to you as well
16
00:00:47,770 --> 00:00:50,453
or the official docs of course in addition.
17
00:00:51,380 --> 00:00:53,260
So now to install it locally,
18
00:00:53,260 --> 00:00:55,600
we can click here on install locally
19
00:00:55,600 --> 00:00:59,960
and now we basically need to run this command here.
20
00:00:59,960 --> 00:01:04,129
Now for that, we need to make sure that Node.js is installed
21
00:01:04,129 --> 00:01:07,180
but we needed this for this course and for using React
22
00:01:07,180 --> 00:01:11,170
anyways and therefore that should already be installed.
23
00:01:11,170 --> 00:01:12,830
So therefore we can now run this command
24
00:01:12,830 --> 00:01:14,810
to install TypeScript.
25
00:01:14,810 --> 00:01:17,770
And running this command will install TypeScript
26
00:01:17,770 --> 00:01:20,200
into a specific project.
27
00:01:20,200 --> 00:01:23,410
If you wanna install it globally on your system,
28
00:01:23,410 --> 00:01:28,030
then you need to run npm install -g typescript.
29
00:01:28,030 --> 00:01:31,600
But often installing it just into one specific project
30
00:01:31,600 --> 00:01:34,250
is enough so that you can then use TypeScript
31
00:01:34,250 --> 00:01:38,030
in that project into which you install it.
32
00:01:38,030 --> 00:01:40,490
And therefore that's what I'll do here now.
33
00:01:40,490 --> 00:01:44,070
I will open my terminal, which is integrated
34
00:01:44,070 --> 00:01:48,583
here into this project and run npm install typescript.
35
00:01:49,580 --> 00:01:53,790
And actually for this I'll first of all run npm init -y
36
00:01:53,790 --> 00:01:56,510
to create a empty package.json file
37
00:01:57,720 --> 00:02:00,190
because we will need that to install dependencies
38
00:02:00,190 --> 00:02:03,940
and then I'll run npm install typescript.
39
00:02:03,940 --> 00:02:07,170
And this will now install TypeScript into this project.
40
00:02:07,170 --> 00:02:11,540
Please note, this is still no React project.
41
00:02:11,540 --> 00:02:14,780
This is still just a standard web project.
42
00:02:14,780 --> 00:02:18,333
We'll move towards our React project a little bit later.
43
00:02:19,540 --> 00:02:21,283
So now TypeScript is installed.
44
00:02:22,400 --> 00:02:25,530
With that installed, we can now invoke
45
00:02:25,530 --> 00:02:29,930
the TypeScript compiler and that is really important.
46
00:02:29,930 --> 00:02:34,320
As you learned, TypeScript is a superset to JavaScript
47
00:02:34,320 --> 00:02:38,980
extending the JavaScript syntax with those extra types.
48
00:02:38,980 --> 00:02:43,250
Now the important thing to note is that TypeScript code
49
00:02:43,250 --> 00:02:45,930
does not run in the browser though.
50
00:02:45,930 --> 00:02:48,910
So if you try to execute TypeScript in the browser,
51
00:02:48,910 --> 00:02:50,093
it will fail.
52
00:02:50,940 --> 00:02:55,940
Therefore we need to compile TypeScript to JavaScript.
53
00:02:56,010 --> 00:02:59,260
And during that compilation process,
54
00:02:59,260 --> 00:03:02,850
all our type annotations will be removed
55
00:03:02,850 --> 00:03:06,890
because JavaScript doesn't know those annotations.
56
00:03:06,890 --> 00:03:09,650
But it's during this compilation step
57
00:03:09,650 --> 00:03:12,500
where we will be notified about errors.
58
00:03:12,500 --> 00:03:15,773
In addition to the notification we get in the IDE already.
59
00:03:16,690 --> 00:03:20,720
So it's this compilation step which then will warn us
60
00:03:20,720 --> 00:03:24,000
of potential code problems if we haven't spotted
61
00:03:24,000 --> 00:03:28,620
them in the IDE before and then it's that compiled code
62
00:03:28,620 --> 00:03:30,400
which will run in the browser.
63
00:03:30,400 --> 00:03:32,940
Now to invoke this compiler,
64
00:03:32,940 --> 00:03:37,940
we need to run this command here npx tsc.
65
00:03:38,070 --> 00:03:42,060
So now if I run npx tsc like this,
66
00:03:42,060 --> 00:03:44,660
you'll see that I get an error though.
67
00:03:44,660 --> 00:03:47,590
I get this error because if I run this command
68
00:03:47,590 --> 00:03:50,050
just like this, then it expects
69
00:03:50,050 --> 00:03:54,460
a TypeScript configuration file in that project folder
70
00:03:54,460 --> 00:03:58,860
that tells TypeScript which files to compile.
71
00:03:58,860 --> 00:04:01,980
Now we'll add such a configuration file later,
72
00:04:01,980 --> 00:04:05,960
for the moment we can run this command slightly modified.
73
00:04:05,960 --> 00:04:09,350
We can point at a file that should be compiled.
74
00:04:09,350 --> 00:04:13,050
In this case, with typescript.ts.
75
00:04:13,050 --> 00:04:16,959
So if I run npx tsc with typescript.ts
76
00:04:16,959 --> 00:04:19,570
then this file is getting compiled.
77
00:04:19,570 --> 00:04:23,220
And hence now here I get one compilation error,
78
00:04:23,220 --> 00:04:27,450
the same error my IDE warned me about before.
79
00:04:27,450 --> 00:04:29,910
So if I haven't spotted it in the IDE,
80
00:04:29,910 --> 00:04:31,563
now I get an error here.
81
00:04:32,750 --> 00:04:36,370
Now you will notice that a no-typescript.js file
82
00:04:36,370 --> 00:04:38,340
was created nonetheless.
83
00:04:38,340 --> 00:04:40,870
That simply happens because by default
84
00:04:40,870 --> 00:04:44,180
even if you get an error during the compilation
85
00:04:44,180 --> 00:04:46,050
it's still completes.
86
00:04:46,050 --> 00:04:49,260
It just warns you because of that error
87
00:04:49,260 --> 00:04:52,160
but it still gives you a JavaScript file.
88
00:04:52,160 --> 00:04:56,230
And this JavaScript file, sorry this one here
89
00:04:56,230 --> 00:04:59,340
is now based on our TypeScript file.
90
00:04:59,340 --> 00:05:01,950
And you'll see it's almost the same code
91
00:05:01,950 --> 00:05:05,070
just without the types and actually it's changed
92
00:05:05,070 --> 00:05:08,660
const to var because by default right now,
93
00:05:08,660 --> 00:05:10,680
it's still also compiles to code
94
00:05:10,680 --> 00:05:14,310
such that it runs in older browsers as well.
95
00:05:14,310 --> 00:05:16,430
That is something which can be overwritten
96
00:05:16,430 --> 00:05:18,550
with the TypeScript conflict file
97
00:05:18,550 --> 00:05:21,000
but we don't have such a conflict file yet
98
00:05:21,000 --> 00:05:24,130
and therefore we have this code change as well.
99
00:05:24,130 --> 00:05:26,690
But of course you see that other than that it's the same
100
00:05:26,690 --> 00:05:29,720
code as we wrote in the TypeScript file.
101
00:05:29,720 --> 00:05:32,700
Now of course we should get rid of that error though,
102
00:05:32,700 --> 00:05:35,740
otherwise using TypeScript doesn't make any sense
103
00:05:35,740 --> 00:05:38,248
and hence I'll convert my two numbers,
104
00:05:38,248 --> 00:05:40,530
my two strings to numbers
105
00:05:40,530 --> 00:05:45,250
and if I save this now, the error is gone in the IDE.
106
00:05:45,250 --> 00:05:48,450
and if I now compile again, this also compiles
107
00:05:48,450 --> 00:05:50,890
without errors and we still have the same
108
00:05:50,890 --> 00:05:53,400
JavaScript output as before.
109
00:05:53,400 --> 00:05:56,460
But now it's this JavaScript file which we could
110
00:05:56,460 --> 00:05:59,110
import here and use here.
111
00:05:59,110 --> 00:06:02,290
If I now save this and then reload this page,
112
00:06:02,290 --> 00:06:06,130
I get seven again but now if we continue working
113
00:06:06,130 --> 00:06:09,650
in the TypeScript file and then compile it to run
114
00:06:09,650 --> 00:06:14,250
in the browser, now we actually protect ourselves against
115
00:06:14,250 --> 00:06:18,370
errors like we hadn't before, thanks to TypeScript.
116
00:06:18,370 --> 00:06:22,270
And now with that installed and now that we understand
117
00:06:22,270 --> 00:06:25,940
what this compiler does and how it this generally works,
118
00:06:25,940 --> 00:06:29,350
let's dive into some core features you need to know
119
00:06:29,350 --> 00:06:32,980
when working with TypeScript before we then thereafter see
120
00:06:32,980 --> 00:06:36,133
how we can use TypeScript with React.
9880
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.