Create a React App Using Typescript

Author image By Manish Patel  |  Tuesday, June 2, 2020 01:46 PM  |  4 min read  |   132

React App Typescript

React, and TypeScript are two remarkable technologies used by several developers. If you’re a React developer, you might have heard about TypeScript. It’s a statically typed superset of JavaScript which makes its faster and more robust React apps.

React and TypeScript both work hand-in-hand to alleviate some react drawbacks. TypeScript comes with a learning curve. So, let’s walk through everything you need to know to get started with the React app using TypeScript.

Overview of TypeScript with React

TypeScript is a missing part of the JavaScript or called as a subset of JavaScript. All feature of JavaScript is available in TypeScript. But TypeScript is one step ahead of JavaScript. It adds a powerful feature system. To enable code refactoring, navigation, type checking, etc.

TypeScript is excellent on its own and does a lot to React to developers. A React Developer who adopt TypeScript says, they can’t imagine their work without it. Moving on to use TypeScript with React, we need to have a sense of what TypeScript does to our JavaScript code. Let’s jump in and look at what TypeScript adds to JavaScript code:

  • Type Interface: It infers data type of a variable
  • Type annotations: It allows us to assign types of variable
  • The never type: It use to represent the type of value that never occur
  • The unknown type: Help in reducing the use of ‘any’ and create more strong typed code
  • Intersection type: Combine existing types of forms with all members of the kind it based on
  • Union type: Allows to combine a new form of type using Pipe | character
  • Make types reusable with generics.
  • Strongly-typed arrays
  • Strongly-typed tuples

Benefits of React App using TypeScript

If you’re working that why I need to use TypeScript for a React.Js project, Let’s break your thought? Here, it shows how TypeScript makes frontend React development easier.

  • Readability and Validation:

It adds types of variables, functions, and properties with making your code far easier to read. TypeScript serves to eliminate React’s PropTypes and makes react development easy.

  • Code Suggestions:

While typing code, TypeScript provides suggestions and options. It helps in saving a lot of effort and makes it easier for a new developer to use your source code. TypeScript is used for secure communication and in making codebase more consistent.

TypeScript

Source: https://blog.bitsrc.io/

  • Catch Errors and IntelliSense:

TypeScript can highlight errors as soon as they show up. It pops up the mistake before running a code, which saves them time and fixes bug before ahead.

Catch Errors and IntelliSense

Source: https://blog.bitsrc.io/

  • Accurate code maintenance and refactoring:

Once the codebase of the React app starts growing, it becomes difficult to read and maintain. Moreover, navigating these codebases can be a tedious job. TypeScript comes with a refactor code. It prevents typos from making it faster and updating it without changing any of its behavior.

  • Improves use of JavaScript:

TypeScript integrates with JavaScript and uses new features. The React project built with TypeScript compiles a version of JavaScript. It can run on any browsers.

When to use TypeScript?

If you’re working on a project that will long last, start using TypeScript from Day 1. Another great use is when you’re creating any library, you should write it in TypeScript. It helps react developers to predict the inputs and will help to find errors.

How to configure TypeScript?

The TypeScript gives the options to configure the compiler. Configure strictly based on your needs and prioritize the types of errors. The configurations are done in the tsconfig.json file which locates at the root of a project. When a new object passed, TypeScript applies the default configuration.

Let’s set up TypeScript in React App

Step 1: Create a new React App using create-react-app v2.1 or higher

If you want to set up a new project, use – – typescript as a parameter and unique project will set up using typescript.

npx create-react-app hello-tsx –typescript

Step 2: Add TypeScript to existing create-react-app project

If you’re looking to add TypeScript to an existing app, install TypeScript and other needed types. Start the server by renaming the file .ts or .tsx.

npm install –save typescript @types/node @types/react @types/react-dom @types/jest

Step 3: Add TypeScript to React when not using create-react-app

If you don’t want to create-react-app, then the most common way is to setup reacting using a webpack. Check how we can configure it.

3.1: Install Required Package

npm install –save-dev typescript awesome-typescript-loader

3.1.1: TypeScript

The package is essential and responsible for compiling the TypeScript code to JavaScript code.

3.1.2: awesome-typescript-loader

Webpack only understands plain CSS, JavaScript, and HTML. It helps in communicating with typescript to compile TypeScript code to JavaScript code. Configure the compilation according to your needs.

3.2: Update the webpack configuration

After you install the packages, tell the format to the webpack using file extension .ts and .tsx. We need to tell a webpack which loader will handle these file formats.

