Once you’ve initiated your React project using the create-react-app command, it’s important to introduce TypeScript to your project. By default, create-react-app sets up a project using JavaScript. However, to work with TypeScript, you’ll need to make some adjustments and add the necessary TypeScript-related dependencies. Here’s a detailed explanation of how to add TypeScript to your project.
Installing TypeScript and @types/react
Access Your Project’s Directory
Open your terminal and navigate to your project’s root directory using the cd command.
cd path/to/your/directoryInstall TypeScript and Type Definitions
To add TypeScript to your project, use npm (Node Package Manager) to install it. Run the following command:
npm install --save typescript @types/react @types/react-dom @types/node
This command installs TypeScript and type definitions for React and other libraries used in your project.
Configuring TypeScript with tsconfig.json
With TypeScript installed, you’ll need to configure it for your project. TypeScript configuration is defined in a tsconfig.json file.
Create a tsconfig.json File
If a tsconfig.json file isn’t present in your project’s root, generate it by executing:
npx tsc –initThis command generates a default TypeScript configuration file with sensible settings.
Customize the Configuration
Open the generated tsconfig.json file and customize it to match your project’s requirements. You may need to configure options like target version, module system, and more, depending on your project’s needs. Adjust settings like target, module, and strict based on your needs.
Renaming Files to Use .tsx and .ts Extensions
To write TypeScript code, you should rename your existing JavaScript files to use .tsx for components and .ts for other TypeScript files.
Rename .js Files
Change the file extensions of your React components from .js to .tsx.
Rename .jsx Files (if applicable)
If you have JSX files, rename them from .jsx to .tsx as well.
Update Import Statements
After renaming, update the import statements in your files to reflect the new file extensions.
Running TypeScript Compiler (Optional)
The create-react-app setup automatically runs TypeScript in the background, compiling your code. However, if you’re not using create-react-app, you might need to manually run the TypeScript compiler to transpile your TypeScript code into JavaScript.
Compile TypeScript Code
Execute the following command to compile TypeScript code into JavaScript:
npx tscThis command compiles all TypeScript files in your project into JavaScript.
Package.json of a typical typescript project
Looking into the project created using CRA, a typical package.json file of a typescript project looks something as shown in the code below:
{
"name": "my-typescript-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.43",
"@types/react": "^18.2.21",
"@types/react-dom": "^18.2.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Project structure of the Typescript project
The project structure of a React app created with TypeScript using the create-react-app tool follows a specific layout that helps organize your code and assets efficiently. Below is a breakdown of the key directories and files you’ll find in the generated project structure:
Here’s a more detailed description of each key element in the project structure:
- node_modules/: This directory contains all the third-party packages and dependencies installed using npm. It’s automatically generated when you install dependencies for your project.
- public/: This directory holds static assets and the main index.html file, which serves as the template for your app’s HTML structure.
- index.html: The main HTML file that serves as the entry point for your app. It includes placeholders for dynamically injected content like the app title and the root element where your React components will be rendered.
- src/: This is where most of your application code resides.
- App.css: CSS file containing styles specific to the App component.
- App.tsx: The main component of your app. You’ll define the structure and behavior of your application here.
- index.css: Global CSS styles that apply across the entire app.
- index.tsx: The entry point of your application. It renders the App component into the designated DOM element.
- logo.svg: A default React logo image. You can replace it with your own logo or other assets.
- Other components and files: You can create additional components and organize them within this directory.
- package.json: This JSON file contains metadata about your project, including its name, version, description, scripts, and dependencies. Read more about package.json file here(https://www.letsreact.org/package-json-explained/).
- README.md: A markdown file containing documentation and information about your project. It’s often used to provide instructions for running the project and other essential details.
- Other Files: There might be additional configuration files related to tools, testing, and other functionalities you choose to integrate into your app.
Summary
Incorporating TypeScript into your React project is a pivotal step toward enhancing code quality and development efficiency. By following the installation of TypeScript, configuring the tsconfig.json file, renaming files, and possibly running the TypeScript compiler, you’ve empowered your project with static typing and improved maintainability.
