1
00:00:00,180 --> 00:00:01,860
- In this video, we're
gonna be talking all about

2
00:00:01,860 --> 00:00:04,060
how you can import and
export types in TypeScript,

3
00:00:04,060 --> 00:00:07,950
as well as how to deal with
libraries with types as well.

4
00:00:07,950 --> 00:00:10,080
So, to get started, I have
actually two files this time.

5
00:00:10,080 --> 00:00:12,150
The first one contains a user type,

6
00:00:12,150 --> 00:00:14,040
and then it contains a user object,

7
00:00:14,040 --> 00:00:15,900
which we are exporting from this file,

8
00:00:15,900 --> 00:00:19,260
just normal JavaScript stuff,
minus this type obviously.

9
00:00:19,260 --> 00:00:20,430
And then, in this other file here,

10
00:00:20,430 --> 00:00:22,830
we are importing this me object,

11
00:00:22,830 --> 00:00:25,560
and we're calling printUser
passing it that me object.

12
00:00:25,560 --> 00:00:27,870
And this printUser function takes a user,

13
00:00:27,870 --> 00:00:29,880
and it just prints out their name.

14
00:00:29,880 --> 00:00:32,520
Now, the problem in this
code, TypeScript related wise,

15
00:00:32,520 --> 00:00:34,860
is that I don't have a
type for this user here,

16
00:00:34,860 --> 00:00:37,380
and I wanna type it as this user object

17
00:00:37,380 --> 00:00:39,630
that's coming from this main.ts file,

18
00:00:39,630 --> 00:00:41,640
but this is only in this main.ts file.

19
00:00:41,640 --> 00:00:43,770
I don't have access to it in this file.

20
00:00:43,770 --> 00:00:45,900
What I need to do is export that type,

21
00:00:45,900 --> 00:00:48,030
and luckily TypeScript
allows you to import

22
00:00:48,030 --> 00:00:50,940
and export types just
like normal JavaScript.

23
00:00:50,940 --> 00:00:52,440
So, I can just come in here and I can say

24
00:00:52,440 --> 00:00:54,720
that I want to export this type user.

25
00:00:54,720 --> 00:00:57,900
Now, I can come into here and
I can import that user type,

26
00:00:57,900 --> 00:01:00,090
and as you can see, everything
is working just fine.

27
00:01:00,090 --> 00:01:02,700
So, it's very easy to
import and export types

28
00:01:02,700 --> 00:01:05,550
because it works just
like normal JavaScript.

29
00:01:05,550 --> 00:01:06,960
There's only one minor difference

30
00:01:06,960 --> 00:01:08,580
and it's not even
something you need to do,

31
00:01:08,580 --> 00:01:11,430
it's just an alternative
way to import types.

32
00:01:11,430 --> 00:01:13,680
Let's say for example
here that I'm not actually

33
00:01:13,680 --> 00:01:15,810
using this me variable
anywhere in my code.

34
00:01:15,810 --> 00:01:17,460
So, for example, I'm not importing it here

35
00:01:17,460 --> 00:01:19,980
and the only thing I'm
importing is my user type

36
00:01:19,980 --> 00:01:21,720
to be able to type this function.

37
00:01:21,720 --> 00:01:24,030
Well, depending on if
you have code splitting

38
00:01:24,030 --> 00:01:26,460
set up in your code and if you're using

39
00:01:26,460 --> 00:01:29,580
a particular bundler that
can take advantage of this,

40
00:01:29,580 --> 00:01:32,880
you may want to import this
specifically as a type.

41
00:01:32,880 --> 00:01:35,340
If you're importing
only types from a file,

42
00:01:35,340 --> 00:01:37,380
you can say import type and then list out

43
00:01:37,380 --> 00:01:39,120
all the different types
you want to import.

44
00:01:39,120 --> 00:01:41,670
And what that'll do is if
you're using specific bundlers

45
00:01:41,670 --> 00:01:43,890
that support it and
you are doing some type

46
00:01:43,890 --> 00:01:46,140
of code splitting, most likely
what it'll do is make sure

47
00:01:46,140 --> 00:01:49,830
that it doesn't include
this main.ts file at all.

48
00:01:49,830 --> 00:01:52,170
Now, generally, most bundlers
are gonna be smart enough

49
00:01:52,170 --> 00:01:54,330
that it doesn't matter
if you import normally

50
00:01:54,330 --> 00:01:56,160
or you import type,
it's gonna make sure not

51
00:01:56,160 --> 00:01:58,481
to include this file because
this only has development code

52
00:01:58,481 --> 00:02:00,660
in it that you're not actually using,

53
00:02:00,660 --> 00:02:02,640
but if you're using maybe an older bundler

