Learn how to setup React with TypeScript. Compare the pros and cons of using TypeScript in an React project. Learn more in the full course 👉 https://fireship.io/courses/react-next-firebase/

#js #react #typescript

🔗 Resources

Full TypeScript Video https://youtu.be/ahCwqrYpIuM
TS Docs https://www.typescriptlang.org/
Create React App with TS https://create-react-app.dev/docs/adding-typescript/

🤓 Install the quiz app 

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

🔥 Get more with Fireship PRO 

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T14:10:34.132Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
8842b93e-975b-4ace-be17-10bf268a3d3a
d2b1491a576b9efd359ea8eac614f0d0f00c9a0977afb6d1ac9f765c20c0c8c7
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
When I started this YouTube channel 4 years ago, most React developers would have laughed at the idea of using something like TypeScript.
You should try it.
Nah, bro.
Like, why would you take your beautiful functional JavaScript and bloat it with a bunch of type definitions that make it look like the real Java?
I was very skeptical of it myself when I first started using it in an Angular project in 2017.
Now, maybe it's just the Stockholm Syndrome talking, But, after using it, I've never wanted to go back.
But, I don't think I'm alone because it was the 2nd most loved technology on the 2020 Stack Overflow survey.
In today's video, You'll learn everything you need to know to get started with TypeScript and React.
But more importantly, we'll talk about why or why not you should use it, because there's a good case to be made for both sides of that argument.
If you're new here, like and subscribe, and become a pro member at FireShip IO to get access to my full Next JS React course.
To decide whether or not you wanna use TypeScript, Let's take a look at 2 different projects side by side, one with TypeScript and one without.
There are many different ways to add TypeScript to a React app.
In this case, I'm using that create react app tool, but specifying the TypeScript template.
The docs also have instructions for adding it to an Existing project, or you can learn how to set it up in Next.
Js in my course.
If we look at the file system on these two projects side by side, the most obvious difference is that the TypeScript project has files ending in .ts or .tsx, but the weird thing is that if we look inside one of these files, the code is exactly the same as the JavaScript file.
And that TypeScript.
In other words, it just adds extra optional features on top of regular JavaScript.
The relationship between SCSS and CSS is the same as TypeScript and JavaScript.
And that's really cool because it means you don't really have to learn anything to get started with it.
But here's the catch.
Browsers don't know how to run TypeScript code.
What is this crap?
Which means that we need a compiler to take our TypeScript code and transpile it or compile it down to regular JavaScript.
In our TS project, you'll notice a special file called tsconfig.
Its purpose is to customize the behavior of the compiler, which itself is able to take your TypeScript code and convert it to any flavor of JavaScript that you want to run-in the browser.
Compilers are really cool because they allow you to use special features and modern JavaScript syntax Without having to worry whether or not that code's going to be supported on old legacy browsers.
The drawback is that you now have this giant configuration file to worry about.
Normally, everything just works, but when it doesn't, you have to Google all these different options and figure out what they do.
Many of the options are related to how strict TypeScript is with its type checking And I highly recommend making it as strict as possible by putting strict mode to true.
That'll make your code initially more difficult to write, but in the long run, it makes refactoring And collaborating with other developers way easier.
Another important option is target, which is the flavor of JavaScript that TypeScript will compile your Node 2.
ES 5 is the 2009 version of JavaScript, but your code base can write 2021 JavaScript.
Sounds amazing, but do you really need TypeScript to do that?
Under the hood, the JavaScript version of create react app uses a compiler called babble that does the exact same thing.
So the bottom line is that you can write modern code in both a React JS or TS project.
Now, one thing you'll often hear TypeScript developers say is that it helps them catch silly bugs in development before they become huge Disasters in production.
Let's take a look at an example to see if that's true or not.
In the JavaScript project, I have some state that starts off as an empty object.
Now somewhere else, I might Reference that object and try to access a deeply nested property on it.
That looks like valid code, but when we run the app, we get an error that it cannot read that property.
Bugs like this get It shipped to production all the time.
But, if we try to do the same thing in TypeScript, it's like a goddamn precog that lets us know the error exists before the app even runs.
I really appreciate that, Because I make silly mistakes like that all the time.
But keep in mind that it doesn't replace test driven development.
It can detect poorly structured code In advance, but can't detect bad logic.
But now, let's look at the most important feature of TypeScript, its type system, and the pros and cons of using it.
If we build a functional component in JavaScript, You'll notice that it has a type of JSX element.
In addition, if we reference props, they automatically have a type of any.
That's a pretty vague type definition overall.
In TypeScript, we can be much more explicit about what our code actually is.
React has a built in type called fc, Which stands for function component, and we can assign that type to the component using a colon followed by the type.
That tells the compiler the shape of this code, which will throw an error for anything that's not a valid prop, and autocomplete everything else.
By default, the only known React prop is children, but we can define the shape of our own props Using a TypeScript interface.
An interface allows you to define the shape of an object by matching a property name to a type.
Like here, we have an interface called cool props That should be an object with 2 properties, one of which is a number and the other a string.
In its current form, the interface will make these properties required On the object, but you can make them optional by adding a question mark after the property name.
We can now take this interface and pass it to the function Component type by wrapping it in angle brackets.
This is like saying we have a function component that also includes props of its own custom shape, and now we get really useful IntelliSense on any props when working with this component, and it also guarantees that we use the required props when working with this component in JSX.
However, that did come at a pretty significant cost.
We've added a lot of boilerplate to the code base without adding any new functionality for the user.
Now, it is possible to bypass type checking whenever you want by simply adding Any type.
That allows you to opt out of TypeScript, but also negates all of its benefits.
It's also worth noting that TypeScript can provide automatic documentation for your code because As your editor will automatically pick up the type definitions, so anybody using your code will get IntelliSense on the shape and purpose of it.
And that's way, way more efficient than having to go read some documentation online.
Now, in many cases, TypeScript can automatically infer the type Without you having to add any additional code to the code base.
For example, you might want to strongly type the useState hook.
However, the angle brackets may not be necessary here because if you have The default value of a string, you don't need to give it an explicit type.
It'll have a string type automatically.
And if you try to change it to a value that's not a string, you'll get that precog error in Versus Code.
So So that's pretty nice, but is TypeScript really worth it?
It's managed by Microsoft, enterprise loves it, but some guy on the Internet said it only catches 15% of bugs, while Airbnb said it catches 38% Would you rather write more code or would you rather be more confident in the code you do write?
Would you rather look at your documentation on a website or would you rather have it be automatic in your editor?
Would you rather write faster code now Or deal with chaotic refactoring later.
Do your friends and family love it or do they hate it?
These are all trade offs that you need to think about.
But in my opinion, the answer to should you use TypeScript with React is obviously

