00:00:00
hey guys how's it going I'm back here
00:00:01
with another video and in today's video
00:00:03
I'm going to be bringing a recently much
00:00:06
requested tutorial where I'm going to be
00:00:08
going from zero to explaining everything
00:00:11
I believe you should learn in order to
00:00:13
say that you understand and know how to
00:00:15
use typescript for those who don't know
00:00:17
typescript is an open-source programming
00:00:19
language developed and maintained by
00:00:21
Microsoft it is basically a super set of
00:00:24
JavaScript which means that any valid
00:00:26
JavaScript code is also valid typescript
00:00:29
code typescript is a better version
00:00:31
technically of JavaScript because it
00:00:33
adds things that JavaScript can't have
00:00:35
like static type definitions allowing us
00:00:39
developers to be able to Define each
00:00:41
variable with their specific type and
00:00:44
when you actually compile your
00:00:46
typescript code um everything will
00:00:48
become JavaScript but the the point of
00:00:51
using typescript is not for the end user
00:00:53
it is for us developers to prevent
00:00:55
ourselves from making mistakes that
00:00:57
would then cause issues to the client
00:01:00
and the users who are using our website
00:01:02
therefore typescript makes one of my
00:01:04
favorite programming languages which is
00:01:06
Javascript be even better so if before
00:01:09
this video you had any ounce of Doubt of
00:01:12
whether you needed to learn typescript
00:01:14
I'm assuring you that you do need it and
00:01:15
if you want to become a web developer in
00:01:17
today's day and age especially with how
00:01:19
competitive the market is there you need
00:01:21
to be up to date with the most reliable
00:01:23
and used Technologies and typescript is
00:01:26
on the top of the list so because I know
00:01:28
it's annoying to learn new technologies
00:01:31
especially in the beginning um I
00:01:33
compiled this video which um I'll
00:01:36
structure it in a way such that if I was
00:01:38
the one learning typescript again from
00:01:40
the beginning how would I approach this
00:01:43
now do you need to know JavaScript for
00:01:44
this course well I will assume you know
00:01:47
the basics because I do think JavaScript
00:01:49
is important to learn in its core uh
00:01:51
before learning typescript because at
00:01:54
the end of the day typescript isn't a
00:01:56
replace like it isn't some any different
00:01:59
from JavaScript in the sense that the
00:02:01
syntax is the same the only difference
00:02:02
is the extensions that you apply so the
00:02:05
things you add not actually the things
00:02:07
you already did in JavaScript and you'll
00:02:09
understand as we go on through the video
00:02:11
and before we get into this video if you
00:02:13
could leave a like And subscribe I would
00:02:14
massively appreciate it this video is
00:02:16
not sponsored but if you want to help
00:02:18
the channel uh you could support the
00:02:19
channel by checking out one of our
00:02:21
partners uh which is hostinger uh talked
00:02:24
about them a bunch of times in my
00:02:25
channel already you can check out my
00:02:26
link in the description if you're
00:02:27
looking to host your website in any
00:02:29
place place they have a really good
00:02:30
service and I would appreciate if you
00:02:32
could check them out uh but yeah that's
00:02:34
basically it let's get into the
00:02:38
[Music]
00:02:46
tutorial okay everyone so right off the
00:02:48
bat I explained to you guys uh what
00:02:51
typescript is and uh why I think you
00:02:54
should use it so now uh let's get into
00:02:57
the Practical stuff so first off we need
00:02:59
need to install typescript I opened up
00:03:01
here vs code and this is where we're
00:03:03
going to be running our application um
00:03:05
if you know how to run JavaScript
00:03:07
applications you might know that there's
00:03:08
two ways to do it you can either run it
00:03:10
in a browser by just using normal
00:03:12
JavaScript and having an HTML page
00:03:14
however for athetic purposes and for
00:03:17
Simplicity reasons I actually want to
00:03:19
run my typescript and my JavaScript all
00:03:21
inside of my terminal and we do this by
00:03:23
utilizing nodejs so I will create um a
00:03:27
file over here called
00:03:31
tutorial. TS now this will be the file
00:03:34
where all of our code is going to be
00:03:35
written um if you notice immediately we
00:03:38
use a TS extension instead of a
00:03:40
JavaScript a GS extension because uh
00:03:43
this will help us distinguish this from
00:03:45
a Javascript file and here is the file
00:03:50
now we need to actually install
00:03:51
typescript inside of our computer all
00:03:54
computers I Believe come with JavaScript
00:03:56
but typescript uh definitely needs to be
00:03:58
installed now in order to install it you
00:04:00
have to use a package manager um let's
00:04:03
assume you're using npm and run npm
00:04:06
install dasg to install this package
00:04:09
globally and then
00:04:12
typescript now I've obviously already
00:04:14
installed this so I'm not going to run
00:04:16
that however after you do you did that
00:04:18
you should run the command TSC then D-
00:04:22
init what this is going to do is it will
00:04:24
help us generate our TS config file
00:04:27
which is a Json file um which which
00:04:29
includes a bunch of configuration stuff
00:04:31
related to how we want to manage our
00:04:33
typescript code the file includes
00:04:36
settings for various compiler options
00:04:38
such as which files to include or
00:04:40
exclude the target JavaScript version
00:04:43
that you want your typescript code to
00:04:45
run with and additional checks like if
00:04:48
you want your typescript uh application
00:04:50
to actually be very strict with the
00:04:51
typing rules or uh maybe not so strict
00:04:55
um essentially it's kind of like a road
00:04:57
map for the compiler detailing all the
00:04:59
rules that you want your typescript code
00:05:01
to follow Now by default you see there's
00:05:04
a bunch of configurations already set up
00:05:06
for us um thing is I actually want to
00:05:09
check and you can see this uh strict
00:05:12
true over here uh should be set to true
00:05:14
for this tutorial because you actually
00:05:16
want to enable all checks for typescript
00:05:20
so if you put this to false it will
00:05:23
basically uh allow you to write your
00:05:26
code in typescript but it will also
00:05:27
allow you to not add type definitions to
00:05:31
every single variable you create or
00:05:33
every single function you create which
00:05:35
kind of goes a bit against of why you're
00:05:37
using typescript sometimes I use this
00:05:39
just when I'm annoyed and I'm just
00:05:41
trying to build a quick project however
00:05:43
um I definitely recommend setting this
00:05:44
to true so I'm going to keep this as it
00:05:47
was I'm going to save this and let's
00:05:49
start working on the code right off the
00:05:51
bat I want to introduce you guys to um
00:05:53
the different type annotations that come
00:05:56
with typescript so we all know how to
00:05:58
define a variable right I want to to
00:05:59
Define a variable called age or ID I
00:06:03
could come over here and say ID is equal
00:06:06
to 5 right however in typescript this
00:06:10
isn't how it works because although uh
00:06:12
JavaScript would assume that this is a
00:06:14
number we have to make sure to let our
00:06:17
code know that this is a number so in
00:06:20
order to let typescript know that this
00:06:22
variable should be considered a number
00:06:25
we would have to come over here and
00:06:26
Define this variable as an actual number
00:06:29
so as you can see in typescript we add
00:06:31
the types for each variable just like
00:06:34
this and you actually see this whenever
00:06:36
you're just writing normal JavaScript if
00:06:38
you hover over a variable you can see it
00:06:40
assumes that the variable is equal to
00:06:43
this however us defining it instead of
00:06:46
letting JavaScript assume will help us
00:06:48
prevent future bugs that we might not
00:06:51
even be thinking of so we definitely
00:06:53
want to keep this as a number now what
00:06:55
other variables we could Define well we
00:06:58
could Define a string for example we
00:07:00
could Define a variable called company
00:07:02
and set it equal to um I don't know Acme
00:07:06
Corporation right now how would we
00:07:09
Define this type as string well we just
00:07:11
come over here and Define it as a string
00:07:15
same goes with a buleon um let's create
00:07:18
a Buon called is published or something
00:07:20
like that and we would Define it to be a
00:07:23
bullan by just setting the Boolean type
00:07:26
now I'll continue on with a couple other
00:07:29
types and just go over what each of them
00:07:32
do okay so I added three more types over
00:07:35
here and I'll go over what each of them
00:07:37
mean so right off the bat if you want to
00:07:40
Define an array of a specific type the
00:07:43
way you do it is by writing the type
00:07:45
first and then putting open and square
00:07:47
and closing square brackets just like
00:07:49
this so this would be to Define an array
00:07:53
of numbers just as we do over here if I
00:07:55
wanted to make this into an area of
00:07:56
strings I would do this now immediately
00:07:59
you notice that when I try to change the
00:08:00
type definition starts giving us some
00:08:02
squiggly lines over here which says that
00:08:05
the type number is not assignable to the
00:08:06
type string so you can see the power of
00:08:09
typescript because anytime you
00:08:11
mistakenly uh Define variables with um
00:08:15
the wrong type it will actually let you
00:08:17
know if this was JavaScript this would
00:08:19
allow us to do it no matter what right I
00:08:22
mean JavaScript even allows you to do
00:08:24
something like this over here which is
00:08:27
um having an array with different types
00:08:31
inside of it now necessarily here it
00:08:34
doesn't give you a red Squigly light
00:08:36
because there's a specific type in
00:08:38
typescript called the any type which as
00:08:41
you might know it just defines a
00:08:44
variable as any of the types so this
00:08:47
variable X over here because I set it to
00:08:49
any could actually be a number it could
00:08:51
be a bullan it could be um I don't know
00:08:55
an array if I wanted to um and it kind
00:08:58
of defies a bit the point of typescript
00:09:00
so you might see some n's in some
00:09:02
projects however usually people use any
00:09:05
whenever they are just they they they
00:09:07
don't want to actually Define the real
00:09:09
type or they're confused with the real
00:09:11
type or they just are annoyed with
00:09:13
typescript and don't actually want to uh
00:09:15
learn what the actual type is so this
00:09:18
over here should only be used the any
00:09:20
type should only be used in extreme
00:09:22
scenarios um and obviously there's other
00:09:24
specific scenarios where you definitely
00:09:26
want to use it but I'm just saying in
00:09:27
general I would only keep that for
00:09:29
extreme scenarios where you actually
00:09:31
don't know the type now this is cool
00:09:33
however how would this work with some
00:09:35
actual functionality well if I were to
00:09:37
create a function right let's create
00:09:39
over here a function and let's call it
00:09:44
concatenate strings or actually let's
00:09:46
call it concatenate values that would be
00:09:49
better and let's make it such that this
00:09:52
function takes in two variables A and B
00:09:58
and it returns
00:10:00
the two values um concatenated so for
00:10:04
those who don't know the word
00:10:06
concatenate basically is usually used
00:10:08
for Strings so if I if a over here was
00:10:12
the word hello and B was the word world
00:10:18
the result of this function should be
00:10:21
hello world right so you can see there
00:10:25
is a red squiggly line here because it
00:10:27
is immediately telling us that we
00:10:28
actually didn't didn't Define any type
00:10:30
for it and it is actually in assuming
00:10:32
that it has an any type which isn't
00:10:34
allowed in strict mode so we would have
00:10:37
to define a type but before we actually
00:10:39
do that let's see what would happen in
00:10:41
two scenarios that I think will'll
00:10:43
exemplify to you guys uh situations in
00:10:46
which JavaScript could cause some issues
00:10:48
so let's actually console uh log over
00:10:51
here um the result of this function and
00:10:54
first let's call it using hello and then
00:10:59
world just like we said before and then
00:11:02
let's actually try to put a number here
00:11:04
instead of a string let's put five and
00:11:06
10 right so thing is five and 10 are
00:11:12
numbers not strings so if we're taking
00:11:15
the function by what it actually is
00:11:18
saying that it's doing which is just
00:11:20
getting two strings and adding them
00:11:21
together technically this over here
00:11:24
should return
00:11:26
510 right however since these are
00:11:28
numbers
00:11:29
um and we haven't defined a specific
00:11:31
type here this will actually return 5 +
00:11:34
10 which is not 510 it is 15 so you see
00:11:37
that if I run this file and for those
00:11:40
who don't know if you're trying to run a
00:11:42
nodejs file locally you just run node
00:11:45
and then you run the uh
00:11:50
tutorial uh you run the the file like
00:11:52
this um you can see that yeah we got
00:11:54
hello world and 15 not 510 so we
00:11:58
definitely want to Define find a type
00:11:59
for this function and the way we Define
00:12:02
types for arguments of functions is just
00:12:04
like how we defined for the variables
00:12:05
over there we just put over here the the
00:12:08
values so I'll say string and I'll say
00:12:12
string perfect and now you should see
00:12:15
that we it gives us a an error over here
00:12:18
because we're actually putting five and
00:12:20
10 as numbers so we know that if we want
00:12:22
to get the result that we wanted we had
00:12:24
to do something like this and now if we
00:12:26
were to come over here and run node
00:12:28
index
00:12:30
.ts or tutorial. TS
00:12:33
actually you should actually see an
00:12:35
error and the error is pointing to the
00:12:37
fact that uh we're putting typescript in
00:12:40
a file that node.js doesn't know how to
00:12:42
read because node.js like I said isn't
00:12:45
going to compile or isn't going to read
00:12:48
and run the typescript code in itself it
00:12:51
actually runs JavaScript so we actually
00:12:54
have to compile this into a Javascript
00:12:56
file to be able to run with the J with
00:12:58
the typ script notation so in order to
00:13:01
compile this tutorial. TS file into a
00:13:04
JavaScript one we can run um TSC and
00:13:08
you'll see that it automatically
00:13:10
generates this file as a Javascript file
00:13:13
so it's basically the same thing as
00:13:14
before but without the type annotations
00:13:17
which means that um this is what is
00:13:19
going to be read by the browser this is
00:13:21
what is going to be read by the server
00:13:22
if we're we're deploying this to a
00:13:23
server so the benefit of typescript goes
00:13:26
in this file and if you want to run our
00:13:29
result we actually need to run the
00:13:31
JavaScript one so I'll say node index.js
00:13:34
and um what happened um module not found
00:13:39
oh I keep putting uh index.js let's do
00:13:42
tutorial. JS uh and yeah you can see it
00:13:46
correctly said 510 which is perfect now
00:13:49
one thing I want to point out to you
00:13:51
guys is um what I what if I actually
00:13:55
return something else what if I return
00:13:56
the the the number three this obviously
00:13:59
is wrong right because how can this
00:14:03
we're expecting a string not a number so
00:14:06
there is a way for you to Define um the
00:14:09
return type of a function and the way
00:14:10
you do that is by adding the return type
00:14:13
over here so we'll say that the return
00:14:16
type for this function is a string so
00:14:18
that um our code knows that this is what
00:14:21
it's supposed to return now if I were to
00:14:23
put three or four over here it would
00:14:24
give us an error on the return statement
00:14:27
um telling us that we can't actually
00:14:29
return a number perfect now that we've
00:14:30
learned the basics of the basics let's
00:14:32
start getting where a typescript gets
00:14:34
really interesting which is when we
00:14:36
actually start defining objects and
00:14:38
types ourself so whenever we have an
00:14:42
object in JavaScript right so if I were
00:14:44
to define the object
00:14:46
user we could put various different
00:14:49
fields inside of here we could put an ID
00:14:52
right which would be um a number we
00:14:56
could put a name which would be a string
00:15:00
and we can also put for example an AG
00:15:02
right which would be um a number so this
00:15:06
object over here could be defined in a
00:15:11
certain way but then you could right
00:15:13
after this come here and change one of
00:15:15
the values to something that doesn't
00:15:17
make sense right now it says over here
00:15:20
that you can't do that because the
00:15:22
string is not assignable to a number it
00:15:24
is assuming that our user object is
00:15:26
defined this way and it's is actually
00:15:29
helping us by a by giving us a red
00:15:31
squiggler line telling us that this
00:15:33
shouldn't happen however we shouldn't
00:15:36
let JavaScript assume anything we should
00:15:39
Define the type for this object
00:15:41
ourselves and the way I would Define a
00:15:43
type for an object is by using an
00:15:45
interface so an interface is basically
00:15:49
um a road map a blueprint for how our
00:15:53
object should look like so I'll call
00:15:55
this interface the user
00:15:57
interface and inside of here we should
00:16:00
Define all of the fields that our user
00:16:03
has but instead of putting the values
00:16:04
for each of the field we should put the
00:16:07
types so for ID it will be number for
00:16:10
age for name it will be string and for
00:16:14
age it will be number as well now you
00:16:17
can see that um if I were to put this it
00:16:20
will still say you can't um but we
00:16:23
actually haven't assigned this object to
00:16:25
this interface that's why if I were to
00:16:27
actually make this into a string this
00:16:30
would work however we don't want to
00:16:32
allow a user to be defined with an age
00:16:35
which is a string so we say that this
00:16:38
user has Type user interface so now it
00:16:42
gives us the error which means that just
00:16:44
like how we were defining variables
00:16:46
before um by giving the string type we
00:16:49
can now use uh a personalized type that
00:16:52
we create to enforce type definitions
00:16:56
now let's fix this by just removing this
00:16:59
uh by making this into a number and I
00:17:01
want to actually point a question for
00:17:03
you guys what if there's a user I
00:17:06
imagine we're in real life and there's a
00:17:08
user who we don't know the age and the
00:17:10
age actually doesn't matter that much
00:17:12
but it's an additional thing that we
00:17:14
might want to have some times right so
00:17:16
what if I don't want to pass an age well
00:17:19
there's clearly an issue right it says
00:17:21
property age is missing on this type and
00:17:23
it's required in the user interface now
00:17:26
what does it mean to be required it
00:17:27
means that some fields or all the fields
00:17:30
you define in your interface they can
00:17:33
either be required or not they can
00:17:35
either be required or optional so it
00:17:37
assumes it's required because that's how
00:17:39
we actually defined it in order to make
00:17:42
it optional we had to put a question
00:17:44
mark right after the name of the field
00:17:47
and now you see it doesn't give us an
00:17:49
error anymore now what happens if I
00:17:52
print or a console log sorry console log
00:17:55
the
00:17:56
user. AG well let's check this
00:18:00
out let's open this again and like you
00:18:04
like I told you guys we have to first
00:18:05
build this um it just built and then we
00:18:09
have to run the tutorial. JS you see it
00:18:13
gives us as undefined because the
00:18:16
optional type is either
00:18:18
undefined or a number so you see this is
00:18:22
how the age field in the user interface
00:18:25
is defined either a number or undefined
00:18:28
you might expect it to be null but
00:18:30
technically not because undefined as a
00:18:32
JavaScript type and it's used uh in
00:18:34
typescript for whenever we don't we
00:18:37
didn't actually Define a value for some
00:18:39
sort of field or variable so we could
00:18:41
actually um play around with this we can
00:18:43
say okay if uh let's console log this if
00:18:48
uh there's no user. AG so if user. AG is
00:18:53
undefined then we actually want to
00:18:55
console log a message saying no no age
00:19:01
of the
00:19:02
user and if it isn't undefined then we
00:19:07
actually want to console log the AG
00:19:08
you'll see that after this if we built
00:19:12
it again and run the same thing we
00:19:15
should actually get a error message for
00:19:17
it which means that um actually having
00:19:19
type definitions in our code can lead to
00:19:22
many conditional statements that you
00:19:23
previously couldn't have in JavaScript
00:19:25
you have no idea how many times I have
00:19:27
statements like this where a piece of
00:19:29
data can actually be no and I'm
00:19:30
constantly checking to see if it is
00:19:32
because um projects revolve around that
00:19:35
whole concept now what else can you
00:19:37
actually put inside of an interface well
00:19:40
if you have any idea of what you can
00:19:41
actually put inside of an object then
00:19:42
you have your answer because objects can
00:19:45
be defined in the exact way in which
00:19:48
they um can be created so if I imagine
00:19:52
in this user interface over here I had a
00:19:55
function right imagine here actually in
00:19:57
the actual object I had aun function
00:19:59
called uh greet right it's a function
00:20:02
which um we can actually use to uh greet
00:20:08
someone right and it comes with a little
00:20:10
message over here uh and with it we can
00:20:14
actually just console log um the actual
00:20:19
message so I can say something like this
00:20:22
conso log message now why is it giving
00:20:25
us an error right why is it giving us an
00:20:27
error actually I should remove that uh
00:20:29
why is it giving us an error well
00:20:31
because we haven't defined any of the
00:20:32
types but if we didn't have typescript
00:20:35
we could easily set this up and then
00:20:39
over here we could call user.
00:20:43
greet and put something like hello over
00:20:47
here and whenever we called this uh this
00:20:49
grd function would run and it would
00:20:51
conso lck the message however it's given
00:20:53
us an error because we haven't defined
00:20:54
this specific function as a part of the
00:20:57
user interface so let's do that so to
00:21:00
Define functions it's a little bit weird
00:21:03
but at the same time um it's pretty uh
00:21:07
self-explanatory um we actually first
00:21:09
Define the name of the function and we
00:21:12
specified to typescript that this is a
00:21:13
function by right after the name we put
00:21:16
a a parenthesis right now whatever we
00:21:19
put here is what this function will
00:21:21
return so with this over here this is
00:21:24
actually just a console log so it's not
00:21:26
returning anything right so whenever
00:21:29
you're not returning something in a
00:21:30
function timecrimes
00:21:58
is the type definition over here there's
00:22:01
no problem but we could actually
00:22:02
redefine this if we wanted to we could
00:22:04
actually put void over here as well and
00:22:06
here put string as well if we put
00:22:08
something else if we put number then you
00:22:11
would see that this is a problem because
00:22:13
it's not the same functions right so
00:22:16
let's keep it how it was before and
00:22:18
let's save this let's run this and let's
00:22:20
see if the function is actually called
00:22:23
uh we have to build it and then run it
00:22:24
and you can see it is actually called
00:22:27
perfect okay so I think this is a
00:22:30
everything kind of uh important to know
00:22:32
with interfaces uh there's more
00:22:35
complexity that is added um with
00:22:38
whenever you work with multiple types
00:22:41
and that's what I want to explore right
00:22:43
now so let's comment all of this out and
00:22:46
actually probably delete this and I want
00:22:49
to present you guys uh the following
00:22:50
scenario imagine we have this function
00:22:53
called uh print ID right and it's
00:22:57
related to an user
00:22:59
uh I wanted to actually print the or
00:23:03
console log the ID of a specific user
00:23:07
and it takes in the actual ID of the
00:23:09
user now if you've ever worked with IDs
00:23:14
before you might know that IDs can vary
00:23:17
in definitions it can actually be a
00:23:19
number or it could be a string no matter
00:23:22
what uh I just want to console log it so
00:23:25
I'll say console log um the ID some
00:23:28
message saying ID is equal to the ID
00:23:33
perfect now it's asking us to define a
00:23:35
type and I can Define over here for
00:23:37
example a string right and I could call
00:23:41
this print ID function and put a string
00:23:44
over here like ID 1 2 3 however there
00:23:49
are scenarios in which you also need
00:23:52
this to be a number because maybe the ID
00:23:54
is not ID 1 23 it's a bunch of numbers
00:23:58
right and obviously you don't want to
00:23:59
keep it as a string you want to keep it
00:24:02
as a number because that might be the
00:24:03
way that the data is coming to you so
00:24:07
with typescript is important to
00:24:08
understand that sometimes especially
00:24:10
when you're dealing with a full stack
00:24:11
app um data might be coming from the
00:24:13
back end in ways that you might not
00:24:15
expect so you have to deal with that so
00:24:19
whenever you have a situation like this
00:24:20
where this field can be either a string
00:24:23
or a number um you can use what is known
00:24:26
as a union which is um you combine
00:24:30
multiple types and say that the
00:24:33
combination of them can be attributed to
00:24:35
this variable so I can say that this ID
00:24:38
field can be a string or a number and
00:24:42
now this doesn't give an error anymore
00:24:44
so this little thing over here kind of
00:24:46
allows us to uh maybe internally or in
00:24:49
line Define a new type which is a type
00:24:53
uh defined by the union of both a string
00:24:55
and a number now unions can be become
00:24:59
really complex and annoying for example
00:25:01
this could become I don't know it's a
00:25:03
Boolean it could become as well an array
00:25:06
of uh numbers I don't know obviously
00:25:10
it's hard to come up with an example
00:25:12
right now but there are situations in
00:25:14
which a variable can have a very complex
00:25:16
type which is a union of a bunch of
00:25:19
different types in that kind of
00:25:21
situation or if you actually just want
00:25:23
to keep it simple and not have this
00:25:24
Union over here in the argument of the
00:25:27
function you can actually Define a type
00:25:30
for yourself now we've kind of done that
00:25:34
with an interface right with an
00:25:36
interface we've said user and then
00:25:39
defined an object right however the
00:25:41
difference between what we're going to
00:25:43
do now is that an interface is mostly
00:25:45
done for objects and what we're doing
00:25:47
now is for single Fields so if I want to
00:25:49
Define this ID field to be a type that
00:25:52
isn't one of the Primitive types I can
00:25:54
for example use the type definition over
00:25:57
here which is also known as a type Alias
00:26:00
and just say that um this will have a
00:26:03
type of
00:26:04
ID field type and it will be a union of
00:26:11
a string and a number and then I can
00:26:14
pass this over here and reuse this maybe
00:26:17
uh anywhere inside of my application and
00:26:19
now it will always know that this can
00:26:21
either be a string or a number it
00:26:22
accepts both now since we've talked
00:26:25
about uh unions we probably should talk
00:26:27
about the opposite of Union right a
00:26:29
union basically gets two sets for those
00:26:32
who've done set theory or have learned
00:26:34
about Vin
00:26:35
diagrams uh a union has two different
00:26:38
sets of data right and it accepts both
00:26:41
of them which is in this case the string
00:26:43
and the number but what about the
00:26:47
situation where you want to intersect uh
00:26:50
two types right you want to intersect
00:26:52
those two sets so a situation like this
00:26:55
would be the following imagine we have
00:26:58
uh the two the following two interfaces
00:27:01
right we have an interface for now
00:27:02
imagine that we have an interface for uh
00:27:06
a business partner I don't know it's a
00:27:09
person a person that is your partner in
00:27:12
business um and let's keep it simple
00:27:15
let's actually just say that our
00:27:16
business partner has two fields in this
00:27:18
object one is their name and one is
00:27:22
their um credit score I don't know
00:27:24
credit score and that's a number now
00:27:29
there is another interface called uh
00:27:33
interface called um user identity right
00:27:38
and this is actually more General so
00:27:40
business partner will be used for
00:27:42
objects uh related to a specific type of
00:27:44
person in our website it would be a
00:27:46
specific type of business of employee so
00:27:49
it would be a business partner and user
00:27:50
identity would contain the ID of a user
00:27:54
and their email which is something that
00:27:56
everyone in the website should have
00:27:58
right so we have two different types and
00:28:03
um they have some intersection because a
00:28:06
business partner whenever they have a
00:28:08
user they they do have a user identity
00:28:10
right so if I want to Define this new
00:28:13
type right this new type which is a more
00:28:16
General uh representation of uh an
00:28:19
employee in a website right I can call
00:28:21
this
00:28:22
employee um it would be a combination of
00:28:26
the values in this object and the values
00:28:28
in this one to do that I could just use
00:28:31
the concept of intersection I can say
00:28:33
that the employee is a business partner
00:28:37
and it intersects with the user identity
00:28:40
object now if I were to create a
00:28:42
function over here and imagine you want
00:28:44
to sign a contract for this employee
00:28:47
right you want to sign their contract I
00:28:48
could come over here and say const uh
00:28:51
sign
00:28:53
contract and then uh Define that you
00:28:56
need to pass an employee over here here
00:28:59
so
00:29:00
employee and we'll just console log a
00:29:04
message saying uh
00:29:08
contract
00:29:10
signed by and then put uh the employ
00:29:14
name which as you can see just by the
00:29:17
autocomplete it includes the fields from
00:29:20
both uh interfaces not just one so we
00:29:22
can get the employee
00:29:24
name and we can say uh something like
00:29:28
like with credit
00:29:32
score equal to and then we add the
00:29:35
credit score as well
00:29:37
actually uh no name and credit score in
00:29:40
the same object so actually let's
00:29:41
instead of say with email CU they are in
00:29:44
different one so with email um equal to
00:29:49
employee email perfect and you can see
00:29:53
that if we were to call this so sign
00:29:55
contract and we were to pass this object
00:29:58
with the following Fields a name called
00:30:01
Pedro a credit score of 800 let's say
00:30:05
I'm I'm
00:30:06
amazing uh an ID of 23 or
00:30:10
34 uh and an email of Pedro
00:30:16
gmail.com now if we call this um let's
00:30:19
just build it and oh there's an error
00:30:21
okay I have to do this and also let's
00:30:24
define the type of this as void because
00:30:26
that's the return type uh if I were to
00:30:28
do this build it and then run it again
00:30:30
you should see that um it actually works
00:30:33
there's a mistake in the string but it
00:30:35
actually works so it actually
00:30:37
concatenated both types it intersected
00:30:39
both of them and created a new type
00:30:41
which is uh it's not the union of both
00:30:44
because that's the whole difference
00:30:45
between intersection and Union because
00:30:46
if I were to do this this would give us
00:30:49
an error because employee is not uh an
00:30:54
object with fields of both types it is
00:30:57
either one of the types so we can't have
00:31:00
one of each over here I could actually
00:31:02
change this to credit score and this
00:31:04
would make more sense with the unit type
00:31:06
because then it would like over here we
00:31:09
could pass either the business partner
00:31:11
object or the user identity but in this
00:31:14
case uh we want to have both fields of
00:31:17
both objects so we do keep it like this
00:31:20
with an intersection sign and you'll see
00:31:22
this being used um I I see unions being
00:31:25
used way more in projects but this is
00:31:27
also important important um and I think
00:31:29
it's definitely important for you to
00:31:30
understand but one thing that is super
00:31:32
important in typescript that we haven't
00:31:34
talked about yet and it's what we're
00:31:35
going to be talking about right now is
00:31:37
the idea of enums um which is one of my
00:31:41
favorite parts of of typescript in
00:31:43
general you can actually replicate this
00:31:44
in JavaScript as well if you if you ever
00:31:46
want to do that but enims is a very easy
00:31:49
and handy way for you to define a set of
00:31:52
named constants and it will actually
00:31:55
improve the read readability and
00:31:57
usability
00:31:58
of your code that uses those constants
00:32:01
so if you don't if you didn't get what I
00:32:02
meant by that uh let me explain imagine
00:32:05
that um you want to have a function over
00:32:08
here uh and call it
00:32:11
print error
00:32:13
message right and this is probably going
00:32:17
to be called whenever you have some
00:32:18
error scenario in your website like
00:32:20
whenever you click a button and you call
00:32:22
some data and it comes out wrong um and
00:32:25
it should take in an error and it should
00:32:28
print out a message based on that
00:32:32
right so let's say
00:32:34
error now um imagine that there might be
00:32:38
multiple types of Errors right the error
00:32:40
could be um for example an unauthorized
00:32:44
user error it can be an unauthenticated
00:32:47
user error it can be an error about the
00:32:49
user not existing right it can be
00:32:51
imagine that this is probably going to
00:32:52
be called whenever you're trying to sign
00:32:53
in into an account right that's an eror
00:32:56
so let's think about this like this
00:32:57
error over here can be multiple things
00:33:00
and let's note it down so you guys can
00:33:02
understand it um the error can be um an
00:33:07
unauthorized error so the user is not
00:33:09
authorized and um user doesn't
00:33:13
exist if the user is trying to sign in
00:33:16
probably there's an error for wrong
00:33:19
credentials and um yeah or probably like
00:33:23
an internal error something just
00:33:24
happened not none of the other ones
00:33:26
right so it can be either of this ones
00:33:28
and depending on which one it is we want
00:33:31
to conso log a different
00:33:32
message so we could obviously come over
00:33:35
here and whatever this is returned we
00:33:38
could uh do something related to that
00:33:41
but the thing is we want to define a
00:33:44
specific set of constants for this which
00:33:46
is going to Define all the different
00:33:48
types of errors that they can be so an
00:33:50
enum could be a great example of what
00:33:53
you can use to make this easier we can
00:33:56
say uh enum
00:33:58
uh login error and we can Define over
00:34:02
here different types of constants or of
00:34:06
errors that can exist so for example the
00:34:09
login error can be an
00:34:11
unauthorized error and we can define a
00:34:14
string that is going to match that so
00:34:16
I'm going to say unauthorized this over
00:34:17
here not
00:34:19
necessarily uh will be what's going to
00:34:21
be printed um you could print that but
00:34:24
it's not necessarily it's just a a value
00:34:27
for um your enm key so then uh let's
00:34:31
create one for user doesn't no actually
00:34:35
user don't no no User it's a better way
00:34:40
so user doesn't exist let's call it no
00:34:41
user and let's pass in over here uh user
00:34:47
doesn't
00:34:50
exist or actually this just pass in no
00:34:54
user uh and then wrong credentials we'll
00:34:56
say wrong CR
00:34:59
credentials and again wrong
00:35:03
credentials and finally Let's do an
00:35:05
internal error so
00:35:07
internal and internal perfect now we can
00:35:11
say that this error is uh of
00:35:14
type login error Ena which means that um
00:35:19
if we wanted to display a different
00:35:20
error message depending on what which
00:35:22
one of these types it is we could easily
00:35:25
just come over here and say um
00:35:29
if um
00:35:32
error is equal to login error do
00:35:38
unauthorized then we can just console
00:35:41
log uh a message saying user not
00:35:45
authorized so you see it's pretty easy
00:35:47
for you to match this with this you
00:35:49
define the type of error and you define
00:35:51
the condition that should happen when
00:35:53
that error happens now let's do it for
00:35:55
the other ones uh let's say if error is
00:35:58
equal to uh no user we'll
00:36:02
say console
00:36:04
lug uh no user was found with that
00:36:10
username something like that now I'll
00:36:12
fill up the other ones and I'll be back
00:36:14
in a second okay as you can see we can
00:36:16
check for all the different errors we
00:36:18
can even put an else for the internal
00:36:20
one or we can just default it to be
00:36:22
internal by also checking if it's
00:36:24
internal but um that's fine um we'll
00:36:28
just also console log actually we'll
00:36:30
remove this over here and now let's call
00:36:32
this function let's call Print er no
00:36:36
error message so how would we what would
00:36:38
it put over here well we can actually
00:36:40
just straight up use the enum so I can
00:36:42
print out a message for the uh wrong
00:36:45
credentials one right and I can save
00:36:47
this build it run it and you'll see that
00:36:51
it will say the correct combination um I
00:36:54
could change this to be uh the no user
00:36:57
one and you'll see that it will actually
00:37:00
change based on that as well so um this
00:37:04
is the basics of enms inms are great for
00:37:07
this kind of stuff it is great for
00:37:09
defining I don't know situations like
00:37:11
directions Different Strings that might
00:37:14
or like keys for specific uh parts of
00:37:17
your website stuff like that um it's
00:37:20
probably one of the most used things in
00:37:22
typescript that I use personally I love
00:37:24
them and I think they're extremely
00:37:26
useful now one of the last things I want
00:37:27
to talk about um in typescript is
00:37:30
probably one of the most complicated to
00:37:32
understand which is the concept of
00:37:34
generic types and that's probably
00:37:36
something that a lot of people just uh
00:37:38
Breeze over and don't actually learn but
00:37:40
they see it on our day-to-day um working
00:37:44
um hours um so I wanted to just explain
00:37:48
to you guys uh because generics are
00:37:50
actually a very powerful feature that
00:37:52
many programming languages including
00:37:54
typescript uh use because it allows you
00:37:56
to write flexible reusable functions and
00:37:59
classes that can be used uh with
00:38:01
different types they kind of help you
00:38:03
ensure type safety without losing the
00:38:05
flexibility of working with various
00:38:07
different data types um and I came up
00:38:09
with a pretty I I believe to be um
00:38:13
relatable and simple example that
00:38:15
demonstrates how to use generics in
00:38:16
typescript so we're going to be creating
00:38:19
a storage class a storage container
00:38:22
class which um will contain different uh
00:38:26
data types right and uh we can make
00:38:29
different versions of this class with
00:38:32
different types so we can make one with
00:38:34
the string type one with the um number
00:38:38
type you'll understand as we build it
00:38:41
but uh to start this off let's start off
00:38:43
by just creating a class and call it
00:38:47
storage
00:38:49
container now this class whenever we
00:38:52
Define a normal class that could be of a
00:38:54
type we could pass over here an
00:38:56
interface for example we could pass in a
00:38:58
user interface like the one we created
00:39:00
but like I said um this should actually
00:39:04
be um
00:39:07
accepting various different data types
00:39:10
so we're going to be using a generic and
00:39:12
to define a generic over here we pass in
00:39:15
a t as you can see this will stand for
00:39:19
uh it's kind of a placeholder for um the
00:39:22
different data types that can be used so
00:39:25
over here we'll create a variable called
00:39:29
contents and we'll Define it to be a
00:39:33
array of this t uh type now this is a
00:39:37
private function so I'll make this
00:39:38
private and contents will just be uh
00:39:42
whatever variable like whatever value
00:39:44
values we're holding inside of here
00:39:46
we're going to return this um in the end
00:39:48
this is going to be a very simple class
00:39:50
now for Constructor uh in this class
00:39:53
will'll just say this do contents is
00:39:56
equals to an empt array so we'll start
00:39:58
off with an empty array and as we use
00:40:00
this class we'll fill in this uh
00:40:03
contents array which is going to be the
00:40:05
actual storage system the storage uh
00:40:08
container now we're going to have two
00:40:10
functions inside of this we're going to
00:40:11
have an added item function which is
00:40:14
going to add something to this contents
00:40:16
array and there's going to be a get item
00:40:18
function which as you might know we we
00:40:21
get an
00:40:23
item now we're using this generic type
00:40:26
because we don't want want to make this
00:40:28
be just for Strings or for numbers so
00:40:31
over here inside of this we'll have an
00:40:34
item as an arguments so the item we
00:40:36
would add and instead of putting string
00:40:38
or number We'll add the T and like you
00:40:41
might expect this will return void
00:40:43
because the whole point of this function
00:40:44
is just to um push something to the end
00:40:47
of the contents
00:40:49
array right now this get item will have
00:40:54
an argument which is going to be the
00:40:55
index for uh which item in our storage
00:40:59
we want to get so it will be a number
00:41:01
and it needs to return back either the
00:41:04
item itself or nothing or undefined
00:41:08
because uh maybe it will actually not
00:41:11
find that item now instead of get item
00:41:14
let's just
00:41:16
return uh this do contents and then
00:41:19
return the item inside of the index
00:41:22
right so this is our very simple storage
00:41:25
container now this is where you guys
00:41:28
start understanding the power of
00:41:30
generics which is we can actually make
00:41:32
multiple different uh instances of this
00:41:35
class for example we can make one for uh
00:41:39
usern names
00:41:42
right and say new storage container now
00:41:47
usernames is a string right it's going
00:41:49
to be a string so we Define what type is
00:41:53
going to fill in for this T over here
00:41:55
this generic by passing it over here so
00:41:58
I'm going to say string and this would
00:42:01
generate a version of this an instance
00:42:03
of this class where we can uh add an
00:42:08
item like Pedro tag and then uh probably
00:42:13
add something else as well I'm going to
00:42:15
add one more uh P tag uh Echo BR um and
00:42:22
then I'm going to say usernames do get
00:42:25
item and you'll see that if I try to get
00:42:27
the first item this should
00:42:31
return the correct information uh it
00:42:35
doesn't oh we have to print this out
00:42:36
sorry about
00:42:38
that um
00:42:41
console.log and then print this
00:42:45
out perfect uh you see Pedro Tech so
00:42:48
that worked right now we can also make
00:42:52
uh another instance of this which isn't
00:42:55
with strings it's actually with numbers
00:42:58
so I can come over here and I can say
00:42:59
number and this is actually age of no
00:43:03
actually age is not a good example
00:43:05
maybe uh I don't know
00:43:08
friends count let's imagine that this
00:43:12
stores for each item the array it stores
00:43:14
the amount of friends a user might have
00:43:17
so instead of adding strings over here
00:43:19
we can add numbers we can add 23 we can
00:43:22
add 56 or 678 and obviously we have to
00:43:26
pass this in
00:43:27
and you'll see that the type definition
00:43:29
actually worked right um it doesn't it
00:43:32
didn't allow me when it was usernames
00:43:34
because username is a string storage
00:43:36
container but when I change it to the
00:43:38
number one it works and if I print out
00:43:41
both you'll see that both work uh sorry
00:43:46
did I
00:43:47
actually yeah I'm still returning
00:43:51
usernames um let's try again and yeah it
00:43:54
works so generics are meant for this are
00:43:57
meant for uh basically reusing some sort
00:44:01
of class or object um that can have
00:44:04
multiple different data types as
00:44:06
arguments to the data that is present in
00:44:08
that class and making different versions
00:44:11
of it you should see it in every single
00:44:13
library that you use if you use it in re
00:44:15
a react Library if you use a View
00:44:17
Library if you use a angular Library all
00:44:20
of them under the hood use stuff like
00:44:23
this now this is basically all of the
00:44:25
complicated topics the I left a like a
00:44:28
minor thing that you should see should
00:44:30
understand to the end uh but it's also
00:44:32
pretty easy to understand uh because you
00:44:35
you will see this when you're working
00:44:36
with typescript um however it's not that
00:44:40
important so I left it for L which is
00:44:42
the idea of uh readon variables so uh if
00:44:46
you were to create an interface for
00:44:48
example for an
00:44:49
employee um just like this uh we could
00:44:53
Define some properties for it right we
00:44:55
could Define that this employee um could
00:44:59
have a name like a string uh and a
00:45:03
department which is also a string I
00:45:05
don't know but also it has some fields
00:45:08
that they shouldn't be altered because
00:45:11
they are inherently not mutable they're
00:45:14
strings that are defined once and should
00:45:18
never change for example uh employee ID
00:45:21
right technically you shouldn't be able
00:45:23
to change the ID maybe you do but I
00:45:25
don't think you should a better example
00:45:27
would be a start date right uh a user
00:45:30
can't have a can't change their start
00:45:31
date after they started that's a a
00:45:34
predetermined thing which by the way I
00:45:36
don't think I mentioned but you can use
00:45:37
the date type for dates um now how do I
00:45:41
enforce that when I were to create here
00:45:43
an
00:45:44
employee uh and set it to equal to
00:45:46
employee over here and I were to uh
00:45:49
Define all of this stuff uh well
00:45:53
actually I need to put an equal sign so
00:45:55
let me Define an employee here
00:45:57
uh start date equals to new date I'll
00:46:02
just set it to right now um and then
00:46:05
name let's add it to
00:46:08
Pedro and Department let's set it to
00:46:11
finance right if I were to create this
00:46:14
employee I want to be able to change the
00:46:17
name field to Jessica imagine I change
00:46:21
my name to Jessica but I don't I want to
00:46:25
not be able to change my employee ID
00:46:27
right right now I can still do it
00:46:29
employee employee ID is equal to uh this
00:46:35
number and then if I were to print the
00:46:38
employee in the
00:46:40
end you should see that it actually
00:46:42
Alters everything
00:46:44
right as you can see however I want to
00:46:47
make uh both this and this field be read
00:46:51
only not mutable so by the name you
00:46:53
should see that I can add this read only
00:46:56
thing over here which actually allows
00:46:58
for that to happen and it gives us a red
00:47:01
squiggly line for the employee ID
00:47:03
meaning it doesn't actually allow me to
00:47:06
um mutate this it says that um cannot
00:47:10
assign employee ID uh cannot assign to
00:47:13
employ ID because it's a readon property
00:47:14
so I can remove this and I know that I
00:47:16
shouldn't be able to change that and now
00:47:19
you see that it actually fixes it so
00:47:23
yeah that's that's pretty much the last
00:47:24
thing I wanted to go over um I've made
00:47:27
typescript videos in the past um
00:47:29
especially videos related to specific
00:47:31
uses of typescript so I'm linking up
00:47:34
here a video I made on using typescript
00:47:37
for uh backend applications so like
00:47:39
setting up a typescript uh application
00:47:42
with Express and nodejs um if you're are
00:47:45
interested in that go check that out but
00:47:47
more importantly I've also made
00:47:48
extensive videos on using typescript
00:47:50
with react because I do think you if
00:47:54
you're going to be using react you have
00:47:55
to be using typescript I don't use it in
00:47:57
some of my videos to make it more
00:47:59
understandable for everyone even those
00:48:01
who don't know typescript but in the
00:48:02
real world you definitely need to use
00:48:04
typescript because type safety is one of
00:48:06
the most important things so that's
00:48:09
basically it I really hope you guys
00:48:10
enjoyed it if you enjoyed it please
00:48:11
leave a like down below and comment what
00:48:13
you want to see next subscribe because
00:48:14
I'm putting a lot of effort into this
00:48:15
channel um I came back I just hit
00:48:18
200,000 subs and I couldn't be more
00:48:20
grateful for everyone um and I'm really
00:48:23
motivated to post a lot of videos for
00:48:25
you guys so I'm interested to see in the
00:48:27
description or in the comments down
00:48:28
below uh what you guys want me to make
00:48:30
and yeah that's that's basically it
00:48:32
really hope you guys enjoyed it and I
00:48:33
see you guys next time