- In this video, we're gonna be talking all about
how you can import and export types in TypeScript,
as well as how to deal with libraries with types as well.
So, to get started, I have actually two files this time.
The first one contains a user type,
and then it contains a user object,
which we are exporting from this file,
just normal JavaScript stuff, minus this type obviously.
And then, in this other file here,
we are importing this me object,
and we're calling printUser passing it that me object.
And this printUser function takes a user,
and it just prints out their name.
Now, the problem in this code, TypeScript related wise,
is that I don't have a type for this user here,
and I wanna type it as this user object
that's coming from this main.ts file,
but this is only in this main.ts file.
I don't have access to it in this file.
What I need to do is export that type,
and luckily TypeScript allows you to import
and export types just like normal JavaScript.
So, I can just come in here and I can say
that I want to export this type user.
Now, I can come into here and I can import that user type,
and as you can see, everything is working just fine.
So, it's very easy to import and export types
because it works just like normal JavaScript.
There's only one minor difference
and it's not even something you need to do,
it's just an alternative way to import types.
Let's say for example here that I'm not actually
using this me variable anywhere in my code.
So, for example, I'm not importing it here
and the only thing I'm importing is my user type
to be able to type this function.
Well, depending on if you have code splitting
set up in your code and if you're using
a particular bundler that can take advantage of this,
you may want to import this specifically as a type.
If you're importing only types from a file,
you can say import type and then list out
all the different types you want to import.
And what that'll do is if you're using specific bundlers
that support it and you are doing some type
of code splitting, most likely what it'll do is make sure
that it doesn't include this main.ts file at all.
Now, generally, most bundlers are gonna be smart enough
that it doesn't matter if you import normally
or you import type, it's gonna make sure not
to include this file because this only has development code
in it that you're not actually using,
but if you're using maybe an older bundler
or a bundler that doesn't quite know how
to do that code splitting in that,
you know, removal of code that you're not using,
having this import type in there may help out
your bundler to know that you don't actually need
this code in production, but again, it's entirely optional
and for the most part I just do normal imports
and everything works fine because the bundler
is smart enough to know which code's actually
for production and which isn't.
So, that's pretty easy to import and export types.
What happens if we want to use types
inside of another library?
Well, let's go ahead and we're going to use a library.
We'll just import it into our project.
We'll say NPMI and we're gonna do date FNS.
So, I'm just gonna to install this date FNS library.
Doesn't matter what it is, it's just a library
for handling dates is what it's going to be.
Now, that's done, we can come up here
and we can do some imports from date FNS.
And this has a bunch of different things.
We'll do like an add days property or something like that.
So, this is just a function that we can call
that takes in some dates.
So, we can say add days and we're going to say
that we want to pass it in a new date
and we're going to pass it in three.
So, it's gonna add three days to the current date.
As you can see, we get type safety for all this stuff
and that's because this date FNS library
is written in TypeScript.
If we go to the definition for this function,
you can see that everything inside of here is typed
and everything is written in TypeScript.
Now, not all libraries are written in TypeScript, though.
If you have a library that's written in TypeScript,
you don't have to do anything.
It'll just pull in all the types for you automatically,
which is great.
What happens when we're using a library like Lodash?
So, we're gonna import Lodash and Lodash doesn't,
it was not written in TypeScript,
so it doesn't have any types by default.
So, if we come in here we're going to import
something from Lodash, let's just come in here,
we'll import the times function.
And this is just a function where it essentially
does a loop a certain number of times
and gives you a new array for that.
So, we can say like times, then we can call it
and pass in some information,
but you'll notice we're not getting any type safety
for any of this and we're actually even getting an error.
And it's just saying, hey, it can't find any types
for this Lodash library.
And it's saying, hey, you might want to try running
NPMI save dev at types/Lodash to see
if some types already exist.
So, if a library such as Lodash was written
without using TypeScript,
so it was just written in normal JavaScript,
what people have done is they've created
their own types for that library
and they've uploaded them separately from Lodash.
And for every single library out there that has
their own separate types, they're gonna be found
at the at types slash whatever the library name is.
So, we're gonna try to install this dependency here.
We're gonna come in here, NPMI dash dash save dev
because we don't need these types in production,
at types slash whatever your library name is.
And this will either succeed or it'll fail.
In our case, it will succeed
because there are types out there
by other people for Lodash, but if it fails,
that means nobody has ever written types
for that library and published them to NPM.
So, you're gonna have to do that on your own,
which I'll talk a little bit about in the next video,
but for the most part it's a quite tricky
and fairly advanced TypeScript topic.
Now, you can see we have auto complete.
You can see I got this times function.
You can see here it's giving me errors
because I'm not passing in the stuff I need.
For example, I need to pass it in a number
and then I need to pass it in a function
that does stuff with that information.
And now, everything's working
and I have really great auto complete.
I can see all of the different things that I can import here
from Lodash and everything is working fine
because I installed the types for that library.
So, when you're installing a new library,
step one, install the library.
If everything works, you're great.
That means the library was written with TypeScript.
If for some reason it gives you an error,
or things aren't working,
you don't get any types stuff going on,
then it means you need to install those types
and just install them from at types slash
whatever your library name is,
and hopefully, they'll be there,
and for pretty much any major library, even smaller ones,
those types are going to be there
because of how prevalent TypeScript is
across the entire development ecosystem.