Hello YouTube, today I'm going to show you why
I love to use typescript in my react projects. In order to do that I will divide this
video into three different sections. The first one, I will show you a
JavaScript example in order for us to see the "pain points" we may have when
consuming components built in JavaScript. On the second part of the video, I will
show you the exact same component (Person) converted into typescript and how much
easier it is to consume that component. Then on the third part I will
show you a step-by-step guide on how to move that "Person" component
from JavaScript into TypeScript. So, without any further ado let's
jump into our first example. Over here we have a new react project
using JavaScript. I already went ahead and created this "Person.js" component
and this "Person.js" has three properties. A "name", "birthDate" and a "birthLocation".
And then we are using them over here. In order to show you some of the problems I will start by importing this person
component in my "App.js" component. Now, we can just see that we already have the
import over there which is quite nice and is independent of the fact that we use JavaScript
or TypeScript, but now the differences start! When we do "control+space" over here in normal
JavaScript we can see that we have the "name", the "birthLocation" and at the
top we also have the "birthDate", but you can already see that the
types for it it will be "any". So, in reality it can be a "string", a "number", it can even be an "object"
with first name and last name. So, we are forced now to go inside the source code
of our person to understand where we use the name. You can see that the only place
we use the name is over here, so it's safely to assume that it will be a string. I will do "name=bruno". Now
the next property we want will be the "birthDate", and the
"birthDate", we have the exact same problem. We don't know if this will be a "string"
or if this will be a "Date" object. We are forced again to go inside
the source code. We will see that we have a "birthDate.toISOString()" -
that's a method from the "Date" object, so we already know we have to pass a "Date". Let's come over here do
"control+space" again, click <enter>, "birthDate={new Date('2020-01-01')". Now the last one is probably the hardest of
them all which will be the "birthLocation". The "birthLocation" once
again is an "any" property. So, we need to go inside the person, click on the "birthLocation" and see
where we are using the "birthLocation". We need inside that object a "latitude" a "longitude" and a "height" - this
is the z index of the coordinates. Let's come over here do "control+space" again,
click <enter>, birthLocation equals to an object with longitude: "20"" for example latitude:
"30N" and then the height we can say 300 meters. Let's just say that we want to see the result
of this and we can see that everything is being populated over there... but what
if we make a mistake in the longitude and we just do "longtude", for example, you can
see that now we are not showing it anywhere. We don't have any error in our console
because, we are not using TypeScript. Even worse than that is if I want to go to
this "name" property and say it's no longer called "name" it's just "n" - in this case I
will have to change it manually everywhere. I will need to go to this
"name" put an "n" and now if you see this it will not be working
because we don't have a "name". So, I need to come here manually put "n=Bruno" and you can see already that only
with using Person component one time it's already a some changes that we need
to do because we don't have typescript. I will now move into a typescript
project where you will see that these changes will be much easier to accomplish. Over here we have the same exact project
as before, but this time using TypeScript. You can see already by the file
extensions which is App.tsx. TSX means typescript with JSX inside. Now, if we focus into the code again on line 8 we see that for person
we are still not passing any props. That's why we have that red line below it if we
over you will see a really helpful error message, it says: "the type empty object is
missing the following properties from type PersonProps: name, birthdate and
birthLocation" - which are the mandatory fields or the mandatory
properties for this component. We can do the same thing we did
before "control+space" - we go to "name" and we can already see that
the name has a type of "string". I don't need to go inside the person
component at all to start to use it. I can now do "birthDate" and it
says that's of type "Date" - once again I just need to "birthDate={new
Date('2020-01-01')}", for example, right? Now, the last property is the most
impressive of them all. The "birthLocation". Inside of "birthLocation" we have
the "latitude", the "longitude" and we have the "height". We can see that the
height has a question mark (?), which means that that property is completely optional. You don't
need to pass it. I will show you in a second. Let's create the object first and
now we can do "control+space", we have help to type "latitude" for us. We
can just say that in the latitude we have 22 degrees west for example in the
longitude we have 33 degrees north. I don't understand anything
about coordinates right?? =D So now the last one is the "height" and you can even see that on the "height"
we have a really nice comment. If I do it again it says "how many
meters above ground the person was born", and it's optional. So, I don't
have any error over here!! I can say height 555 meters and
if I pass a property that doesn't exist for example "bruno:1" we will have an error. I can hover over here and it will say:
"type latitude longitude height and bruno is not assignable to the type latitude
longitude and height. Object literal may only specify known properties and bruno does
not exist in the type that we are expecting". The error messages are quite good. On top of
that as you already saw I can make a mistake and I have an error. So, I can hover over here and
if you scroll just a bit you can see a super nice message: "did you mean to write longitude?"...
and actually that's what we really wanted to say. I can now open this over here and you will
see that everything is working as before in our JavaScript version. The only difference
is that this time we didn't need to open our person component one single time. Just imagine that if you have 300 components in your application and
10 developers how much time it saves you. Now I will just do a small refactor on
person for you to see that if I rename person over there and I can even
copy this two or three times, you will see that this rename on "name" will
do the rename everywhere in my application. Let me open person and let's say that from
now on I don't want it to be called name, I want it to be called just "n", for example. I can right click, then click on
"rename symbol" and say just "n". I do enter if I go back to my app component
you can see that it updated everywhere where we are using person so it updated. In the first instance the second
instance and the third instance. On top of that if I have somewhere where
I am using, for example, material-ui or any other external dependency if they change -
when I update I will have an error because now if I have name it will tell me that name is not known
from this specific component which is amazing. So now we will flip once again and I will
show you how you can create these and what this code in reality means because
that's the only difference between our typescript code and our JavaScript code. Let's start a new project and just
copy it from our javascript project and I will show you step by step how to achieve that. In order to start our step-by-step guide I will
create a react typescript project over here. Now, I will go to our old person.js file
copy this one create another person.tsx file and just paste that one over there
I will do the same with the app.js so I will come over here and as you
can see on the right side of the screen the application is already working so for
now let's forget about the browser close it. I will expand this application and we
can start to focus on our person.tsx which has some warnings over here and all of
the warnings are the same I will just read one of them and explain what's happening we have
binding element name implicit as a "any" type this is happening because of our tsconfig.json
we are passing a strict property over here I will leave a link in the description of this
video to all the properties that you can pass to typescript compiler so you understand all
of those properties it's a huge gigantic list okay but by default having strict to true is a
good starting point so now we go back to person and how do we define that contract between
whoever creates this component and whoever is going to use this component you can think of it
like the same contract you have with your employer your employer tells you in the contract that
you have to work let's say eight hours a day and it also says that your employer at the end
of the month has to pay you x amount of dollars this will be roughly the same thing and for that
we will use an interface interfaces for us will act as a contract so how to define interfaces in
typescript we will say interface we will use the same name of the component plus props so person
props that will be the name of our interface now it will be our contract so what we want
name to be well we want name to be a string let's just define name as a string so the way
that we define types in typescript is by using this column we are saying that name will be of
type string then we finish it with a semicolon we can do the same for the birth date let me just
copy birthday it's easier to do it this way and we say that the type of the birth date will be
a date that's the way it does now bird location is one that you can do in two different ways so
first i will do an inline object over here and i will say the first one is the longitude which is
a string then we will have the latitude which is another string and we have the height which will
be a number we already saw that we wanted the height to be optional so if you want something to
be optional you can put the question mark this is the same thing as if you do or undefined okay this
pipe over here means this type or that type in JavaScript and typescript in this case if we have
undefined it means that that field is optional so let's say that name for some reason could be
a string or could be an object with first name of string and last name of string so now people
can pass a string or they can pass an object with first name and last name if you want you can have
that this pipe is literally or okay i will just remove this for now because we don't want that for
now we just want the name to be a string and now in order for saying that all these properties are
of the type or some props you are probably already thinking that we will do the column and then
the type and you are absolutely right so now typescript already knows that the name is a string
the birthdate is a date and the birth location is this object over there if you think that you will
use this location in more than one place so if you want to use it in more places you can do the
following you can remove this inline declaration from there and say interface location for
example and oops I have too many curly braces now and if I format you can see that we have the same
location and over here we just need to say okay the birth location is of type location nothing
else changed we can see that it's a location and so when you look into location you have
that even if you use it that way you have all the benefits as before I can delete this one if
I do "control+space" it still auto completes for me as latitude so it's just a way of you defining
it it doesn't have any difference for the people that is consuming you the only difference is if
someone wants to now import this interface from uh outside of this file they now can just use the
bit of location it's up to you if you need that or not okay now another thing that you may want
to do is let's say that this height when you are over here it's not clear enough what's happening
so when we come here if we do height you can see that we have no comments over there and you saw
that when I showed you the the typescript version I was saying something over there that it was the
height the person was born or something like that well you can come over here and do a "jsdoc"
comment and say something over here say something over here okay we can do the same for the name
for example other thing over here okay when we save and we go back over there we can do control
space and now the height as say something over here so people that are consuming your components
or using your components they can read whatever comment you put over there so it's one less reason
for them to be forced to understand your source code which is really great great especially if you
are creating a library that will be consumed by thousands of people that's really really good even
if not i have usually the practice on every single property that is not immediately obvious
to put a comment explaining how to use it for example imagine that the birth date instead
of being a date was a string usually you can put a comment here saying please use the format YY-MM-DD
for example and so people that are using it they already know which format you are expecting okay
and these type of comments are also really really useful as you saw we have our application working
as we expect we can also as I showed you before now come over here and say that name shouldn't be
any longer name and it's now hello I, save that, I come over here and it already changed all the
instances that we are using so typescript knows exactly where this person component is being used
it can track that is being used there so it just just changes without we worry too much
now you may be wondering: okay bruno but what happens to those interfaces are we sending
that code back to the browser of our client? Because if we are now we are sending a lot more
code well let me relax you a bit let's come over here to typescript link language and
in the typescript language we have something called the typescript playground so if you are
not sure what's happening you can always place our component over here you can see that the
resulting has no types at all no interfaces nothing you can understand that typescript
is only available to us at development time as soon as we compile typescript all the
types go away so this is the exact same result as you see here no typing whatsoever as if you
have done all the code in normal JavaScript so we get all the benefits out of it without
sending anything bigger to our clients and you don't have to type too much which is
great with just a few lines a few interfaces you can already enhance quite a lot the development
experience of your colleagues so I really hope that this video showed you a bit why some people
love typescript why I especially love typescript and in the next videos we will start to look
into all the react hooks like they use effect use state etc and all of those we will look using
typescript as well for the rest of the series we will use typescript for everything so I hope
if you like this video please drop a like on it subscribe to the channel if you are not
already and I see you in a few days bye-bye!