54
00:02:02,640 --> 00:02:04,350
or a bundler that doesn't quite know how

55
00:02:04,350 --> 00:02:05,910
to do that code splitting in that,

56
00:02:05,910 --> 00:02:08,040
you know, removal of code
that you're not using,

57
00:02:08,040 --> 00:02:10,020
having this import type
in there may help out

58
00:02:10,020 --> 00:02:11,790
your bundler to know that
you don't actually need

59
00:02:11,790 --> 00:02:14,550
this code in production, but
again, it's entirely optional

60
00:02:14,550 --> 00:02:16,380
and for the most part I
just do normal imports

61
00:02:16,380 --> 00:02:18,420
and everything works
fine because the bundler

62
00:02:18,420 --> 00:02:20,160
is smart enough to know
which code's actually

63
00:02:20,160 --> 00:02:21,900
for production and which isn't.

64
00:02:21,900 --> 00:02:24,060
So, that's pretty easy to
import and export types.

65
00:02:24,060 --> 00:02:25,560
What happens if we want to use types

66
00:02:25,560 --> 00:02:27,030
inside of another library?

67
00:02:27,030 --> 00:02:29,010
Well, let's go ahead and
we're going to use a library.

68
00:02:29,010 --> 00:02:30,420
We'll just import it into our project.

69
00:02:30,420 --> 00:02:33,960
We'll say NPMI and
we're gonna do date FNS.

70
00:02:33,960 --> 00:02:35,940
So, I'm just gonna to install
this date FNS library.

71
00:02:35,940 --> 00:02:37,440
Doesn't matter what it
is, it's just a library

72
00:02:37,440 --> 00:02:39,949
for handling dates is
what it's going to be.

73
00:02:39,949 --> 00:02:41,700
Now, that's done, we can come up here

74
00:02:41,700 --> 00:02:44,640
and we can do some imports from date FNS.

75
00:02:44,640 --> 00:02:45,930
And this has a bunch of different things.

76
00:02:45,930 --> 00:02:47,970
We'll do like an add days
property or something like that.

77
00:02:47,970 --> 00:02:49,246
So, this is just a
function that we can call

78
00:02:49,246 --> 00:02:51,030
that takes in some dates.

79
00:02:51,030 --> 00:02:53,070
So, we can say add days
and we're going to say

80
00:02:53,070 --> 00:02:55,290
that we want to pass it in a new date

81
00:02:55,290 --> 00:02:56,340
and we're going to pass it in three.

82
00:02:56,340 --> 00:02:58,590
So, it's gonna add three
days to the current date.

83
00:02:58,590 --> 00:03:01,140
As you can see, we get type
safety for all this stuff

84
00:03:01,140 --> 00:03:03,630
and that's because this date FNS library

85
00:03:03,630 --> 00:03:04,920
is written in TypeScript.

86
00:03:04,920 --> 00:03:07,260
If we go to the definition
for this function,

87
00:03:07,260 --> 00:03:09,330
you can see that everything
inside of here is typed

88
00:03:09,330 --> 00:03:11,700
and everything is written in TypeScript.

89
00:03:11,700 --> 00:03:14,160
Now, not all libraries are
written in TypeScript, though.

90
00:03:14,160 --> 00:03:16,020
If you have a library that's
written in TypeScript,

91
00:03:16,020 --> 00:03:17,130
you don't have to do anything.

92
00:03:17,130 --> 00:03:19,140
It'll just pull in all the
types for you automatically,

93
00:03:19,140 --> 00:03:20,280
which is great.

94
00:03:20,280 --> 00:03:22,740
What happens when we're
using a library like Lodash?

95
00:03:22,740 --> 00:03:24,848
So, we're gonna import
Lodash and Lodash doesn't,

96
00:03:24,848 --> 00:03:26,550
it was not written in TypeScript,

97
00:03:26,550 --> 00:03:28,170
so it doesn't have any types by default.

98
00:03:28,170 --> 00:03:29,790
So, if we come in here
we're going to import

99
00:03:29,790 --> 00:03:33,450
something from Lodash,
let's just come in here,

100
00:03:33,450 --> 00:03:36,510
we'll import the times function.

101
00:03:36,510 --> 00:03:38,100
And this is just a function
where it essentially

102
00:03:38,100 --> 00:03:39,780
does a loop a certain number of times

103
00:03:39,780 --> 00:03:41,100
and gives you a new array for that.

104
00:03:41,100 --> 00:03:43,320
So, we can say like
times, then we can call it

105
00:03:43,320 --> 00:03:44,310
and pass in some information,

106
00:03:44,310 --> 00:03:45,990
but you'll notice we're
not getting any type safety

107
00:03:45,990 --> 00:03:47,850
for any of this and we're
actually even getting an error.

