1
00:00:00,150 --> 00:00:01,680
- Now, as I mentioned in the last video,

2
00:00:01,680 --> 00:00:03,120
sometimes you run into a library

3
00:00:03,120 --> 00:00:04,590
that doesn't have any types yet

4
00:00:04,590 --> 00:00:06,690
and you may need to add your own types.

5
00:00:06,690 --> 00:00:08,490
In this video, I'm gonna
show you how you can do that

6
00:00:08,490 --> 00:00:09,780
as well as a few other tricks

7
00:00:09,780 --> 00:00:12,420
related to this declaration file.

8
00:00:12,420 --> 00:00:14,970
So what I have here is I
have lodash being installed

9
00:00:14,970 --> 00:00:17,400
but I don't have the types
for lodash installed,

10
00:00:17,400 --> 00:00:20,700
and I'm just going to pretend
like these types don't exist,

11
00:00:20,700 --> 00:00:22,440
that the only thing in this lodash library

12
00:00:22,440 --> 00:00:23,760
is this times function

13
00:00:23,760 --> 00:00:25,200
and that it should take a number

14
00:00:25,200 --> 00:00:28,290
and return to us an array
of numbers as the result.

15
00:00:28,290 --> 00:00:31,140
That's what I'm assuming
should happen for this function

16
00:00:31,140 --> 00:00:32,610
but, obviously, there's no types for it,

17
00:00:32,610 --> 00:00:34,770
so I don't get any of that type safety.

18
00:00:34,770 --> 00:00:37,980
In order to write the
types for either a library

19
00:00:37,980 --> 00:00:40,830
or the built-in types that
are built into JavaScript,

20
00:00:40,830 --> 00:00:42,720
you need to use a declaration file,

21
00:00:42,720 --> 00:00:44,760
and we've already looked
at this a little bit.

22
00:00:44,760 --> 00:00:47,160
For example, if I just like
look at the document object,

23
00:00:47,160 --> 00:00:51,750
you can see up here the
file name is lib.dom.d.ts.

24
00:00:51,750 --> 00:00:54,540
Anytime you see a .d.ts file,

25
00:00:54,540 --> 00:00:56,670
that is considered a declaration file,

26
00:00:56,670 --> 00:00:58,590
and this is a file that's not actually

27
00:00:58,590 --> 00:00:59,820
having any code in it,

28
00:00:59,820 --> 00:01:01,290
it has only types in it,

29
00:01:01,290 --> 00:01:04,290
and it's specifically used
to add types to libraries

30
00:01:04,290 --> 00:01:06,270
as well to built-in types.

31
00:01:06,270 --> 00:01:09,810
You'll see here, we already
have this vite-env.d.ts,

32
00:01:09,810 --> 00:01:11,070
which is doing some tricky stuff

33
00:01:11,070 --> 00:01:13,260
to add specific Vite types in,

34
00:01:13,260 --> 00:01:16,560
so when I type in like
import.meta, for example,

35
00:01:16,560 --> 00:01:18,600
I'm getting specific Vite-related types

36
00:01:18,600 --> 00:01:20,400
from all of that information.

37
00:01:20,400 --> 00:01:22,320
The other really important
thing to understand

38
00:01:22,320 --> 00:01:24,570
about these .d.ts files

39
00:01:24,570 --> 00:01:26,340
is you don't need to
worry about importing them

40
00:01:26,340 --> 00:01:29,490
because all .d files are
automatically inferred

41
00:01:29,490 --> 00:01:31,890
and imported everywhere
that you use your code,

42
00:01:31,890 --> 00:01:33,660
so you don't have to worry
about manually importing them

43
00:01:33,660 --> 00:01:35,370
'cause it's already handled for you.

44
00:01:35,370 --> 00:01:37,200
So if you want to add types to a library

45
00:01:37,200 --> 00:01:38,880
that those types do not exist for,

46
00:01:38,880 --> 00:01:41,010
you need to create a .d.ts file.

47
00:01:41,010 --> 00:01:42,600
It doesn't matter what you call it.

48
00:01:42,600 --> 00:01:44,310
Generally, if you're
adding types to a library,

