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.