The Best Reasons to Use TypeScript With React—and a Caution
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[00:00 - 00:07] Why use TypeScript with React? The revolutionary thing about React is that it allows you to describe your application as a tree of components.
[00:08 - 00:21] A component can represent an element like a button or an input, it can be a group of elements representing a login form, or it can be a complete page that consists of multiple simple components. Components can pass the information down the tree from parent to child.
[00:22 - 00:31] You can also pass down functions as callbacks, so if something happens in the child component, it can notify its parent by calling the pass callback function. This is where TypeScript becomes very handy.
[00:32 - 00:45] You can use it to define the interfaces for your components, so that you can be sure that your components only get props with correct types. If you have worked with React before, you probably know that you can specify a component's interface using prop types.
[00:46 - 00:53] Let's say we have a component called greeting. This component receives a prop called name and we want to specify the type of this prop as a string.
[00:54 - 01:01] Then we import prop types and specify the type of the prop name as prop types string. We can also do this using TypeScript.
[01:02 - 01:12] In this case, we define a type, greeting props, and then we assign this type as the type of the props of the component called greeting. So if you can do this with prop types, why would you need TypeScript?
[01:13 - 01:16] There are several reasons. You don't need to run your application to know if you have type errors.
[01:17 - 01:24] TypeScript can be run by your code editor, so you can see the errors as soon as you make them. Another thing is that you can only use prop types with components.
[01:25 - 01:31] In your application, you will probably have functions and classes that are not using React. It is important to be able to provide types for them as well.
[01:32 - 01:40] And also, TypeScript is just more powerful. It gives you more options to define the types and then it allows you to use the type information in many different ways.
[01:41 - 01:47] We will demonstrate examples of this in the next lessons. And as a reward of caution, TypeScript does not catch run time errors.
[01:48 - 01:56] It means that you can write code that will pass that type check, but you will get an error upon execution. Let's say we have a mess up the array function.
[01:57 - 02:02] It accepts an array of type array of strings or numbers. And returns nothing.
[02:03 - 02:13] Inside of this function, we will just push a number to this array. Then let's say we define an array of strings, and we call it just strings, and it will have strings full and bar.
[02:14 - 02:32] After we have this array, we call mess up the array with this strings array. And then if we try to get one of the strings from this array, and then call console log s to lowercase, and this is an allowed operation on a string, we will get a runtime type error, s to lowercase is not a function.
[02:33 - 02:38] This happens because the element with index two is a number. We pushed it inside of our function.
[02:39 - 02:50] And as a number, it doesn't have that to lowercase function. So if we look at the mess up the array function again, you will see that this function accepts an array containing elements of type string or number.
[02:51 - 03:06] Then we passed our strings array to this function, and TypeScript allows this because it thinks that types array of type string or number and array of type string match. Usually this is convenient because an array that is defined as having number or string elements can have only string items.
[03:07 - 03:15] In our case, it allowed the bug to slip through the type checking. It also means that you have to be extra careful with data obtained through network requests or loaded from the file system.
[03:16 - 03:20] In this course, we will demonstrate the techniques that allow us to minimize the risk of such issues.
Why use TypeScript with React? The revolutionary thing about React is that it allows you to describe your application as a tree of components. A component can represent an element like a button or an input, it can be a group of elements representing a login form, or it can be a complete page that consists of multiple simple components. Components can pass the information down the tree from parent to child. You can also pass down functions as callbacks, so if something happens in the child component, it can notify its parent by calling the pass callback function. This is where TypeScript becomes very handy. You can use it to define the interfaces for your components, so that you can be sure that your components only get props with correct types. If you have worked with React before, you probably know that you can specify a component's interface using prop types. Let's say we have a component called greeting. This component receives a prop called name and we want to specify the type of this prop as a string. Then we import prop types and specify the type of the prop name as prop types string. We can also do this using TypeScript. In this case, we define a type, greeting props, and then we assign this type as the type of the props of the component called greeting. So if you can do this with prop types, why would you need TypeScript? There are several reasons. You don't need to run your application to know if you have type errors. TypeScript can be run by your code editor, so you can see the errors as soon as you make them. Another thing is that you can only use prop types with components. In your application, you will probably have functions and classes that are not using React. It is important to be able to provide types for them as well. And also, TypeScript is just more powerful. It gives you more options to define the types and then it allows you to use the type information in many different ways. We will demonstrate examples of this in the next lessons. And as a reward of caution, TypeScript does not catch run time errors. It means that you can write code that will pass that type check, but you will get an error upon execution. Let's say we have a mess up the array function. It accepts an array of type array of strings or numbers. And returns nothing. Inside of this function, we will just push a number to this array. Then let's say we define an array of strings, and we call it just strings, and it will have strings full and bar. After we have this array, we call mess up the array with this strings array. And then if we try to get one of the strings from this array, and then call console log s to lowercase, and this is an allowed operation on a string, we will get a runtime type error, s to lowercase is not a function. This happens because the element with index two is a number. We pushed it inside of our function. And as a number, it doesn't have that to lowercase function. So if we look at the mess up the array function again, you will see that this function accepts an array containing elements of type string or number. Then we passed our strings array to this function, and TypeScript allows this because it thinks that types array of type string or number and array of type string match. Usually this is convenient because an array that is defined as having number or string elements can have only string items. In our case, it allowed the bug to slip through the type checking. It also means that you have to be extra careful with data obtained through network requests or loaded from the file system. In this course, we will demonstrate the techniques that allow us to minimize the risk of such issues.