49
00:01:44,310 --> 00:01:45,990
it makes sense to give it the same name

50
00:01:45,990 --> 00:01:47,850
as the library you're trying to override.

51
00:01:47,850 --> 00:01:50,430
So in our case, lodash.d.ts.

52
00:01:50,430 --> 00:01:52,560
Then what we need to do, this
is a really important step,

53
00:01:52,560 --> 00:01:55,590
is you need to write that
you want to declare a module

54
00:01:55,590 --> 00:01:57,690
and the name of this
module, which is a string,

55
00:01:57,690 --> 00:02:00,600
must directly match the
library name you're overriding.

56
00:02:00,600 --> 00:02:02,790
So in our case, we are
declaring a module for lodash

57
00:02:02,790 --> 00:02:03,750
right here,

58
00:02:03,750 --> 00:02:05,670
and then we'll open that up like that.

59
00:02:05,670 --> 00:02:06,630
And now when we've done that,

60
00:02:06,630 --> 00:02:08,280
we've at least gone a step further.

61
00:02:08,280 --> 00:02:09,270
Our error has moved

62
00:02:09,270 --> 00:02:11,130
because now we have
types for this library,

63
00:02:11,130 --> 00:02:12,660
but it's saying that we don't have types

64
00:02:12,660 --> 00:02:14,520
for this times method yet.

65
00:02:14,520 --> 00:02:17,100
So inside of this module, we
can declare whatever we want.

66
00:02:17,100 --> 00:02:18,540
You know, we can declare types,

67
00:02:18,540 --> 00:02:19,800
we declare interfaces,

68
00:02:19,800 --> 00:02:22,740
in our case, we're gonna
declare a function called times.

69
00:02:22,740 --> 00:02:24,660
This function is going to take in a number

70
00:02:24,660 --> 00:02:26,070
with the type of number,

71
00:02:26,070 --> 00:02:28,170
and it's going to return a number array.

72
00:02:28,170 --> 00:02:29,010
Just by saving that,

73
00:02:29,010 --> 00:02:31,530
you'll now see that all
of our errors are gone,

74
00:02:31,530 --> 00:02:33,270
and if we actually hover
over this function,

75
00:02:33,270 --> 00:02:35,310
you can see it's a function
that takes in a number

76
00:02:35,310 --> 00:02:37,260
and returns to us a number array.

77
00:02:37,260 --> 00:02:38,093
Now if I changed it

78
00:02:38,093 --> 00:02:40,170
to say that this is
actually a string instead,

79
00:02:40,170 --> 00:02:41,370
you'll see I get an error over here

80
00:02:41,370 --> 00:02:42,690
because this should be a string.

81
00:02:42,690 --> 00:02:45,570
So it's properly updating
all that information.

82
00:02:45,570 --> 00:02:47,340
So if you need to type out a library,

83
00:02:47,340 --> 00:02:49,140
the way to do it is to declare a module

84
00:02:49,140 --> 00:02:50,490
with the name of your library

85
00:02:50,490 --> 00:02:53,970
and then write all of your
types inside of that module.

86
00:02:53,970 --> 00:02:55,080
Now, luckily for the most part,

87
00:02:55,080 --> 00:02:57,180
you're probably not
going to need to do this,

88
00:02:57,180 --> 00:02:59,220
but if you do, sometimes
writing out these types

89
00:02:59,220 --> 00:03:00,330
can be quite difficult

90
00:03:00,330 --> 00:03:02,220
because writing out
the types for a library

91
00:03:02,220 --> 00:03:04,440
can sometimes be fairly advanced.

92
00:03:04,440 --> 00:03:06,300
But hopefully, this isn't
something that you need to do

93
00:03:06,300 --> 00:03:07,133
because like I've said,

94
00:03:07,133 --> 00:03:09,390
most libraries are already typed for you.

95
00:03:09,390 --> 00:03:11,640
One thing that you will probably
have to do at some point

96
00:03:11,640 --> 00:03:13,590
that relates to declaration files, though,

97
00:03:13,590 --> 00:03:17,370
is overriding the global values
that are available for you.

98
00:03:17,370 --> 00:03:18,203
For example,