108
00:03:47,850 --> 00:03:49,890
And it's just saying, hey,
it can't find any types

109
00:03:49,890 --> 00:03:51,630
for this Lodash library.

110
00:03:51,630 --> 00:03:53,520
And it's saying, hey, you
might want to try running

111
00:03:53,520 --> 00:03:57,060
NPMI save dev at types/Lodash to see

112
00:03:57,060 --> 00:03:58,650
if some types already exist.

113
00:03:58,650 --> 00:04:00,780
So, if a library such
as Lodash was written

114
00:04:00,780 --> 00:04:02,130
without using TypeScript,

115
00:04:02,130 --> 00:04:03,691
so it was just written
in normal JavaScript,

116
00:04:03,691 --> 00:04:05,700
what people have done is they've created

117
00:04:05,700 --> 00:04:07,770
their own types for that library

118
00:04:07,770 --> 00:04:10,650
and they've uploaded them
separately from Lodash.

119
00:04:10,650 --> 00:04:12,499
And for every single
library out there that has

120
00:04:12,499 --> 00:04:15,270
their own separate types,
they're gonna be found

121
00:04:15,270 --> 00:04:18,960
at the at types slash
whatever the library name is.

122
00:04:18,960 --> 00:04:21,900
So, we're gonna try to
install this dependency here.

123
00:04:21,900 --> 00:04:24,600
We're gonna come in here,
NPMI dash dash save dev

124
00:04:24,600 --> 00:04:26,460
because we don't need
these types in production,

125
00:04:26,460 --> 00:04:29,460
at types slash whatever
your library name is.

126
00:04:29,460 --> 00:04:31,740
And this will either
succeed or it'll fail.

127
00:04:31,740 --> 00:04:32,970
In our case, it will succeed

128
00:04:32,970 --> 00:04:34,290
because there are types out there

129
00:04:34,290 --> 00:04:36,480
by other people for
Lodash, but if it fails,

130
00:04:36,480 --> 00:04:38,520
that means nobody has ever written types

131
00:04:38,520 --> 00:04:40,590
for that library and
published them to NPM.

132
00:04:40,590 --> 00:04:42,450
So, you're gonna have
to do that on your own,

133
00:04:42,450 --> 00:04:44,250
which I'll talk a little
bit about in the next video,

134
00:04:44,250 --> 00:04:46,050
but for the most part it's a quite tricky

135
00:04:46,050 --> 00:04:48,510
and fairly advanced TypeScript topic.

136
00:04:48,510 --> 00:04:50,160
Now, you can see we have auto complete.

137
00:04:50,160 --> 00:04:51,540
You can see I got this times function.

138
00:04:51,540 --> 00:04:52,830
You can see here it's giving me errors

139
00:04:52,830 --> 00:04:54,330
because I'm not passing
in the stuff I need.

140
00:04:54,330 --> 00:04:56,370
For example, I need to pass it in a number

141
00:04:56,370 --> 00:04:57,750
and then I need to pass it in a function

142
00:04:57,750 --> 00:04:59,250
that does stuff with that information.

143
00:04:59,250 --> 00:05:00,450
And now, everything's working

144
00:05:00,450 --> 00:05:02,040
and I have really great auto complete.

145
00:05:02,040 --> 00:05:04,020
I can see all of the different
things that I can import here

146
00:05:04,020 --> 00:05:06,210
from Lodash and everything is working fine

147
00:05:06,210 --> 00:05:08,520
because I installed the
types for that library.

148
00:05:08,520 --> 00:05:10,110
So, when you're installing a new library,

149
00:05:10,110 --> 00:05:11,700
step one, install the library.

150
00:05:11,700 --> 00:05:13,140
If everything works, you're great.

151
00:05:13,140 --> 00:05:15,060
That means the library was
written with TypeScript.

152
00:05:15,060 --> 00:05:16,680
If for some reason it gives you an error,

153
00:05:16,680 --> 00:05:17,700
or things aren't working,

154
00:05:17,700 --> 00:05:19,770
you don't get any types stuff going on,

155
00:05:19,770 --> 00:05:21,300
then it means you need
to install those types

156
00:05:21,300 --> 00:05:23,310
and just install them from at types slash

157
00:05:23,310 --> 00:05:25,200
whatever your library name is,

158
00:05:25,200 --> 00:05:26,190
and hopefully, they'll be there,

159
00:05:26,190 --> 00:05:28,821
and for pretty much any major
library, even smaller ones,

160
00:05:28,821 --> 00:05:30,270
those types are going to be there

161
00:05:30,270 --> 00:05:31,980
because of how prevalent TypeScript is

162
00:05:31,980 --> 00:05:34,203
across the entire development ecosystem.