Should we use TypeScript with React Native ?
Features of TypeScript
let varible_name = "GeeksforGeeks";
A syntax in typescript looks like this:
let varible_name: string = "GeeksforGeeks";
Here in typescript, we also provide the type for the variable.
Advantages of using TypeScript in React Native:
- Self Documentation: When you start writing types of variables and functions in your code, you are documenting what values you expect in those components. It becomes easy for other developers to understand your code better.
- Refactoring becomes easy: Whenever you make any mistake like providing wrong values to variables or passing wrong arguments to functions, typescript will give you an error so that you can correct your mistakes before running the app.
- Easy Debugging: Debugging the code becomes a lot easy with typescript because you have all the types documented in the code itself. It also helps other developers working on the same code.
- Text editor or IDE will also help you: TypeScript can integrate with all editors and IDE. This allows your editor to use TypeScript definitions and autocomplete the code and let you know what to pass to components.
- It becomes easy to think and grow: By defining types for the variable and functions, you get a structure of your entire app. It helps you to think better in terms of scopes and the context of the whole app. You can easily grow your app.
No programming language is perfect. Typescript also has some disadvantages.
Disadvantages of using TypeScript in React Native:
- More dependencies need to be managed : You have to add types for each object you create and you have to keep these types in mind while assigning values to it.
- New syntax: TypeScript is not a whole new programming language but still it comes with some new syntax. You have to adapt it and it takes some time to get used to it.
With all these advantages and disadvantages, Typescript still provides great value to your project. You will save many hours of debugging time by using TypeScript. Therefore, you should definitely use TypeScript in your React Native Project.
How to use typescript in React Native:
Step 1: Open your Terminal and run the below command. It will install Expo CLI globally in your system.
npm install -g expo-cli
Step 2: Now, create a new React Native Project by running the below command.
expo init "Your_Project_Name"
Step 3: You’ll be asked to choose a template. Select blank(TypeScript) or tabs(TypeScript) template instead of the first one.
By choosing this template, a new React Native project with typescript integrated will be generated for you.
Project Structure: It will look like the following.
In the following example, we will be creating a custom component called GeeksforGeeks.tsx which we will render in the main App.tsx file. We will pass an object to this custom component and this component will also contain a type definition for that object.
Create a new file called GeeksforGeeks.tsx. This file is a custom component that we will render in the main App.tsx file.
Example: Below example will illustrate the use of TypeScript with React Native
Step 1: Open GeeksforGeeks.tsx file write below code in that file. This component will receive 1 object as a prop from the App.tsx file. This object will have 2 properties, id, and title. Both will be of type string and we have to define these types in this component because we are using TypeScript. Then we will simply display this id and title to the screen with some styling.
As you can see in the code, we provide a type definition for GeeksforGeeksProps. You need to use export type syntax to define all the types.
Step 2: Open the App.tsx file and write the below code in that file.
App.tsx is the main file that renders first when you run your app. In this file, we will create a constantly called text. We will pass this text in our GeeksforGeeks component as a prop and render it on the main screen.
id and title both have string types. If you don’t follow this type of rule, the editor will give you an error. For example, if you provide 1 to id instead of “1”, your editor will tell you that “type number is not assignable to type string”.
This is how TypeScript will help you to solve the errors before the execution of your code. If you don’t have any errors in your code then you will get a successful output like below.