99
00:03:18,203 --> 00:03:21,210
let's say that I wanted
to add a method to console

100
00:03:21,210 --> 00:03:23,070
and I wanted to call it superLog.

101
00:03:23,070 --> 00:03:24,030
This is a terrible idea.

102
00:03:24,030 --> 00:03:26,280
You should never actually
do something like this.

103
00:03:26,280 --> 00:03:27,780
Let's just say, for our purposes,

104
00:03:27,780 --> 00:03:29,700
this is something that I want to do.

105
00:03:29,700 --> 00:03:30,540
Well, what I would need to do

106
00:03:30,540 --> 00:03:32,550
is create a declaration file for this.

107
00:03:32,550 --> 00:03:33,780
So you can call it whatever you want,

108
00:03:33,780 --> 00:03:34,613
again, it doesn't matter.

109
00:03:34,613 --> 00:03:37,260
We'll just call it globals.d.ts.

110
00:03:37,260 --> 00:03:39,300
And here, instead of declaring a module,

111
00:03:39,300 --> 00:03:41,880
what I wanna do is I wanna declare global.

112
00:03:41,880 --> 00:03:42,713
And this is just saying,

113
00:03:42,713 --> 00:03:45,360
this is going to be something
that is globally available.

114
00:03:45,360 --> 00:03:46,860
And since the console object

115
00:03:46,860 --> 00:03:48,630
is something that's globally available,

116
00:03:48,630 --> 00:03:51,060
I want to declare that as a global thing.

117
00:03:51,060 --> 00:03:54,540
So now how do I actually get
to that console object itself?

118
00:03:54,540 --> 00:03:56,670
Well, what I need to do is I
need to look at the console

119
00:03:56,670 --> 00:03:58,020
to see how I override it.

120
00:03:58,020 --> 00:03:59,160
So I can come into this console

121
00:03:59,160 --> 00:04:02,040
and I can see that it has this
type right here of console.

122
00:04:02,040 --> 00:04:03,690
So what I need to do is if I look at this,

123
00:04:03,690 --> 00:04:05,760
you can see this is an
interface called the console.

124
00:04:05,760 --> 00:04:07,590
So I just wanna copy this exactly.

125
00:04:07,590 --> 00:04:09,330
I wanna put that inside my globals here.

126
00:04:09,330 --> 00:04:11,790
So I'm just saying I have
an interface called console

127
00:04:11,790 --> 00:04:14,250
and that directly matches
this console right here.

128
00:04:14,250 --> 00:04:16,440
And now I can add my own
custom stuff into here

129
00:04:16,440 --> 00:04:18,870
and it's gonna mesh the
two of them together.

130
00:04:18,870 --> 00:04:21,570
For example, I can create
a superLog function

131
00:04:21,570 --> 00:04:22,740
and this is just gonna be a function

132
00:04:22,740 --> 00:04:25,590
that accepts no arguments
and returns void.

133
00:04:25,590 --> 00:04:27,360
Now, this will mesh the
two of them together,

134
00:04:27,360 --> 00:04:29,220
but you'll notice we're still
getting an error over here

135
00:04:29,220 --> 00:04:31,560
saying that superLog does not exist.

136
00:04:31,560 --> 00:04:32,460
Now, the reason for that

137
00:04:32,460 --> 00:04:34,530
is when you override globals like this,

138
00:04:34,530 --> 00:04:37,050
you need to make sure you
export something in your file

139
00:04:37,050 --> 00:04:38,490
or it won't know what to do.

140
00:04:38,490 --> 00:04:40,110
Sometimes you may have something to export

141
00:04:40,110 --> 00:04:41,880
but if you have nothing to export,

142
00:04:41,880 --> 00:04:43,770
just put an export with an empty object

143
00:04:43,770 --> 00:04:46,080
and that tells TypeScript,
"Hey, look at this file

144
00:04:46,080 --> 00:04:47,220
and actually use it."

145
00:04:47,220 --> 00:04:49,380
You don't need to do that when
you're declaring a module,

146
00:04:49,380 --> 00:04:51,870
but if you're not declaring a
module or exporting anything,

147
00:04:51,870 --> 00:04:53,760
you need to make sure you
add that line in there.

