Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:03,000 --> 00:00:05,967
Some of you will be familiar with TypeScript,
2
00:00:05,967 --> 00:00:09,828
a language that adds static typing to JavaScript.
3
00:00:09,828 --> 00:00:12,471
If you want to, you can use TypeScript
4
00:00:12,471 --> 00:00:14,418
for our Next.js application.
5
00:00:14,488 --> 00:00:16,686
Now, this step is optional;
6
00:00:16,686 --> 00:00:18,686
it's only for those of you who
7
00:00:18,686 --> 00:00:20,286
already know TypeScript.
8
00:00:20,353 --> 00:00:22,361
In all the other videos I'll
9
00:00:22,361 --> 00:00:24,010
use regular JavaScript,
10
00:00:24,082 --> 00:00:27,249
simply because not everybody knows TypeScript,
11
00:00:27,249 --> 00:00:29,465
and explaining that language would
12
00:00:29,465 --> 00:00:31,682
require an entire separate course.
13
00:00:31,747 --> 00:00:34,147
So if you don't know TypeScript, feel
14
00:00:34,147 --> 00:00:36,483
free to skip the rest of this video.
15
00:00:36,548 --> 00:00:39,446
But if you do want to use it in this project,
16
00:00:39,446 --> 00:00:41,550
I'll now show you how to do that.
17
00:00:41,550 --> 00:00:43,450
Let's stop the dev server,
18
00:00:43,450 --> 00:00:46,496
because we're going to rename a few files.
19
00:00:46,496 --> 00:00:49,170
Instead of "page.jsx",
20
00:00:49,170 --> 00:00:52,238
we want to call this "page.tsx".
21
00:00:52,238 --> 00:00:55,812
"tsx" is the extension for TypeScript files
22
00:00:55,812 --> 00:00:58,339
that also contain JSX code.
23
00:00:58,339 --> 00:01:01,032
Let's do the same for the layout file;
24
00:01:01,032 --> 00:01:03,951
this one will be "layout.tsx".
25
00:01:03,951 --> 00:01:06,749
The editor shows some errors at the moment,
26
00:01:06,749 --> 00:01:08,940
but that's just because we haven't
27
00:01:08,940 --> 00:01:10,745
configured this project yet.
28
00:01:10,810 --> 00:01:13,993
We don't even have TypeScript as a dependency.
29
00:01:13,993 --> 00:01:16,460
Now, the "next" command line tool
30
00:01:16,460 --> 00:01:18,629
can set up everything for us.
31
00:01:18,703 --> 00:01:21,339
We just need to start the server,
32
00:01:21,339 --> 00:01:23,575
with "npm run dev" as usual.
33
00:01:23,655 --> 00:01:26,042
You can see here that the "next"
34
00:01:26,042 --> 00:01:27,608
command detected that
35
00:01:27,683 --> 00:01:29,952
we're "trying to use TypeScript"
36
00:01:29,952 --> 00:01:33,379
"but do not have the required packages installed",
37
00:01:33,379 --> 00:01:35,716
and so it installed the dependencies
38
00:01:35,716 --> 00:01:36,625
automatically.
39
00:01:36,690 --> 00:01:40,328
It also "created a tsconfig.json file".
40
00:01:40,328 --> 00:01:42,791
In fact, in our package.json
41
00:01:42,791 --> 00:01:46,415
we now have 3 dev dependencies: "typescript",
42
00:01:46,415 --> 00:01:49,303
and the typings for "node" and "react".
43
00:01:49,303 --> 00:01:51,470
We also have two new files:
44
00:01:51,483 --> 00:01:56,339
"next-env.d.ts", that contains some references,
45
00:01:56,339 --> 00:01:58,835
and "tsconfig.json",
46
00:01:58,835 --> 00:02:01,200
that's the main configuration file
47
00:02:01,200 --> 00:02:03,426
used by the TypeScript compiler.
48
00:02:03,495 --> 00:02:05,871
We can leave these files as they are.
49
00:02:05,871 --> 00:02:08,477
Note however that, by default, it has
50
00:02:08,477 --> 00:02:10,943
the "strict" option set to "false".
51
00:02:11,013 --> 00:02:13,008
If you're a purist you may want
52
00:02:13,008 --> 00:02:14,487
to change that to true,
53
00:02:14,552 --> 00:02:16,133
but I'll leave it as it is.
54
00:02:16,133 --> 00:02:18,908
So, the "next" command added TypeScript
55
00:02:18,908 --> 00:02:20,545
support to our project,
56
00:02:20,616 --> 00:02:24,590
after detecting that we had some "tsx" files.
57
00:02:24,590 --> 00:02:26,940
And our application is still working,
58
00:02:26,940 --> 00:02:28,274
even with TypeScript.
59
00:02:28,338 --> 00:02:30,450
Now, in terms of code,
60
00:02:30,450 --> 00:02:32,526
we don't really need to change
61
00:02:32,526 --> 00:02:34,325
anything in this HomePage.
62
00:02:34,394 --> 00:02:36,334
There is a way we could fully
63
00:02:36,334 --> 00:02:38,006
type the React component,
64
00:02:38,073 --> 00:02:42,510
by declaring it as a const of type "React.FC",
65
00:02:42,510 --> 00:02:45,636
and then initializing it as an arrow function.
66
00:02:45,636 --> 00:02:48,959
FC is short for FunctionComponent.
67
00:02:48,959 --> 00:02:51,419
Although it's possible to do this,
68
00:02:51,419 --> 00:02:53,806
it no longer seems to be the most
69
00:02:53,806 --> 00:02:55,831
popular approach these days.
70
00:02:55,903 --> 00:02:58,472
Even without explicit typings,
71
00:02:58,472 --> 00:03:01,390
the TypeScript compiler can infer that
72
00:03:01,390 --> 00:03:04,830
this function returns a "JSX.Element".
73
00:03:04,830 --> 00:03:06,942
Which is pretty much all there
74
00:03:06,942 --> 00:03:08,631
is to a React component.
75
00:03:08,701 --> 00:03:11,037
Adding the "React.FC" annotation
76
00:03:11,037 --> 00:03:13,008
doesn't have huge benefits,
77
00:03:13,081 --> 00:03:16,149
while it makes the code a bit more complex.
78
00:03:16,149 --> 00:03:18,790
So I'll leave this component as it is.
79
00:03:18,790 --> 00:03:21,876
Now, if we look at "layout.tsx",
80
00:03:21,876 --> 00:03:24,358
this component receives some props,
81
00:03:24,358 --> 00:03:26,614
and at the moment this "children"
82
00:03:26,614 --> 00:03:28,460
property could be anything.
83
00:03:28,529 --> 00:03:30,993
So we may want to define an interface,
84
00:03:30,993 --> 00:03:33,080
let's call it "LayoutProps",
85
00:03:33,813 --> 00:03:36,110
where we specify that "children"
86
00:03:36,110 --> 00:03:38,457
should be a "ReactNode",
87
00:03:38,457 --> 00:03:40,284
that's a type we can import
88
00:03:40,284 --> 00:03:41,908
from the "react" module,
89
00:03:41,976 --> 00:03:45,626
and it represents effectively any JSX element.
90
00:03:45,626 --> 00:03:47,600
Now we can use this interface
91
00:03:47,966 --> 00:03:50,283
to annotate the "props" object.
92
00:03:50,283 --> 00:03:52,113
And this way the compiler
93
00:03:52,113 --> 00:03:53,942
knows what "children" is.
94
00:03:54,015 --> 00:03:56,280
It will also know which properties
95
00:03:56,280 --> 00:03:58,211
are available in this object,
96
00:03:58,278 --> 00:04:00,668
in this case there's only this one.
97
00:04:00,668 --> 00:04:03,194
But the compiler can check if we're
98
00:04:03,194 --> 00:04:05,070
using the props correctly.
99
00:04:05,142 --> 00:04:07,776
Now, as much as I like TypeScript,
100
00:04:07,776 --> 00:04:10,590
and I would use it for any serious project,
101
00:04:10,590 --> 00:04:13,103
one of the challenges with it is that
102
00:04:13,103 --> 00:04:15,244
sometimes there's more than one
103
00:04:15,244 --> 00:04:16,970
way to do the same thing.
104
00:04:17,039 --> 00:04:19,115
For example, in the Next.js
105
00:04:19,115 --> 00:04:20,961
documentation you'll see
106
00:04:21,038 --> 00:04:23,899
the props object annotated like this,
107
00:04:23,899 --> 00:04:27,166
rather than by defining a separate interface.
108
00:04:27,166 --> 00:04:29,050
It's effectively the same thing.
109
00:04:29,050 --> 00:04:32,569
I personally prefer having an interface at the top
110
00:04:32,569 --> 00:04:35,130
where I can more easily see the props
111
00:04:35,130 --> 00:04:36,999
accepted by this component.
112
00:04:37,068 --> 00:04:39,319
Also, instead of an "interface",
113
00:04:39,319 --> 00:04:42,690
some people prefer using "type" for everything,
114
00:04:42,690 --> 00:04:45,948
including to describe the properties of an object.
115
00:04:45,948 --> 00:04:48,162
Again, in practice this is pretty
116
00:04:48,162 --> 00:04:49,505
much the same thing,
117
00:04:49,572 --> 00:04:52,251
and which approach to choose is mostly
118
00:04:52,251 --> 00:04:54,507
a matter of personal preference.
119
00:04:54,578 --> 00:04:58,329
One feature I like to use is "import type",
120
00:04:58,329 --> 00:05:00,723
for types that are only used by
121
00:05:00,723 --> 00:05:02,808
the compiler at build time,
122
00:05:02,885 --> 00:05:05,779
as opposed to functions or objects
123
00:05:05,779 --> 00:05:09,770
that import JavaScript code used at runtime.
124
00:05:09,770 --> 00:05:12,137
This is not usually necessary;
125
00:05:12,137 --> 00:05:13,881
but I like the distinction.
126
00:05:13,881 --> 00:05:16,738
Of course, you may have your own preferences.
127
00:05:16,738 --> 00:05:19,272
But the important thing is that our
128
00:05:19,272 --> 00:05:21,300
app now supports TypeScript.
129
00:05:21,372 --> 00:05:23,700
Now, even though I'll use JavaScript
130
00:05:23,700 --> 00:05:25,381
in the rest of the videos,
131
00:05:25,446 --> 00:05:28,043
I'm also providing you with a TypeScript
132
00:05:28,043 --> 00:05:29,601
version of this project.
133
00:05:29,666 --> 00:05:32,821
If we take another look at the Github Repository,
134
00:05:32,821 --> 00:05:35,314
it includes a "typescript" branch,
135
00:05:35,561 --> 00:05:38,166
where you can again find all the code,
136
00:05:38,166 --> 00:05:41,446
but written in TypeScript rather than JavaScript.
137
00:05:41,446 --> 00:05:43,531
You can see that there are
138
00:05:43,531 --> 00:05:45,616
"ts" and "tsx" files here.
139
00:05:45,696 --> 00:05:49,442
About 90% of the code is the same anyway,
140
00:05:49,442 --> 00:05:51,941
but from the next lecture onwards
141
00:05:51,941 --> 00:05:55,224
you'll also find a link to a TypeScript Diff,
142
00:05:55,224 --> 00:05:57,583
where you can see how I would type
143
00:05:57,583 --> 00:05:59,803
function parameters for example,
144
00:05:59,873 --> 00:06:03,360
or define an interface to describe some data.
145
00:06:03,360 --> 00:06:05,791
So if you want to use TypeScript while
146
00:06:05,791 --> 00:06:07,774
following along with the videos
147
00:06:07,838 --> 00:06:09,832
by all means you can do that.
10705
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.