Speaker 0: When I started this YouTube channel 4 years ago, most React developers would have laughed at the idea of using something like TypeScript. You should try it. Nah, bro. Like, why would you take your beautiful functional JavaScript and bloat it with a bunch of type definitions that make it look like the real Java? I was very skeptical of it myself when I first started using it in an Angular project in 2017.

Now, maybe it's just the Stockholm Syndrome talking, But, after using it, I've never wanted to go back. But, I don't think I'm alone because it was the 2nd most loved technology on the 2020 Stack Overflow survey. In today's video, You'll learn everything you need to know to get started with TypeScript and React. But more importantly, we'll talk about why or why not you should use it, because there's a good case to be made for both sides of that argument. If you're new here, like and subscribe, and become a pro member at FireShip IO to get access to my full Next JS React course.

To decide whether or not you wanna use TypeScript, Let's take a look at 2 different projects side by side, one with TypeScript and one without. There are many different ways to add TypeScript to a React app. In this case, I'm using that create react app tool, but specifying the TypeScript template. The docs also have instructions for adding it to an Existing project, or you can learn how to set it up in Next. Js in my course.

If we look at the file system on these two projects side by side, the most obvious difference is that the TypeScript project has files ending in .ts or .tsx, but the weird thing is that if we look inside one of these files, the code is exactly the same as the JavaScript file. And that TypeScript. In other words, it just adds extra optional features on top of regular JavaScript. The relationship between SCSS and CSS is the same as TypeScript and JavaScript. And that's really cool because it means you don't really have to learn anything to get started with it.

But here's the catch. Browsers don't know how to run TypeScript code. What is this crap? Which means that we need a compiler to take our TypeScript code and transpile it or compile it down to regular JavaScript. In our TS project, you'll notice a special file called tsconfig.

Its purpose is to customize the behavior of the compiler, which itself is able to take your TypeScript code and convert it to any flavor of JavaScript that you want to run-in the browser. Compilers are really cool because they allow you to use special features and modern JavaScript syntax Without having to worry whether or not that code's going to be supported on old legacy browsers. The drawback is that you now have this giant configuration file to worry about. Normally, everything just works, but when it doesn't, you have to Google all these different options and figure out what they do. Many of the options are related to how strict TypeScript is with its type checking And I highly recommend making it as strict as possible by putting strict mode to true.

That'll make your code initially more difficult to write, but in the long run, it makes refactoring And collaborating with other developers way easier. Another important option is target, which is the flavor of JavaScript that TypeScript will compile your Node 2. ES 5 is the 2009 version of JavaScript, but your code base can write 2021 JavaScript. Sounds amazing, but do you really need TypeScript to do that? Under the hood, the JavaScript version of create react app uses a compiler called babble that does the exact same thing.

So the bottom line is that you can write modern code in both a React JS or TS project. Now, one thing you'll often hear TypeScript developers say is that it helps them catch silly bugs in development before they become huge Disasters in production. Let's take a look at an example to see if that's true or not. In the JavaScript project, I have some state that starts off as an empty object. Now somewhere else, I might Reference that object and try to access a deeply nested property on it.

That looks like valid code, but when we run the app, we get an error that it cannot read that property. Bugs like this get It shipped to production all the time. But, if we try to do the same thing in TypeScript, it's like a goddamn precog that lets us know the error exists before the app even runs. I really appreciate that, Because I make silly mistakes like that all the time. But keep in mind that it doesn't replace test driven development.

It can detect poorly structured code In advance, but can't detect bad logic. But now, let's look at the most important feature of TypeScript, its type system, and the pros and cons of using it. If we build a functional component in JavaScript, You'll notice that it has a type of JSX element. In addition, if we reference props, they automatically have a type of any. That's a pretty vague type definition overall.

In TypeScript, we can be much more explicit about what our code actually is. React has a built in type called fc, Which stands for function component, and we can assign that type to the component using a colon followed by the type. That tells the compiler the shape of this code, which will throw an error for anything that's not a valid prop, and autocomplete everything else. By default, the only known React prop is children, but we can define the shape of our own props Using a TypeScript interface. An interface allows you to define the shape of an object by matching a property name to a type.

Like here, we have an interface called cool props That should be an object with 2 properties, one of which is a number and the other a string. In its current form, the interface will make these properties required On the object, but you can make them optional by adding a question mark after the property name. We can now take this interface and pass it to the function Component type by wrapping it in angle brackets. This is like saying we have a function component that also includes props of its own custom shape, and now we get really useful IntelliSense on any props when working with this component, and it also guarantees that we use the required props when working with this component in JSX. However, that did come at a pretty significant cost.

We've added a lot of boilerplate to the code base without adding any new functionality for the user. Now, it is possible to bypass type checking whenever you want by simply adding Any type. That allows you to opt out of TypeScript, but also negates all of its benefits. It's also worth noting that TypeScript can provide automatic documentation for your code because As your editor will automatically pick up the type definitions, so anybody using your code will get IntelliSense on the shape and purpose of it. And that's way, way more efficient than having to go read some documentation online.

Now, in many cases, TypeScript can automatically infer the type Without you having to add any additional code to the code base. For example, you might want to strongly type the useState hook. However, the angle brackets may not be necessary here because if you have The default value of a string, you don't need to give it an explicit type. It'll have a string type automatically. And if you try to change it to a value that's not a string, you'll get that precog error in Versus Code.