148
00:04:53,760 --> 00:04:55,260
Now, you can see this superLog works

149
00:04:55,260 --> 00:04:57,090
and we actually get it typed perfectly.

150
00:04:57,090 --> 00:04:58,830
And all of our other
methods are still there,

151
00:04:58,830 --> 00:05:01,830
but this superLog is a new
method that we've just added.

152
00:05:01,830 --> 00:05:04,020
Now, like I said, this is not
something I would ever do.

153
00:05:04,020 --> 00:05:07,050
It's a really bad idea to
monkey patch into the library.

154
00:05:07,050 --> 00:05:08,700
Essentially, that means add properties

155
00:05:08,700 --> 00:05:10,650
to the existing JavaScript libraries.

156
00:05:10,650 --> 00:05:12,240
But one thing that's really common

157
00:05:12,240 --> 00:05:14,340
is you may be using like
jQuery, for example,

158
00:05:14,340 --> 00:05:15,173
where you need to say

159
00:05:15,173 --> 00:05:17,190
that the dollar sign is a global variable,

160
00:05:17,190 --> 00:05:19,050
or you may add your own global variables

161
00:05:19,050 --> 00:05:20,790
that you want to be able to have typed.

162
00:05:20,790 --> 00:05:23,430
What you can do instead is
you could declare a variable

163
00:05:23,430 --> 00:05:25,860
by saying declare var and then
call it whatever you want.

164
00:05:25,860 --> 00:05:27,090
So if we were doing like jQuery,

165
00:05:27,090 --> 00:05:28,320
you know, you could call a dollar sign,

166
00:05:28,320 --> 00:05:30,030
in our case, we'll just call this test

167
00:05:30,030 --> 00:05:32,010
and we'll say that this is a number.

168
00:05:32,010 --> 00:05:33,540
So now I'm saying that globally,

169
00:05:33,540 --> 00:05:35,640
on my this object on the window,

170
00:05:35,640 --> 00:05:38,460
I have a test variable that is a number.

171
00:05:38,460 --> 00:05:41,010
So if I come into my code
and I just write out test,

172
00:05:41,010 --> 00:05:43,650
you'll notice that this is a
number and it works just fine,

173
00:05:43,650 --> 00:05:47,250
and it works just like,
if I say window.test,

174
00:05:47,250 --> 00:05:48,090
you can see it's right there.

175
00:05:48,090 --> 00:05:49,770
That's essentially what
the global object is

176
00:05:49,770 --> 00:05:51,630
when you're working in the DOM.

177
00:05:51,630 --> 00:05:53,310
And this is a fairly common use case

178
00:05:53,310 --> 00:05:55,350
because you're probably
working in some older code

179
00:05:55,350 --> 00:05:56,850
that may have some global variables

180
00:05:56,850 --> 00:05:57,720
or even just in general,

181
00:05:57,720 --> 00:06:00,180
you may have some global
variables that you want to type.

182
00:06:00,180 --> 00:06:02,010
This is the way that you're
going to want to do that.

183
00:06:02,010 --> 00:06:03,750
Again, the file name doesn't matter.

184
00:06:03,750 --> 00:06:06,150
As long as it has a .d.ts,

185
00:06:06,150 --> 00:06:07,410
that's all TypeScript needs to know

186
00:06:07,410 --> 00:06:09,630
to be able to say that
this is a declaration file.

187
00:06:09,630 --> 00:06:10,740
And again, you may make sure

188
00:06:10,740 --> 00:06:12,360
you have this export at the bottom

189
00:06:12,360 --> 00:06:14,580
just to make sure TypeScript
actually reads this file.

190
00:06:14,580 --> 00:06:16,860
Essentially, if you don't
have that, it won't work

191
00:06:16,860 --> 00:06:18,780
because it just doesn't
look at this file at all.

192
00:06:18,780 --> 00:06:20,730
So if you're running into errors
where your code looks right

193
00:06:20,730 --> 00:06:21,690
but it's not working,

194
00:06:21,690 --> 00:06:23,190
it's most likely because you forgot to put

195
00:06:23,190 --> 00:06:24,243
this export in there.