Interfaces are a way to describe the
shape of an object in TypeScript, providing you as a developer with a
way to ensure that all objects follow a specific structure. This
helps to reduce the amount of errors that you see in
your code and it makes it easier to debug it in the long run. By
the end of this video you'll understand and interfaces, how they
work and how to use them in your next TypeScript project. So
here we have an empty TypeScript file and let's create an interface. So
we're going to call this interface. So to use an interface you need to use
the keyword interface. Once you have that you need to give it
a name just like when you do const and then a
variable name interface also needs some sort of name that you can then reference.
So I'm going to call this I with a capital I and then user and
then create an object. So now you get to set all
of the property names and the type that they're
expecting. And you can also do things like void for a function and you can also denote just variables in
general. So I expect there's going to be a name
here. So we'll expect that to be string. We'll give this user an age and that
will be a number and we'll say is active and that could be a boolean credit card with a string. And then finally we'll
do hello. This will be a function so we're going
to expect a string and then that will return void. So now we have an interface, how do we
use this interface? So if we were going to
just create a user, let's say user, we can use the colon
and then reference our I user in the interface. We can say I
user. Now we have all of this thank you
TypeScript and it tells us exactly what we expect. So
we can put an agent here and as you saw there, it tells you what it
should be number. So we can just do 52, we can say name and we'll set that to Steve and then we can have a credit card number
which should be a string. Then we'll set that to 424242, shout
out to stripe. We'll set is active to
false and then we can do hello which is
void. So what's expecting here is some sort of function that
doesn't return anything. So it would be like console dot lock. So
we're going to pass in the string. So that would be text, for example, string void and then we can just open
parentheses and type whatever we want in here. So
we'll just do console log text and hit save. So now we're using everything in here. We've got no
issues, we go to command jail, there's no problems. Let's
delete out credit card for example. So if we delete this out, hit
save. You can now see we have a red squiggly line
under the user. And if we look at what it says in here, it says
property credit card is missing in type and then it tells us what we're using.
This is what everything is here and it is a required type. So how
do we denote something is not required?
Maybe it's optional. So you can do that by adding a question mark to the
beginning section here of the declaration. This question
mark means in cases where it is not included that is fine
but in some cases it will be there and it should be a
string. So now if we hit save this user is fine. Everything's great
about this user. So that's one example of using interface. But you
can also use interfaces to denote what should go into a
function. Sorry to interrupt the video but if you are enjoying it,
make sure to hit that like button. And if you're new here subscribe and
you'll get more content around the jamstack and we can do a little bit better
here. So under here let's do another interface. Going to call this I userprops. Now this will all make
sense in a minute. So when we're doing something like
const, let's say user function equals and you do this takes no arguments right now and
that's it, right? And in some cases you need to
know what you're passing in to this
property. Let's say we have a name age city like this. Then we could do a return here
and say return and we'll just do a string here and say
name is age and lives in city. So if I just go ahead and
comment all this out up here, we create a user. So we say const
user, user function, this function that we're using and
then we pass in everything that we need. So
we need an age here. So let's say it's a 42. We need a name, call
myself Steve again and then we need to see
and we'll just say Raleigh. So we got this function
now we can do console log function and if I do this and go to our terminal,
if I run node index TS you'll see Steve's fortune
and lives in Raleigh which is all fine.
That's probably what we expect this to be like. But right now all of these
are set to any and this could be a JavaScript function
that you've used in the past and those numbers just come from somewhere in
your application. So why not I changed this to true. Now it says Steve is true and lives in
Raleigh which is definitely not what we want. So we
want to make sure that the properties that come into our function should are
the right ones. So we can do that by
closing this out. And we'll go ahead and uncomment this interface
down here, the one that we were using. And then we can make
this function take in our interface here
our props. First we'll do our name and just like
before will be a string, age will be a number and city will also be a string. So now
we've got those. We can add this to our function after
the deconstruction here. So after these
curly James you can add that our user props and now
you automatically get the same kind of idea here. This age got
red squiggly line. If we hit command J we look it says
type boolean it's not as signable to type number. So we can
set this to 52 and everything is happy. We can
also do other things. So let's say we have
membership and we know our membership is only going to be two
properties. It's either going to be basic or super. So we can actually
denote that the membership is going to either
be basic and then using a pipe we can say basic or
super. Those are the only two options. Now if
we add this to our user props here in our user function and we
see membership and then we open the string you'll see
that the only values that are available are the ones that we want. So let's make
it super and then obviously we can add it here, say
membership and then that would be available in
here and membership is membership. And this also works if we expect
something to either be a type or null. So for example if we use
credit card again maybe we expect that to either be
string or null so it still has to be included, we
have to include it in our properties but it could be one or the
other. So we could say credit card no and this person doesn't
have a credit card but we could create a user
to here everything is the same but he does have a credit card. Both of those are valid still
one of those could work. So hopefully you enjoyed this basic
introduction to interfaces. If you did enjoy this video make sure
to click the subscribe button on screen and I've left a playlist on the right
of some NextJS content.
