React constitutes an avant-garde library that employs an evolved component-based approach for constructing web applications. It is pertinent to note that while React constructs applications using the “create react app” command, TypeScript enables the development of applications using React and TypeScript together.
Recently, developers have been inclined to create React App with TypeScript instead of conventional Javascript. This is owing to its easy comprehensibility and enhanced support of Typescript for IDE and Javascript XML.
Are you looking for a step-by-step walkthrough for building a React app with TypeScript? If yes, here we go. This article discusses the easy steps to set up a React Typescript application and highlights the prerequisites for building a React App with Typescript.
Prerequisites for Setting Up a React Typescript App
Before jumping on the process of building a React App with TypeScript, you should first take note of the various prerequisites. These are:
Rudimentary Know-How of the React App:
Before diving into building a React App with TypeScript, it is essential to have a basic understanding of React itself. Familiarity with React's core concepts, such as components, state, and props, will provide a solid foundation for working with TypeScript.
Familiarity with the types of TypeScript:
TypeScript introduces static typing to JavaScript, enabling better code organization and tooling support. It is crucial to have some familiarity with TypeScript's type system, including concepts like interfaces, types, generics, and type annotations. Understanding how to define and utilize types will enhance the development experience when using TypeScript with React.
Consider going through the Illustrative section on TypeScript in the Official Documentation of React:
The official documentation of React includes a dedicated section on TypeScript. It provides detailed explanations, examples, and best practices for integrating TypeScript into React projects. Going through this section can greatly help in understanding how to leverage TypeScript's features effectively while working with React.
Procedure to Create a React TypeScript Application
Follow the comprehensive set of steps given below to create a React Typescript application:
- To kick-start the process, access the terminal and head to your workspace's directory.
- Run the following command:
"npx create-react-app App –template TypeScript."- If you face any error at this stage, try to force the command mentioned above by mentioning the newest version:
‘’npx create-react-app@latest my-ts-app --template typescript’’- Hit on 'y' to proceed ahead. After that, hit the 'Enter' key to initiate the installation process for the template.
- Once done, the created React app will show up. [Note: Upon completing the creation of the Create React App with Typescript, the files will show up with a .tsx extension and not with a .js extension].
- Subsequently, you must rename any previous file with a .js extension to .tsx. Naturally, the index file will now appear as an index.tsx.
- The next step requires the creation of a tsconfig.json file in the root directory. Incorporate the following setting for the same:
‘’{
"compilerOptions": {
"target": "es6",
"lib": ["dom," "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext,"
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src/*/"]."
}’’You can face a wide range of assorted error codes at this stage. However, there is no need to fret. Consider employing type assertion to eliminate the error in index.tsx. Soon after setting up the React application, it is your turn to run it. You can also test it by entering the following command:
‘’npm start #or yarn start’’Which is Better for React: TypeScript or Javascript?
Several factors attest to the viability of Typescript for React. Undoubtedly, Javascript is a good option, but considering the vastness and diversity of evolving projects, Typescript has ushered as a better alternative to Javascript. Apart from this edge, Typescript has better support for Javascript XML and IDE.
Furthermore, Typescript also supports existing projects in React. All you have to do is to employ the below:
‘’npm install --save typescript @types/node @types/react @types/react-dom @types/jest’’These accolades make Typescript the first preference of professionals when it comes to React.
Suggested Read
Why ReactJS is an Ideal Choice for SaaS Product Development?
View Blog
Procedure for Declaring Types in the React App
There are different steps for declaring state and props in the functional and class-based components.
1. For Declaring Props in a Functional Component
Props types in the functional component can be declared by employing 'React.FC', a general type function used to apprise the Typescript of the information that the current function reverts to JSX. Notably, the component constitutes the below-mentioned props:
- todos: It belongs to the type ITodos and is stated earlier. Furthermore, the todos array indicates an array subsuming all todos.
- toggleTodos: This particular function requires an integer (id), while it returns nothing. Its sole function is to alter the finished field of ITodo.
- deleteTodos: It is tantamount to toggleTodos. However, the only difference is that rather than toggling, it clears the ITodos array from the state.
2. For Declaring Props In A Class Component
The procedure in a class component is similar. The only difference lies in the process of the creation of the props. Herein, it would help if you carried over the prop and state types as generic to React.
How To Integrate Typescript In Your React Applications?
The steps to integrate Typescript in a pre-existing app are as follows:
- Head to the terminal and then move to the directory of your application. Type the following Typescript there:
‘’npm install --save typescript @types/node @types/react @types/react-dom @types/jest’’- Rename the files with Typescript extensions (.tsx).
- While in VSCode, if you pass over some underlined element, you may stumble upon the error message stating that you cannot employ JSX unless the jsx flag is mentioned. Herein, you are required to hit on the Quick Fix option. Another option is to fix it manually.
- In case you hit QuickFix, a message will pop up on the screen stating to enable the jsx flag in the configuration file. Upon clicking on it, it may take a while to load. Wait for the process to culminate; by the end, all the errors will be uprooted.
- To fix the issue manually, advance to your tsconfig.json file and locate the "jsx" key. All you need to do is alter the present value from react-jsx to "react." If the error persists in the tsconfig.js file, consider using a different version of TypeScript. For this, follow the instructions below:
- Type the "cmd + shift + p" keys on the keyboard together to start.
- This action shall open the quick settings in VSCode.
- Herein, you are required to look for "TypeScript: Select TypeScript version…".
- Upon locating the command line, click on it and then choose to use the workspace version.
- You are now good to go.
What if The App/Project is Created With Typescript Disabled?
In such a case, npx employs a cached version of create react app. You are required to remove any previously installed versions by using the command "npm uninstall -g create-react-app." You can alternatively use the command "yarn global remove create-react-app."
Is it a Viable Option to Integrate Typescript into your React applications?
Using Typescript is safe and can be used for large projects wherein Javascript is a tedious option. In a nutshell, it safeguards the code by adding evolved editor support and leading to a pretty easy-to-understand code. So, using Typescript is recommended in the modern IT milieu as it comes with various evolving features.
Suggested Read
NextJS vs ReactJS: Which JavaScript Framework is Best?
View Blog
Summing Up
The domain of Typescript and React is quite intricate to comprehend for a newbie. Typescript is gaining a steady entry into the ever-dynamic IT milieu and has successfully laid its footprints. In recent times, Typescript has become a potential replacement for Javascript when it comes to constructing large projects. The procedure for building a React App with TypeScript is relatively easy if one has elementary know-how of Typescript and React. Although programming languages keep witnessing unprecedented changes with ever-evolving technologies, getting acquainted with the recent trends is essential for professionals.
Are you ready to take your React app to the next level with TypeScript? Look no further! SoluteLabs is here to provide you with top-notch React development services. Our team of experienced developers can help you seamlessly integrate TypeScript into your React project, ensuring clean, maintainable, and bug-free code.