module.exports = {
entry: [
path.join(process.cwd(), ‘app/app.tsx’), // or whatever the path of your root file is
]
module: {
rules:[{ test: /\.tsx?$/, loader: ‘awesome-typescript-loader’ }], // other loader configuration goes in the array
resolve: {extensions: [‘.js’, ‘.jsx’, ‘.react.js’, ‘.ts’, ‘.tsx’]}
}
}

Source: GitHub

3.3: Add TypeScript configuration file

Add configure file in the root of the project. Modify the file and add it as per your needs.

{
“compilerOptions”: {
“sourceMap”: true,
“noImplicitAny”: true,
“module”: “commonjs”,
“target”: “es5”,
“jsx”: “react”
},
“include”: [“./app/**/*”]
}

Source: GitHub

Restart your server and get ready to write in TypeScript

Step 4: Next steps

The above pointers were the basic intro to TypeScript. It majorly focuses on how to setup TypeScript in various state of React projects.

Summary

One can use React and TypeScript together in the best way with taking a bit of learning. But the benefits will immensely pay off in the long run. In the above article, we have covered the common use cases, third-party libraries, and more. If you’re currently facing the problems in creating a react app using TypeScript. Hire react developer who has excellent knowledge to share with you.

 

Create a React App Using Typescript

Contact Us

 

 


Author image

Manish Patel

Manish Patel is a Co-Founder of Concetto Labs, a leading mobile app development company specialized in android and iOS app development. We provide a one-stop solution for all IT related services.

Why Our Client Love Us?

  • Fast kick-off
  • Agile Ready
  • 98% Client Retention
  • 360-Degree solutions

Our integrity and process focuses largely on providing every customer the best recommendations for their respective business. Our clients become recurring customers because we always go beyond their expectations to deliver the best solutions.

Get In Touch
Mr. Sieva Savko
Customer for over 4 years Mr. Sieva Savko Norway

Concetto Labs have provided us with a tremendous amount of help. Their competence in various IT fields led to a positive outcome while facing different challenges. A lot of value was given by their helpful professional staff. To describe this company in three words: effectiveness, collaboration, trust. I would also like to personally thank Mr. Tejas Patel for his positive, friendly, and highly competent approach. The all-around support provided by him made every task at hand a no-brainer.

Miss. Caroline Jack
Customer for over 4 years Miss. Caroline Jack South Africa

It has been an absolute pleasure working with the Concetto Labs team! We have worked together on a few projects now, all of which have been successful. You can rely on good communication and response times from these guys. And they go above and beyond to ensure that the result is achieved. Because of their great service, they have become an integral part of our business and we will continue to use them going forward.

Mr. Richard Bartlett
Customer for over 3 years Mr. Richard Bartlett United States

Concetto Labs is a group of incredibly talented individuals. They are very responsive and communicate with you each and every step of the process. I worked with Manish Patel throughout the entire process and must say that I have never conducted business with a more honest and professional individual. Together with his team, Manish created www.travcentiverewards.com exactly how we envisioned it to be. Thanks for all of your hard work.

Mr. Conrad Abraham
Customer for over 2 years Mr. Conrad Abraham United States

Concetto Labs team is my go-to for any simple or complex development projects. They have risen to the challenge. Great project management, communication, and super quick turnaround. I’ve done multiple projects with them and don’t plan on changing that.

Mr. Edward Chin
Customer for over 4 years Mr. Edward Chin Canada

Concetto Labs was able to bring my complex idea to life. Throughout the project, Concetto Labs maintained constant communications and was always professional - considering I had no experience in what I wanted to create their welcoming attitude, patience, and knowledge in the field created the perfect environment to work in. I was so impressed with their work that I've kept them on board as my go-to experts. Thanks for the worthwhile experience and the breathtaking product.

Karuna Govind
Karuna Govind CTO & Co Founder (Coupay) London, UK

We started working with Concettolabs due to the influx of work on mobile (Flutter) and frontend (React.js). It's been fantastic working with them. Good, consistent communication and good quality of work means they may be our first choice for many projects to come.

Arunabha Choudhury
Arunabha Choudhury Director (Fuzzann Technologies Private Limited) India

We are a healthcare IT company and wanted to build a Mobile Application for both Android and IOS using Flutter. The Concetto Lab team has been very patient with our project requirements and made sure all our queries are answered. It was a great show of professionalism and customer relationship. Even during the project, the team was very accommodating of all the changes we requested. The project was delivered successfully and we deployed the app in the Android Play Store. Overall, the entire process has been very transparent and the team was able to deliver exactly what we had envisioned the project outcome to look like.

GlobalClients
Good Firms Clutch App Futura Microsoft Associate Mobile App Top Developers Gesia
Close
Are you enjoying reading what you see?

Feel like discussing more about this with our Sales Experts? Click on Create Similar Button.