Key takeaways:
Combining React with TypeScript enhances error detection, code quality, and developer productivity by adding static types to JavaScript.
The benefits of static typing are:
Early error detection: Catch type errors during development, reducing runtime bugs.
Improved code autocompletion: IDEs offer better suggestions for props and states.
Safer refactoring: TypeScript highlights potential issues during changes in props or states.
.tsx
files allow the use of JSX within TypeScript, with differences in type casting from.ts
files. They are essential for TypeScript-enabled React components.To set up a react typeScript project we need npm, Node.js, TypeScript, React, and React-DOM to be installed.
Command to create a TypeScript-based React project is
npx create-react-app <app-name> --template typescript
.Use
npm start
to run the app and view it locally atlocalhost:3000
.
React and TypeScript are two robust technologies that provide a seamless development experience for modern web development. React is a famous JavaScript library for building UI (user interfaces), while TypeScript is a JavaScript superset that adds static types to Javascript. The React Typescript combination aids in catching errors early, improving code quality, and enhancing productivity. Here, we will explore how to statically type React components with TypeScript.
Static typing means defining the types of props, states, and variables in the code at the time of compiling. It is beneficial for the following reasons:
Early error detection: Type errors are detected in the development phase, resulting in reduced runtime errors and enhanced code quality.
Code autocompletion: IDEs provide better auto-completion, which makes props and state exploration easy.
Improved refactoring: Changing a prop or state is safer because TypeScript underlines potential issues.
.tsx
filesThe .tsx
files are introduced in React TypeScript to enable JSX in TypeScript files.
Two major differences between .tsx and .ts files are:
.tsx
files use as
as the default option when type casting, while <>
is used in .ts files.
.tsx
files enable JSX support in TypeScript, making development easier.
To set up a React TypeScript project, the prerequisites are:
npm
must be installed (version > "8.x.x"
). Here’s how we can install npm.
nodejs
must be installed (version > "10.x.x"
). Here’s how we can install Node.js.
typescript
should be installed (version > "4.x.x"
). Here’s how we can install TypeScript.
react
should be installed (version > "10.x.x"
).
react-dom
should be installed (version > "10.x.x"
).
We can create a new React TypeScript app by running the command:
npx create-react-app ts-react-app --template typescript
In this command,
npx
: This is a package runner, and it is used to install packages that are not installed globally on the system. npx
installs packages temporarily if they are not present.
create-react-app
: This is a command line tool to easily create a React application, and it configures the project structure and builds tools and the development server automatically.
ts-react-app
: This is the name of the React application we create.
--template typescript
: This shows that we are going to use the predefined TypeScript template for this application.
Go to the application directory with the command:
cd ts-react-app
In the directory, we can find a list of files including package.json
and tsconfig.json
and sub-directories like src
and public
.
In the package.json
file:
"name": "ts-react-app"
: This is the name of the project/application.
"version": "0.1.0"
: This is the version number of the project.
"private": true
: This indicates that the project is private and should not be published to any public package registry.
"dependencies"
: This lists the dependencies required for the project.
"scripts"
: This defines various scripts that can be executed using npm.
"eslintConfig"
: This configures ESLint for the project’s linting rules.
"browserslist"
: This specifies the browsers to target for compatibility in production and development.
In the tsconfig.json
file:
"compilerOptions"
: This configures how TypeScript compiles your code.
"include": ["src"]
: This specifies files to include in compilation from the src
directory.
The src
directory consists of 3 .tsx files:
src/index.tsx
: This marks the entry point for the React application. It renders the main components.
src/App.tsx
: This is mostly the main component of the application. It is the root component and holds the entire app’s structure, features, and layout.
src/App.test.tsx
: This is a subcomponent of the app.tsx
component. It is an example component that can be customized or replaced.
The public directory consists of 3 files:
index.html
: It is the main HTML template that serves as an entry point for the application.
favicon.ico
: This is an icon displayed in the browser’s tab when the app is open.
manifest.json
: This is a metadata file for web applications that contains information about the app’s design.
We can run the application with the command:
npm start
This will start our application, and we can view it at localhost:3000
on the local browser.
To view the React TypeScript application, click “Run” and once the code compiles successfully, access it through the link.
.App { text-align: center; } .App-logo { height: 40vmin; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-spin infinite 20s linear; } } .App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white; } .App-link { color: #61dafb; } @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
Statically typing React components with TypeScript enhances the overall development experience by providing early error detection, improving code quality, and making refactoring safer. By grasping TypeScript’s static typing and React’s component-based architecture, developers can create more reliable and maintainable web applications. Setting up a React project with TypeScript is straightforward, and once configured, it streamlines development through better IDE support and efficient code management.
Free Resources