How to start using TypeScript With React Native

February 25, 2021 Publish By : EXPERT APP DEVS 5 min read Viewed By : 990
TypeScript With React Native

What is TypeScript - 

TypeScript is a strongly typed and compiled language. It was designed by Anders Hejlsberg who is also a designer of C# at Microsoft. TypeScript adds the static types in JavaScript. JavaScript code is a valid TypeScript code.

TypeScript is a set of tools. TypeScript is a superset of JavaScript. You can change your .js files to .ts files. TypeScript uses a transcompiler which is a source-to-source compiler that translates one language into another language. 

 

Typescript

 

Typescript has following important features -

  1. TypeScript is a JavaScript.
  2. TypeScript also supports JS libraries.
  3. JavaScript is a TypeScript.
  4. TypeScript is portable.

What is React - 

React is a JavaScript framework which is used to build user interfaces. What is important about React? React is a popular and easy to learn tool which is designed to work everywhere. React is a js library created by facebook for implementing the UI components.

React development skills are JavaScript, HTML, and CSS. using react you can build the professional UI’s.

React is building to work with different browsers, operating systems, and devices. React is for - you can learn once and code anywhere.

If you are familiar with web development concepts then for you it is easy to understand. It has following functionality - 

  1. Declarative
  2. Component-based
  3. Learn once write everywhere

For react you must have basic knowledge about following -

  1. HTML
  2. CSS
  3. DOM
  4. ES6
  5. Node.js
  6. npm

 

Why we use TypeScript with React Native - 

Someone truly says that TypeScript and React native development match are made in heaven, What is the meaning of a required property? TypeScript will tell you have a typo somewhere. If you do not know which properties you need then you find the list of properties or it can autocomplete.

TypeScript and React are a perfect fit for application creation. If you combine both technologies together then you get a huge productivity in applications.

Here we assume that you are familiar with both React and TypeScript. So here we will focus on the combination of the technologies.

You can use TypeScript features only where it is needed. TypeScript is a brilliant type language where you get a lot of features like autocompletion and type safety.

By Using very little setups and tools. TypeScript has a transpiler and a JSX compiler, so the only thing we need is some extra bundling.

Important part of React -

  1. Components
  2. Children
  3. Events
  4. Prop Types
  5. Hooks
  6. Render Props
  7. Children Render Props
  8. Context
  9. Styles
  10. JSX

Install and create react app with typescript - 

Here we are going to install the react and typescript by using npm or yarn which one is already installed in your machine, so let’s start.

 Following is a command for creating apps.

yarn create-react-app app_name --template typescript

npx create-react-app app_name --template typescript

Following are the main files - 

  1. tsconfig.json
  2. .tsx files
  3. package.json
  4. React-app-env.d.ts

How to start the server - 

For running the server you need to open your terminal and run the following command.

yarn start         #or    

npm start

Why TypeScript - 

There are many benefits of using TypeScript. Let's discuss some of the following.

  1. Code Suggestions
  2. Highlights the error
  3. Documented code

Components in react - 

Following are some of the main components used with react, so let’s see some of them.

  1. Functional Component
  2. Class Component
  3. Default props

How to start using typescript with React Native Development

I think now you understand the importance of typescript, now typescript is in demand and react native mobile app development is also in demand, so let’s take a tour for integrating typescript and react native together…

Now I am going to start the project which uses the react native and typescript, here we create a very basic project where you see how we integrate typescript and react native, so follow each step carefully for and step by step and if you face any issue please comment.

Note - for running this project successfully it is important that your react native environment is set up properly, so i assume that your setup is ready to run this project.

Step 1 : Creating the react native typescript project

Here we are going to create a new react native mobile development project with typescript, for creating a typescript project you need to run this command.

npx react-native init MyApp --template react-native-template-typescript

After this your screen is look like -React Native App Development 

 

Step 2 : Check the react native typescript project directory

Now you need to check the folder structure of your project of your react native mobile development project, here you see a folder _tests_ which looks like.

react native typescript project directory

Step 3 : Run the server

In this step we are going to run the npm server, for running the server you need to open the terminal and then run the command.

npm start

Run the server npm start

Step 4 : Migrating the app file to typescript

Now you need to rename your App.js and __tests_/App-test.js files to App.tsx. index.js needs to use the .js extension and now you create all your files with the .tsx/.ts extension, like below image.

Migrating the app file to typescript

So for now this is done, i hope you like the blog then like and share the blog. if any query then please comment.

Need a consultation?

Drop us a line! We are here to answer your questions 24/7.