Adding TypeScript Support to an Existing React.js Project (Without Dropping JavaScript Support)

TypeScript provides static typing, better IntelliSense, and improved code maintainability. However, when migrating an existing React project to TypeScript, you may not want to drop JavaScript support entirely. This guide walks you through the minimal changes required to enable TypeScript in a React.js project while still allowing JavaScript files to coexist. 1. Install Required Dependencies To get started, install TypeScript and the necessary type definitions: npm install --save-dev typescript @babel/preset-typescript @types/node @types/react @types/react-dom Additionally, add a script in package.json to check for TypeScript errors without emitting compiled files: "scripts": { "tsc": "tsc --noEmit" } 2. Add a TypeScript Configuration File Create a tsconfig.json file in the root of your project with the following settings: { "compilerOptions": { "target": "es5", "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", "baseUrl": "src" }, "include": ["src"], "exclude": ["node_modules"] } Why These Settings? "allowJs": true → Allows JavaScript files to be used alongside TypeScript. "noEmit": true → Prevents TypeScript from generating output files since we use Babel. "jsx": "react-jsx" → Ensures JSX syntax is correctly processed. "strict": true → Enables TypeScript's strict type-checking for better reliability. If your project contains a jsconfig.json, delete it to prevent conflicts. 3. Add TypeScript Declaration for React Create a new file inside the src/ folder and name it react-app-env.d.ts. Add the following content: /// declare module "*.tsx" { const content: any; export default content; } This helps TypeScript understand .tsx module imports correctly. 4. Start Using TypeScript Files Now, you can begin converting JavaScript files (.js) to TypeScript (.tsx or .ts). You don't have to migrate everything at once—TypeScript and JavaScript files can coexist. Importing JavaScript in TypeScript You can import JavaScript files into TypeScript just like before: import myFunction from "./utils/myFile.js"; Importing TypeScript in JavaScript Similarly, you can import TypeScript files in JavaScript without issues: import myFunction from "./utils/myFile.ts"; This makes it easy to migrate incrementally without breaking the existing codebase. 5. Run TypeScript Checks Once TypeScript is integrated, you can check for type errors without affecting the build process: npm run tsc If everything is set up correctly, the project should continue to work as expected while allowing both TypeScript and JavaScript files. Conclusion By following these steps, you've successfully added TypeScript to your React.js project without losing JavaScript compatibility. This approach allows a smooth transition to TypeScript, enabling better type safety while maintaining existing functionality.

Feb 21, 2025 - 08:54

Adding TypeScript Support to an Existing React.js Project (Without Dropping JavaScript Support)

TypeScript provides static typing, better IntelliSense, and improved code maintainability. However, when migrating an existing React project to TypeScript, you may not want to drop JavaScript support entirely. This guide walks you through the minimal changes required to enable TypeScript in a React.js project while still allowing JavaScript files to coexist.

1. Install Required Dependencies

To get started, install TypeScript and the necessary type definitions:

npm install --save-dev typescript @babel/preset-typescript @types/node @types/react @types/react-dom

Additionally, add a script in package.json to check for TypeScript errors without emitting compiled files:

"scripts": {
  "tsc": "tsc --noEmit"
}

2. Add a TypeScript Configuration File

Create a tsconfig.json file in the root of your project with the following settings:

{
  "compilerOptions": {
    "target": "es5",
    "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",
    "baseUrl": "src"
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

Why These Settings?

"allowJs": true → Allows JavaScript files to be used alongside TypeScript.
"noEmit": true → Prevents TypeScript from generating output files since we use Babel.
"jsx": "react-jsx" → Ensures JSX syntax is correctly processed.
"strict": true → Enables TypeScript's strict type-checking for better reliability.

If your project contains a jsconfig.json, delete it to prevent conflicts.

3. Add TypeScript Declaration for React

Create a new file inside the src/ folder and name it react-app-env.d.ts. Add the following content:

/// 

declare module "*.tsx" {
    const content: any;
    export default content;
}

This helps TypeScript understand .tsx module imports correctly.

4. Start Using TypeScript Files

Now, you can begin converting JavaScript files (.js) to TypeScript (.tsx or .ts). You don't have to migrate everything at once—TypeScript and JavaScript files can coexist.

Importing JavaScript in TypeScript

You can import JavaScript files into TypeScript just like before:

import myFunction from "./utils/myFile.js";

Importing TypeScript in JavaScript

Similarly, you can import TypeScript files in JavaScript without issues:

import myFunction from "./utils/myFile.ts";

This makes it easy to migrate incrementally without breaking the existing codebase.

5. Run TypeScript Checks

Once TypeScript is integrated, you can check for type errors without affecting the build process:

npm run tsc

If everything is set up correctly, the project should continue to work as expected while allowing both TypeScript and JavaScript files.

Conclusion

By following these steps, you've successfully added TypeScript to your React.js project without losing JavaScript compatibility. This approach allows a smooth transition to TypeScript, enabling better type safety while maintaining existing functionality.