How to Use TypeScript with React Native

What is TypeScript?

TypeScript offers static typing, improved tooling, better maintainability, scalability, and seamless integration with JavaScript.

It aims to enhance JavaScript development by catching errors early, providing a richer development experience, and enabling the building of more robust and maintainable applications.

a. Features of TypeScript

TypeScript is an open-source, typed syntactic superset of javascript.

It has the potential to move some kinds of errors from runtime to compile time.

1. Static Typing:

   TypeScript allows you to explicitly specify types for variables, function parameters, and return values.

2. Type Inference:

   TypeScript infers types based on the assigned values.

3. Interfaces and Type Declarations:

   TypeScript supports interfaces and type declarations.

4. Classes and Object-Oriented Programming (OOP):

   TypeScript supports class-based object-oriented programming.

5. Generics:

   TypeScript allows us to define generic types and functions, which provide flexibility and reusability.

b. How TypScript Works with React Native?

TypeScript react native works with React Native under the hood by providing static type checking and improved tooling support during the development process.

You need to install TypeScript (typescript) and the type definitions for React Native (@types/react-native). These dependencies can be added to your project.

How to Add TypeScript to the Existing Project?

For React Native CLI:

Install the following typescript configuration dependencies for React native typescript:

Then Add a TypeScript config file. Create a tsconfig.json in the root of our Typescript react native:

Rename the file to .tsx or .ts over .jsx or .js. Only leave the index.js file; otherwise, it will cause a problem.

For Expo:

Use the below command to see the list of available templates on expo.

or by direct mentioning typescript

or

Of the three commands, all are valid commands. So we can use any one of them to get started.

Creating a React Native App with TypeScript

a. Prerequisites

• Node.js version 14 or newer.
• Java Development Kit JDK11 recommended
• Android Studio and Xcode for respective both Android and ios platforms.

b. Installations

Install React native typescript project using the React Native CLI through the following command:

c. Constructing the Base UI

We are building a product manager app with the following functionality:

• Users can add new products by entering the product name and quantity.
• Users can view a list of all the products that have been added.

TopBar.tsx

The header component can be used to render a header in any React native typescript application.

App.tsx

Output

d. How to Add Items to the List?

Now we need to build a form that can take two input fields named Product name and total quantity.

AddProduct.tsx

The component takes two props, shoppingList and setShoppingList, which are used to manage the shopping list.

App.tsx

e. Listing Items

After adding those products, a user must see them in the product list.

FlatList component to render a list of products. The FlatList component takes a data prop.

Product.tsx

App.tsx

Output

Can We Use JavaScript Instead of TypeScript?

Yes, we can use JavaScript instead of TypeScript in a React native typescript project. Even React Native supports both JavaScript and TypeScript as programming languages, allowing developers to choose based on their preferences and project requirements.

How to Use Custom Path Aliases With TypeScript?

We must think about what Path Alias refers to.

We might face long package imports using dot notation in Typescript react native.

tsconfig.json which represents the root of the directory. Every path in your tsconfig will be relative to that.

then add your path alias' to the paths object.

In the tsconfig.json file, add a "paths" property under "compilerOptions" to define our custom path aliases.

For example, let's say you want to create an alias for a directory called src located at the root of your project:

In this example, @src/ is the alias, and src/ is the actual path.

so our import statement can look like