So So that's pretty nice, but is TypeScript really worth it? It's managed by Microsoft, enterprise loves it, but some guy on the Internet said it only catches 15% of bugs, while Airbnb said it catches 38% Would you rather write more code or would you rather be more confident in the code you do write? Would you rather look at your documentation on a website or would you rather have it be automatic in your editor? Would you rather write faster code now Or deal with chaotic refactoring later. Do your friends and family love it or do they hate it?

These are all trade offs that you need to think about. But in my opinion, the answer to should you use TypeScript with React is obviously
When I started this YouTube channel 4 years ago, most React developers would have laughed at the idea of using something like TypeScript. You should try it. Nah, bro. Like, why would you take your beautiful functional JavaScript and bloat it with a bunch of type definitions that make it look like the real Java? I was very skeptical of it myself when I first started using it in an Angular project in 2017. Now, maybe it's just the Stockholm Syndrome talking, But, after using it, I've never wanted to go back.
But, I don't think I'm alone because it was the 2nd most loved technology on the 2020 Stack Overflow survey. In today's video, You'll learn everything you need to know to get started with TypeScript and React. But more importantly, we'll talk about why or why not you should use it, because there's a good case to be made for both sides of that argument.
technology
computer science
If you're new here, like and subscribe, and become a pro member at FireShip IO to get access to my full Next JS React course. To decide whether or not you wanna use TypeScript, Let's take a look at 2 different projects side by side, one with TypeScript and one without. There are many different ways to add TypeScript to a React app. In this case, I'm using that create react app tool, but specifying the TypeScript template. The docs also have instructions for adding it to an Existing project, or you can learn how to set it up in Next. Js in my course. If we look at the file system on these two projects side by side, the most obvious difference is that the TypeScript project has files ending in .ts or .tsx, but the weird thing is that if we look inside one of these files, the code is exactly the same as the JavaScript file. And that TypeScript. In other words, it just adds extra optional features on top of regular JavaScript. The relationship between SCSS and CSS is the same as TypeScript and JavaScript.
And that's really cool because it means you don't really have to learn anything to get started with it. But here's the catch. Browsers don't know how to run TypeScript code. What is this crap? Which means that we need a compiler to take our TypeScript code and transpile it or compile it down to regular JavaScript.
programming
In our TS project, you'll notice a special file called tsconfig. Its purpose is to customize the behavior of the compiler, which itself is able to take your TypeScript code and convert it to any flavor of JavaScript that you want to run-in the browser. Compilers are really cool because they allow you to use special features and modern JavaScript syntax Without having to worry whether or not that code's going to be supported on old legacy browsers.
programming
The drawback is that you now have this giant configuration file to worry about. Normally, everything just works, but when it doesn't, you have to Google all these different options and figure out what they do. Many of the options are related to how strict TypeScript is with its type checking And I highly recommend making it as strict as possible by putting strict mode to true. That'll make your code initially more difficult to write, but in the long run, it makes refactoring And collaborating with other developers way easier. Another important option is target, which is the flavor of JavaScript that TypeScript will compile your Node 2. ES 5 is the 2009 version of JavaScript, but your code base can write 2021 JavaScript. Sounds amazing, but do you really need TypeScript to do that?
Under the hood, the JavaScript version of create react app uses a compiler called babble that does the exact same thing. So the bottom line is that you can write modern code in both a React JS or TS project. Now, one thing you'll often hear TypeScript developers say is that it helps them catch silly bugs in development before they become huge Disasters in production. Let's take a look at an example to see if that's true or not. In the JavaScript project, I have some state that starts off as an empty object.
bugs
software development
programming
Now somewhere else, I might Reference that object and try to access a deeply nested property on it. That looks like valid code, but when we run the app, we get an error that it cannot read that property. Bugs like this get It shipped to production all the time. But, if we try to do the same thing in TypeScript, it's like a goddamn precog that lets us know the error exists before the app even runs.
I really appreciate that, Because I make silly mistakes like that all the time. But keep in mind that it doesn't replace test driven development. It can detect poorly structured code In advance, but can't detect bad logic. But now, let's look at the most important feature of TypeScript, its type system, and the pros and cons of using it.
logic
programming
If we build a functional component in JavaScript, You'll notice that it has a type of JSX element. In addition, if we reference props, they automatically have a type of any. That's a pretty vague type definition overall. In TypeScript, we can be much more explicit about what our code actually is. React has a built in type called fc, Which stands for function component, and we can assign that type to the component using a colon followed by the type. That tells the compiler the shape of this code, which will throw an error for anything that's not a valid prop, and autocomplete everything else. By default, the only known React prop is children, but we can define the shape of our own props Using a TypeScript interface. An interface allows you to define the shape of an object by matching a property name to a type. Like here, we have an interface called cool props That should be an object with 2 properties, one of which is a number and the other a string. In its current form, the interface will make these properties required On the object, but you can make them optional by adding a question mark after the property name. We can now take this interface and pass it to the function Component type by wrapping it in angle brackets. This is like saying we have a function component that also includes props of its own custom shape, and now we get really useful IntelliSense on any props when working with this component, and it also guarantees that we use the required props when working with this component in JSX. However, that did come at a pretty significant cost. We've added a lot of boilerplate to the code base without adding any new functionality for the user. Now, it is possible to bypass type checking whenever you want by simply adding Any type. That allows you to opt out of TypeScript, but also negates all of its benefits.
It's also worth noting that TypeScript can provide automatic documentation for your code because As your editor will automatically pick up the type definitions, so anybody using your code will get IntelliSense on the shape and purpose of it. And that's way, way more efficient than having to go read some documentation online.
documentation
programming
Now, in many cases, TypeScript can automatically infer the type Without you having to add any additional code to the code base. For example, you might want to strongly type the useState hook. However, the angle brackets may not be necessary here because if you have The default value of a string, you don't need to give it an explicit type. It'll have a string type automatically. And if you try to change it to a value that's not a string, you'll get that precog error in Versus Code. So So that's pretty nice, but is TypeScript really worth it? It's managed by Microsoft, enterprise loves it, but some guy on the Internet said it only catches 15% of bugs, while Airbnb said it catches 38% Would you rather write more code or would you rather be more confident in the code you do write? Would you rather look at your documentation on a website or would you rather have it be automatic in your editor? Would you rather write faster code now Or deal with chaotic refactoring later. Do your friends and family love it or do they hate it? These are all trade offs that you need to think about. But in my opinion, the answer to should you use TypeScript with React is obviously
When I started this YouTube channel 4 years ago, most React developers would have laughed at the idea of using something like TypeScript. You should try it. Nah, bro. Like, why would you take your beautiful functional JavaScript and bloat it with a bunch of type definitions that make it look like the real Java? I was very skeptical of it myself when I first started using it in an Angular project in 2017. Now, maybe it's just the Stockholm Syndrome talking, But, after using it, I've never wanted to go back. But, I don't think I'm alone because it was the 2nd most loved technology on the 2020 Stack Overflow survey. In today's video, You'll learn everything you need to know to get started with TypeScript and React. But more importantly, we'll talk about why or why not you should use it, because there's a good case to be made for both sides of that argument. If you're new here, like and subscribe, and become a pro member at FireShip IO to get access to my full Next JS React course. To decide whether or not you wanna use TypeScript, Let's take a look at 2 different projects side by side, one with TypeScript and one without. There are many different ways to add TypeScript to a React app. In this case, I'm using that create react app tool, but specifying the TypeScript template. The docs also have instructions for adding it to an Existing project, or you can learn how to set it up in Next. Js in my course. If we look at the file system on these two projects side by side, the most obvious difference is that the TypeScript project has files ending in .ts or .tsx, but the weird thing is that if we look inside one of these files, the code is exactly the same as the JavaScript file. And that TypeScript. In other words, it just adds extra optional features on top of regular JavaScript. The relationship between SCSS and CSS is the same as TypeScript and JavaScript. And that's really cool because it means you don't really have to learn anything to get started with it. But here's the catch. Browsers don't know how to run TypeScript code. What is this crap? Which means that we need a compiler to take our TypeScript code and transpile it or compile it down to regular JavaScript. In our TS project, you'll notice a special file called tsconfig. Its purpose is to customize the behavior of the compiler, which itself is able to take your TypeScript code and convert it to any flavor of JavaScript that you want to run-in the browser. Compilers are really cool because they allow you to use special features and modern JavaScript syntax Without having to worry whether or not that code's going to be supported on old legacy browsers. The drawback is that you now have this giant configuration file to worry about. Normally, everything just works, but when it doesn't, you have to Google all these different options and figure out what they do. Many of the options are related to how strict TypeScript is with its type checking And I highly recommend making it as strict as possible by putting strict mode to true. That'll make your code initially more difficult to write, but in the long run, it makes refactoring And collaborating with other developers way easier. Another important option is target, which is the flavor of JavaScript that TypeScript will compile your Node 2. ES 5 is the 2009 version of JavaScript, but your code base can write 2021 JavaScript. Sounds amazing, but do you really need TypeScript to do that? Under the hood, the JavaScript version of create react app uses a compiler called babble that does the exact same thing. So the bottom line is that you can write modern code in both a React JS or TS project. Now, one thing you'll often hear TypeScript developers say is that it helps them catch silly bugs in development before they become huge Disasters in production. Let's take a look at an example to see if that's true or not. In the JavaScript project, I have some state that starts off as an empty object. Now somewhere else, I might Reference that object and try to access a deeply nested property on it. That looks like valid code, but when we run the app, we get an error that it cannot read that property. Bugs like this get It shipped to production all the time. But, if we try to do the same thing in TypeScript, it's like a goddamn precog that lets us know the error exists before the app even runs. I really appreciate that, Because I make silly mistakes like that all the time. But keep in mind that it doesn't replace test driven development. It can detect poorly structured code In advance, but can't detect bad logic. But now, let's look at the most important feature of TypeScript, its type system, and the pros and cons of using it. If we build a functional component in JavaScript, You'll notice that it has a type of JSX element. In addition, if we reference props, they automatically have a type of any. That's a pretty vague type definition overall. In TypeScript, we can be much more explicit about what our code actually is. React has a built in type called fc, Which stands for function component, and we can assign that type to the component using a colon followed by the type. That tells the compiler the shape of this code, which will throw an error for anything that's not a valid prop, and autocomplete everything else. By default, the only known React prop is children, but we can define the shape of our own props Using a TypeScript interface. An interface allows you to define the shape of an object by matching a property name to a type. Like here, we have an interface called cool props That should be an object with 2 properties, one of which is a number and the other a string. In its current form, the interface will make these properties required On the object, but you can make them optional by adding a question mark after the property name. We can now take this interface and pass it to the function Component type by wrapping it in angle brackets. This is like saying we have a function component that also includes props of its own custom shape, and now we get really useful IntelliSense on any props when working with this component, and it also guarantees that we use the required props when working with this component in JSX. However, that did come at a pretty significant cost. We've added a lot of boilerplate to the code base without adding any new functionality for the user. Now, it is possible to bypass type checking whenever you want by simply adding Any type. That allows you to opt out of TypeScript, but also negates all of its benefits. It's also worth noting that TypeScript can provide automatic documentation for your code because As your editor will automatically pick up the type definitions, so anybody using your code will get IntelliSense on the shape and purpose of it. And that's way, way more efficient than having to go read some documentation online. Now, in many cases, TypeScript can automatically infer the type Without you having to add any additional code to the code base. For example, you might want to strongly type the useState hook. However, the angle brackets may not be necessary here because if you have The default value of a string, you don't need to give it an explicit type. It'll have a string type automatically. And if you try to change it to a value that's not a string, you'll get that precog error in Versus Code. So So that's pretty nice, but is TypeScript really worth it? It's managed by Microsoft, enterprise loves it, but some guy on the Internet said it only catches 15% of bugs, while Airbnb said it catches 38% Would you rather write more code or would you rather be more confident in the code you do write? Would you rather look at your documentation on a website or would you rather have it be automatic in your editor? Would you rather write faster code now Or deal with chaotic refactoring later. Do your friends and family love it or do they hate it? These are all trade offs that you need to think about. But in my opinion, the answer to should you use TypeScript with React is obviously
When
when
I
i
started
started
this
this
YouTube
youtube
channel
channel
4
4
years
years
ago,
ago
most
most
React
react
developers
developers
would
would
have
have
laughed
laughed
at
at
the
the
idea
idea
of
of
using
using
something
something
like
like
TypeScript.
typescript
You
you
should
should
try
try
it.
it
Nah,
nah
bro.
bro
Like,
like
why
why
would
would
you
you
take
take
your
your
beautiful
beautiful
functional
functional
JavaScript
javascript
and
and
bloat
bloat
it
it
with
with
a
a
bunch
bunch
of
of
type
type
definitions
definitions
that
that
make
make
it
it
look
look
like
like
the
the
real
real
Java?
java
I
i
was
was
very
very
skeptical
skeptical
of
of
it
it
myself
myself
when
when
I
i
first
first
started
started
using
using
it
it
in
in
an
an
Angular
angular
project
project
in
in
2017.
2017
Now,
now
maybe
maybe
it's
it's
just
just
the
the
Stockholm
stockholm
Syndrome
syndrome
talking,
talking
But,
but
after
after
using
using
it,
it
I've
i've
never
never
wanted
wanted
to
to
go
go
back.
back
But,
but
I
i
don't
don't
think
think
I'm
i'm
alone
alone
because
because
it
it
was
was
the
the
2nd
2nd
most
most
loved
loved
technology
technology
on
on
the
the
2020
2020
Stack
stack
Overflow
overflow
survey.
survey
In
in
today's
today's
video,
video
You'll
you'll
learn
learn
everything
everything
you
you
need
need
to
to
know
know
to
to
get
get
started
started
with
with
TypeScript
typescript
and
and
React.
react
But
but
more
more
importantly,
importantly
we'll
we'll
talk
talk
about
about
why
why
or
or
why
why
not
not
you
you
should
should
use
use
it,
it
because
because
there's
there's
a
a
good
good
case
case
to
to
be
be
made
made
for
for
both
both
sides
sides
of
of
that
that
argument.
argument
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
become
become
a
a
pro
pro
member
member
at
at
FireShip
fireship
IO
io
to
to
get
get
access
access
to
to
my
my
full
full
Next
next
JS
js
React
react
course.
course
To
to
decide
decide
whether
whether
or
or
not
not
you
you
wanna
wanna
use
use
TypeScript,
typescript
Let's
let's
take
take
a
a
look
look
at
at
2
2
different
different
projects
projects
side
side
by
by
side,
side
one
one
with
with
TypeScript
typescript
and
and
one
one
without.
without
There
there
are
are
many
many
different
different
ways
ways
to
to
add
add
TypeScript
typescript
to
to
a
a
React
react
app.
app
In
in
this
this
case,
case
I'm
i'm
using
using
that
that
create
create
react
react
app
app
tool,
tool
but
but
specifying
specifying
the
the
TypeScript
typescript
template.
template
The
the
docs
docs
also
also
have
have
instructions
instructions
for
for
adding
adding
it
it
to
to
an
an
Existing
existing
project,
project
or
or
you
you
can
can
learn
learn
how
how
to
to
set
set
it
it
up
up
in
in
Next.
next
Js
js
in
in
my
my
course.
course
If
if
we
we
look
look
at
at
the
the
file
file
system
system
on
on
these
these
two
two
projects
projects
side
side
by
by
side,
side
the
the
most
most
obvious
obvious
difference
difference
is
is
that
that
the
the
TypeScript
typescript
project
project
has
has
files
files
ending
ending
in
in
.ts
ts
or
or
.tsx,
tsx
but
but
the
the
weird
weird
thing
thing
is
is
that
that
if
if
we
we
look
look
inside
inside
one
one
of
of
these
these
files,
files
the
the
code
code
is
is
exactly
exactly
the
the
same
same
as
as
the
the
JavaScript
javascript
file.
file
And
and
that
that
TypeScript.
typescript
In
in
other
other
words,
words
it
it
just
just
adds
adds
extra
extra
optional
optional
features
features
on
on
top
top
of
of
regular
regular
JavaScript.
javascript
The
the
relationship
relationship
between
between
SCSS
scss
and
and
CSS
css
is
is
the
the
same
same
as
as
TypeScript
typescript
and
and
JavaScript.
javascript
And
and
that's
that's
really
really
cool
cool
because
because
it
it
means
means
you
you
don't
don't
really
really
have
have
to
to
learn
learn
anything
anything
to
to
get
get
started
started
with
with
it.
it
But
but
here's
here's
the
the
catch.
catch
Browsers
browsers
don't
don't
know
know
how
how
to
to
run
run
TypeScript
typescript
code.
code
What
what
is
is
this
this
crap?
crap
Which
which
means
means
that
that
we
we
need
need
a
a
compiler
compiler
to
to
take
take
our
our
TypeScript
typescript
code
code
and
and
transpile
transpile
it
it
or
or
compile
compile
it
it
down
down
to
to
regular
regular
JavaScript.
javascript
In
in
our
our
TS
ts
project,
project
you'll
you'll
notice
notice
a
a
special
special
file
file
called
called
tsconfig.
tsconfig
Its
its
purpose
purpose
is
is
to
to
customize
customize
the
the
behavior
behavior
of
of
the
the
compiler,
compiler
which
which
itself
itself
is
is
able
able
to
to
take
take
your
your
TypeScript
typescript
code
code
and
and
convert
convert
it
it
to
to
any
any
flavor
flavor
of
of
JavaScript
javascript
that
that
you
you
want
want
to
to
run-in
run-in
the
the
browser.
browser
Compilers
compilers
are
are
really
really
cool
cool
because
because
they
they
allow
allow
you
you
to
to
use
use
special
special
features
features
and
and
modern
modern
JavaScript
javascript
syntax
syntax
Without
without
having
having
to
to
worry
worry
whether
whether
or
or
not
not
that
that
code's
code's
going
going
to
to
be
be
supported
supported
on
on
old
old
legacy
legacy
browsers.
browsers
The
the
drawback
drawback
is
is
that
that
you
you
now
now
have
have
this
this
giant
giant
configuration
configuration
file
file
to
to
worry
worry
about.
about
Normally,
normally
everything
everything
just
just
works,
works
but
but
when
when
it
it
doesn't,
doesn't
you
you
have
have
to
to
Google
google
all
all
these
these
different
different
options
options
and
and
figure
figure
out
out
what
what
they
they
do.
do
Many
many
of
of
the
the
options
options
are
are
related
related
to
to
how
how
strict
strict
TypeScript
typescript
is
is
with
with
its
its
type
type
checking
checking
And
and
I
i
highly
highly
recommend
recommend
making
making
it
it
as
as
strict
strict
as
as
possible
possible
by
by
putting
putting
strict
strict
mode
mode
to
to
true.
true
That'll
that'll
make
make
your
your
code
code
initially
initially
more
more
difficult
difficult
to
to
write,
write
but
but
in
in
the
the
long
long
run,
run
it
it
makes
makes
refactoring
refactoring
And
and
collaborating
collaborating
with
with
other
other
developers
developers
way
way
easier.
easier
Another
another
important
important
option
option
is
is
target,
target
which
which
is
is
the
the
flavor
flavor
of
of
JavaScript
javascript
that
that
TypeScript
typescript
will
will
compile
compile
your
your
Node
node
2.
2
ES
es
5
5
is
is
the
the
2009
2009
version
version
of
of
JavaScript,
javascript
but
but
your
your
code
code
base
base
can
can
write
write
2021
2021
JavaScript.
javascript
Sounds
sounds
amazing,
amazing
but
but
do
do
you
you
really
really
need
need
TypeScript
typescript
to
to
do
do
that?
that
Under
under
the
the
hood,
hood
the
the
JavaScript
javascript
version
version
of
of
create
create
react
react
app
app
uses
uses
a
a
compiler
compiler
called
called
babble
babble
that
that
does
does
the
the
exact
exact
same
same
thing.
thing
So
so
the
the
bottom
bottom
line
line
is
is
that
that
you
you
can
can
write
write
modern
modern
code
code
in
in
both
both
a
a
React
react
JS
js
or
or
TS
ts
project.
project
Now,
now
one
one
thing
thing
you'll
you'll
often
often
hear
hear
TypeScript
typescript
developers
developers
say
say
is
is
that
that
it
it
helps
helps
them
them
catch
catch
silly
silly
bugs
bugs
in
in
development
development
before
before
they
they
become
become
huge
huge
Disasters
disasters
in
in
production.
production
Let's
let's
take
take
a
a
look
look
at
at
an
an
example
example
to
to
see
see
if
if
that's
that's
true
true
or
or
not.
not
In
in
the
the
JavaScript
javascript
project,
project
I
i
have
have
some
some
state
state
that
that
starts
starts
off
off
as
as
an
an
empty
empty
object.
object
Now
now
somewhere
somewhere
else,
else
I
i
might
might
Reference
reference
that
that
object
object
and
and
try
try
to
to
access
access
a
a
deeply
deeply
nested
nested
property
property
on
on
it.
it
That
that
looks
looks
like
like
valid
valid
code,
code
but
but
when
when
we
we
run
run
the
the
app,
app
we
we
get
get
an
an
error
error
that
that
it
it
cannot
cannot
read
read
that
that
property.
property
Bugs
bugs
like
like
this
this
get
get
It
it
shipped
shipped
to
to
production
production
all
all
the
the
time.
time
But,
but
if
if
we
we
try
try
to
to
do
do
the
the
same
same
thing
thing
in
in
TypeScript,
typescript
it's
it's
like
like
a
a
goddamn
goddamn
precog
precog
that
that
lets
lets
us
us
know
know
the
the
error
error
exists
exists
before
before
the
the
app
app
even
even
runs.
runs
I
i
really
really
appreciate
appreciate
that,
that
Because
because
I
i
make
make
silly
silly
mistakes
mistakes
like
like
that
that
all
all
the
the
time.
time
But
but
keep
keep
in
in
mind
mind
that
that
it
it
doesn't
doesn't
replace
replace
test
test
driven
driven
development.
development
It
it
can
can
detect
detect
poorly
poorly
structured
structured
code
code
In
in
advance,
advance
but
but
can't
can't
detect
detect
bad
bad
logic.
logic
But
but
now,
now
let's
let's
look
look
at
at
the
the
most
most
important
important
feature
feature
of
of
TypeScript,
typescript
its
its
type
type
system,
system
and
and
the
the
pros
pros
and
and
cons
cons
of
of
using
using
it.
it
If
if
we
we
build
build
a
a
functional
functional
component
component
in
in
JavaScript,
javascript
You'll
you'll
notice
notice
that
that
it
it
has
has
a
a
type
type
of
of
JSX
jsx
element.
element
In
in
addition,
addition
if
if
we
we
reference
reference
props,
props
they
they
automatically
automatically
have
have
a
a
type
type
of
of
any.
any
That's
that's
a
a
pretty
pretty
vague
vague
type
type
definition
definition
overall.
overall
In
in
TypeScript,
typescript
we
we
can
can
be
be
much
much
more
more
explicit
explicit
about
about
what
what
our
our
code
code
actually
actually
is.
is
React
react
has
has
a
a
built
built
in
in
type
type
called
called
fc,
fc
Which
which
stands
stands
for
for
function
function
component,
component
and
and
we
we
can
can
assign
assign
that
that
type
type
to
to
the
the
component
component
using
using
a
a
colon
colon
followed
followed
by
by
the
the
type.
type
That
that
tells
tells
the
the
compiler
compiler
the
the
shape
shape
of
of
this
this
code,
code
which
which
will
will
throw
throw
an
an
error
error
for
for
anything
anything
that's
that's
not
not
a
a
valid
valid
prop,
prop
and
and
autocomplete
autocomplete
everything
everything
else.
else
By
by
default,
default
the
the
only
only
known
known
React
react
prop
prop
is
is
children,
children
but
but
we
we
can
can
define
define
the
the
shape
shape
of
of
our
our
own
own
props
props
Using
using
a
a
TypeScript
typescript
interface.
interface
An
an
interface
interface
allows
allows
you
you
to
to
define
define
the
the
shape
shape
of
of
an
an
object
object
by
by
matching
matching
a
a
property
property
name
name
to
to
a
a
type.
type
Like
like
here,
here
we
we
have
have
an
an
interface
interface
called
called
cool
cool
props
props
That
that
should
should
be
be
an
an
object
object
with
with
2
2
properties,
properties
one
one
of
of
which
which
is
is
a
a
number
number
and
and
the
the
other
other
a
a
string.
string
In
in
its
its
current
current
form,
form
the
the
interface
interface
will
will
make
make
these
these
properties
properties
required
required
On
on
the
the
object,
object
but
but
you
you
can
can
make
make
them
them
optional
optional
by
by
adding
adding
a
a
question
question
mark
mark
after
after
the
the
property
property
name.
name
We
we
can
can
now
now
take
take
this
this
interface
interface
and
and
pass
pass
it
it
to
to
the
the
function
function
Component
component
type
type
by
by
wrapping
wrapping
it
it
in
in
angle
angle
brackets.
brackets
This
this
is
is
like
like
saying
saying
we
we
have
have
a
a
function
function
component
component
that
that
also
also
includes
includes
props
props
of
of
its
its
own
own
custom
custom
shape,
shape
and
and
now
now
we
we
get
get
really
really
useful
useful
IntelliSense
intellisense
on
on
any
any
props
props
when
when
working
working
with
with
this
this
component,
component
and
and
it
it
also
also
guarantees
guarantees
that
that
we
we
use
use
the
the
required
required
props
props
when
when
working
working
with
with
this
this
component
component
in
in
JSX.
jsx
However,
however
that
that
did
did
come
come
at
at
a
a
pretty
pretty
significant
significant
cost.
cost
We've
we've
added
added
a
a
lot
lot
of
of
boilerplate
boilerplate
to
to
the
the
code
code
base
base
without
without
adding
adding
any
any
new
new
functionality
functionality
for
for
the
the
user.
user
Now,
now
it
it
is
is
possible
possible
to
to
bypass
bypass
type
type
checking
checking
whenever
whenever
you
you
want
want
by
by
simply
simply
adding
adding
Any
any
type.
type
That
that
allows
allows
you
you
to
to
opt
opt
out
out
of
of
TypeScript,
typescript
but
but
also
also
negates
negates
all
all
of
of
its
its
benefits.
benefits
It's
it's
also
also
worth
worth
noting
noting
that
that
TypeScript
typescript
can
can
provide
provide
automatic
automatic
documentation
documentation
for
for
your
your
code
code
because
because
As
as
your
your
editor
editor
will
will
automatically
automatically
pick
pick
up
up
the
the
type
type
definitions,
definitions
so
so
anybody
anybody
using
using
your
your
code
code
will
will
get
get
IntelliSense
intellisense
on
on
the
the
shape
shape
and
and
purpose
purpose
of
of
it.
it
And
and
that's
that's
way,
way
way
way
more
more
efficient
efficient
than
than
having
having
to
to
go
go
read
read
some
some
documentation
documentation
online.
online
Now,
now
in
in
many
many
cases,
cases
TypeScript
typescript
can
can
automatically
automatically
infer
infer
the
the
type
type
Without
without
you
you
having
having
to
to
add
add
any
any
additional
additional
code
code
to
to
the
the
code
code
base.
base
For
for
example,
example
you
you
might
might
want
want
to
to
strongly
strongly
type
type
the
the
useState
usestate
hook.
hook
However,
however
the
the
angle
angle
brackets
brackets
may
may
not
not
be
be
necessary
necessary
here
here
because
because
if
if
you
you
have
have
The
the
default
default
value
value
of
of
a
a
string,
string
you
you
don't
don't
need
need
to
to
give
give
it
it
an
an
explicit
explicit
type.
type
It'll
it'll
have
have
a
a
string
string
type
type
automatically.
automatically
And
and
if
if
you
you
try
try
to
to
change
change
it
it
to
to
a
a
value
value
that's
that's
not
not
a
a
string,
string
you'll
you'll
get
get
that
that
precog
precog
error
error
in
in
Versus
versus
Code.
code
So
so
So
so
that's
that's
pretty
pretty
nice,
nice
but
but
is
is
TypeScript
typescript
really
really
worth
worth
it?
it
It's
it's
managed
managed
by
by
Microsoft,
microsoft
enterprise
enterprise
loves
loves
it,
it
but
but
some
some
guy
guy
on
on
the
the
Internet
internet
said
said
it
it
only
only
catches
catches
15%
15%
of
of
bugs,
bugs
while
while
Airbnb
airbnb
said
said
it
it
catches
catches
38%
38%
Would
would
you
you
rather
rather
write
write
more
more
code
code
or
or
would
would
you
you
rather
rather
be
be
more
more
confident
confident
in
in
the
the
code
code
you
you
do
do
write?
write
Would
would
you
you
rather
rather
look
look
at
at
your
your
documentation
documentation
on
on
a
a
website
website
or
or
would
would
you
you
rather
rather
have
have
it
it
be
be
automatic
automatic
in
in
your
your
editor?
editor
Would
would
you
you
rather
rather
write
write
faster
faster
code
code
now
now
Or
or
deal
deal
with
with
chaotic
chaotic
refactoring
refactoring
later.
later
Do
do
your
your
friends
friends
and
and
family
family
love
love
it
it
or
or
do
do
they
they
hate
hate
it?
it
These
these
are
are
all
all
trade
trade
offs
offs
that
that
you
you
need
need
to
to
think
think
about.
about
But
but
in
in
my
my
opinion,
opinion
the
the
answer
answer
to
to
should
should
you
you
use
use
TypeScript
typescript
with
with
React
react
is
is
obviously
obviously
success
The benefits of using TypeScript in React include creating new projects and adding optional features to existing ones, fixing bugs in development, and avoiding mistakes. It is important to set up in a Nextiva project and customize code in a tailored and tailored style for developers. The speaker discusses the benefits of TypeScript for writing code and fixing bugs in development, as it allows for more flexible code and the ability to create new types. The speaker suggests that anyone using the app should opt out of TypeScript as it only caught 15% of bugs and is more efficient than reading more documentation online.
How to use TypeScript with React... But should you?
When I started this YouTube channel 4 years ago, most React developers would have laughed at the idea of using something like TypeScript. You should try it. Nah, bro. Like, why would you take your beautiful functional JavaScript and bloat it with a bunch of type definitions that make it look like the real Java? I was very skeptical of it myself when I first started using it in an Angular project in 2017. Now, maybe it's just the Stockholm Syndrome talking, But, after using it, I've never wanted to go back. But, I don't think I'm alone because it was the 2nd most loved technology on the 2020 Stack Overflow survey. In today's video, You'll learn everything you need to know to get started with TypeScript and React. But more importantly, we'll talk about why or why not you should use it, because there's a good case to be made for both sides of that argument. If you're new here, like and subscribe, and become a pro member at FireShip IO to get access to my full Next JS React course. To decide whether or not you wanna use TypeScript, Let's take a look at 2 different projects side by side, one with TypeScript and one without. There are many different ways to add TypeScript to a React app. In this case, I'm using that create react app tool, but specifying the TypeScript template. The docs also have instructions for adding it to an Existing project, or you can learn how to set it up in Next. Js in my course. If we look at the file system on these two projects side by side, the most obvious difference is that the TypeScript project has files ending in .ts or .tsx, but the weird thing is that if we look inside one of these files, the code is exactly the same as the JavaScript file. And that TypeScript. In other words, it just adds extra optional features on top of regular JavaScript. The relationship between SCSS and CSS is the same as TypeScript and JavaScript. And that's really cool because it means you don't really have to learn anything to get started with it. But here's the catch. Browsers don't know how to run TypeScript code. What is this crap? Which means that we need a compiler to take our TypeScript code and transpile it or compile it down to regular JavaScript. In our TS project, you'll notice a special file called tsconfig. Its purpose is to customize the behavior of the compiler, which itself is able to take your TypeScript code and convert it to any flavor of JavaScript that you want to run-in the browser. Compilers are really cool because they allow you to use special features and modern JavaScript syntax Without having to worry whether or not that code's going to be supported on old legacy browsers. The drawback is that you now have this giant configuration file to worry about. Normally, everything just works, but when it doesn't, you have to Google all these different options and figure out what they do. Many of the options are related to how strict TypeScript is with its type checking And I highly recommend making it as strict as possible by putting strict mode to true. That'll make your code initially more difficult to write, but in the long run, it makes refactoring And collaborating with other developers way easier. Another important option is target, which is the flavor of JavaScript that TypeScript will compile your Node 2. ES 5 is the 2009 version of JavaScript, but your code base can write 2021 JavaScript. Sounds amazing, but do you really need TypeScript to do that? Under the hood, the JavaScript version of create react app uses a compiler called babble that does the exact same thing. So the bottom line is that you can write modern code in both a React JS or TS project. Now, one thing you'll often hear TypeScript developers say is that it helps them catch silly bugs in development before they become huge Disasters in production. Let's take a look at an example to see if that's true or not. In the JavaScript project, I have some state that starts off as an empty object. Now somewhere else, I might Reference that object and try to access a deeply nested property on it. That looks like valid code, but when we run the app, we get an error that it cannot read that property. Bugs like this get It shipped to production all the time. But, if we try to do the same thing in TypeScript, it's like a goddamn precog that lets us know the error exists before the app even runs. I really appreciate that, Because I make silly mistakes like that all the time. But keep in mind that it doesn't replace test driven development. It can detect poorly structured code In advance, but can't detect bad logic. But now, let's look at the most important feature of TypeScript, its type system, and the pros and cons of using it. If we build a functional component in JavaScript, You'll notice that it has a type of JSX element. In addition, if we reference props, they automatically have a type of any. That's a pretty vague type definition overall. In TypeScript, we can be much more explicit about what our code actually is. React has a built in type called fc, Which stands for function component, and we can assign that type to the component using a colon followed by the type. That tells the compiler the shape of this code, which will throw an error for anything that's not a valid prop, and autocomplete everything else. By default, the only known React prop is children, but we can define the shape of our own props Using a TypeScript interface. An interface allows you to define the shape of an object by matching a property name to a type. Like here, we have an interface called cool props That should be an object with 2 properties, one of which is a number and the other a string. In its current form, the interface will make these properties required On the object, but you can make them optional by adding a question mark after the property name. We can now take this interface and pass it to the function Component type by wrapping it in angle brackets. This is like saying we have a function component that also includes props of its own custom shape, and now we get really useful IntelliSense on any props when working with this component, and it also guarantees that we use the required props when working with this component in JSX. However, that did come at a pretty significant cost. We've added a lot of boilerplate to the code base without adding any new functionality for the user. Now, it is possible to bypass type checking whenever you want by simply adding Any type. That allows you to opt out of TypeScript, but also negates all of its benefits. It's also worth noting that TypeScript can provide automatic documentation for your code because As your editor will automatically pick up the type definitions, so anybody using your code will get IntelliSense on the shape and purpose of it. And that's way, way more efficient than having to go read some documentation online. Now, in many cases, TypeScript can automatically infer the type Without you having to add any additional code to the code base. For example, you might want to strongly type the useState hook. However, the angle brackets may not be necessary here because if you have The default value of a string, you don't need to give it an explicit type. It'll have a string type automatically. And if you try to change it to a value that's not a string, you'll get that precog error in Versus Code. So So that's pretty nice, but is TypeScript really worth it? It's managed by Microsoft, enterprise loves it, but some guy on the Internet said it only catches 15% of bugs, while Airbnb said it catches 38% Would you rather write more code or would you rather be more confident in the code you do write? Would you rather look at your documentation on a website or would you rather have it be automatic in your editor? Would you rather write faster code now Or deal with chaotic refactoring later. Do your friends and family love it or do they hate it? These are all trade offs that you need to think about. But in my opinion, the answer to should you use TypeScript with React is obviously
The benefits of using TypeScript in React include creating new projects and adding optional features to existing ones, fixing bugs in development, and avoiding mistakes. It is important to set up in a Nextiva project and customize code in a tailored and tailored style for developers. The speaker discusses the benefits of TypeScript for writing code and fixing bugs in development, as it allows for more flexible code and the ability to create new types. The speaker suggests that anyone using the app should opt out of TypeScript as it only caught 15% of bugs and is more efficient than reading more documentation online.