Tag: typescript

What is the use of index.ts file (barrel file or barrel export) ?

An index.ts file in a folder is used to re-export modules from that folder.
When you import from the folder, you automatically get what is exported from index.ts.

Benefits and Uses:

1. Simplifies Imports

Without barrel :

import GameCard from '../Components/GameCard/GameCard';

With barrel:

import GameCard from '../Components/GameCard';

This makes your imports shorter and cleaner.

2. Centralizes Exports

You can export multiple components, functions, or types from one place.

Example:

export { default as GameCard } from './GameCard';
export { helperFunction } from './helpers';

Now you can import both from the folder directly.

3. Easier Refactoring

If you rename or move files, you only need to update the index.ts file, not every import in your project.

4. Improves Code Organization

  • Encourages grouping related files and exports together.
  • Makes it easier for new developers to see what a folder provides.

What do we call this process?

  • Barrel export
  • Barrel file
  • Sometimes just called an index file pattern

Summary

Using an index.ts as a barrel file:

  • Makes imports cleaner and easier to manage.
  • Centralizes exports for better organization.
  • Is a common best practice in TypeScript and JavaScript projects.

💡 Found this helpful? Subscribe for simple React and TypeScript guides with real-world examples. Happy Coding!

How to import .tsx file .js file ?

STEP 1: Install TypeScript and Type Definitions

Open your terminal in the project root and run the following command

npm install --save-dev typescript @types/react @types/react-dom

STEP 2: Create or Update tsconfig.json

If you don’t have a tsconfig.json, create one in your project root.
If you have empty one , add the following basic configuration:

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "jsx": "react-jsx",
    "allowJs": true,
    "checkJs": false,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "resolveJsonModule": true
  },
  "include": [
    "src"
  ]
}

STEP 3:  Use .tsx Components in .js Files

Now you can import your .tsx files in your .js files as usual as follows

import MyComponent from '../path/to/MyComponent.tsx';

Note:

  • If you use Create React App or Vite, most of this is already set up.
  • You can mix .js, .jsx, .ts, and .tsx files in your project.
  • If you want TypeScript type checking in .js files, set "checkJs": true in tsconfig.json.

💡 Found this helpful? Subscribe for simple React and TypeScript guides with real-world examples. Happy Coding!

Fixing TS7016 Error in React: Could Not Find a Declaration File for Module react-router-dom

While working with a React + TypeScript project, you may suddenly see this error:

TS7016: Could not find a declaration file for module 'react-router-dom'

or:

implicitly has an 'any' type

This is a very common error when using TypeScript in React applications.

In this article, we’ll clearly understand:

  • What this error means
  • Why it happens
  • How to fix it
  • What are declaration files
  • Why TypeScript needs them
  • Best practices

The Exact Error

Your error looks like this:

TS7016: Could not find a declaration file for module 'react-router-dom'.'/node_modules/react-router-dom/index.js'implicitly has an 'any' type.

And this line causes the error:

import { NavLink } from 'react-router-dom';

What Does This Error Mean?

TypeScript is saying:

“I found the react-router-dom package, but I cannot find its type definitions.”

In simple words:

👉 TypeScript understands JavaScript code
❌ But it does NOT know the types of the package.

Why TypeScript Needs Types

TypeScript works using:

  • types
  • interfaces
  • definitions

Example:

let name: string = "Raju";

TypeScript knows:

  • name must be string

Similarly, TypeScript wants type information for external libraries too.

What Are Declaration Files?

Declaration files are:

.d.ts

files.

These files tell TypeScript:

  • what functions exist
  • what props exist
  • what return types exist

Example

Without types:

function add(a, b) {
  return a + b;
}

TypeScript does not know:

  • what a is
  • what b is

With Types

function add(a: number, b: number): number {
    return a + b;
}

Now TypeScript understands everything clearly.

Why This Error Happens

Usually because:

  • @types/react-router-dom package is missing
  • TypeScript cannot find declaration files
  • Package version mismatch
  • Incomplete installation

Most Common Fix

Install Type Definitions.

Run:

npm install --save-dev @types/react-router-dom

or

yarn add -D @types/react-router-dom

What This Package Does

This package provides:

type definitions

for:

react-router-dom

Now TypeScript can understand:

  • NavLink
  • Route
  • BrowserRouter
  • useNavigate
  • etc.

After Installation

Restart your React server:

npm start

or

npm run dev

Important Version Issue

This is VERY important.

⚠️ React Router v6+

If you are using:

react-router-dom v6 or later

then many times:

👉 type definitions are already included.

You may NOT need:

@types/react-router-dom

Then Why Error Happens?

Usually because:

  • corrupted node_modules
  • old TypeScript version
  • package mismatch
  • partial installation

Recommended Fix for React Router v6+

Delete:

node_modulespackage-lock.json

Then reinstall:

npm install

Check Installed Version

Run:

npm list react-router-dom

If Using React Router v5

Then install:

npm install --save-dev @types/react-router-dom

because v5 needs separate type definitions.

How TypeScript Reads Packages

When you import:

import { NavLink } from 'react-router-dom';

TypeScript searches for:

1. package2. type definitions3. .d.ts files

If type definitions are missing:

❌ TS7016 error occurs.

Temporary Quick Fix (Not Recommended)

You may see suggestions like:

declare module 'react-router-dom';

inside a .d.ts file.

This removes the error temporarily.

BUT:

❌ You lose type safety.

Why You Should Avoid This

Because TypeScript will treat everything as:

any

which defeats the purpose of TypeScript.

Best Solution

Always use proper type definitions.

❌ Before Fix

import { NavLink } from 'react-router-dom';

Error:

Could not find declaration file

✅ After Fix

npm install --save-dev @types/react-router-dom

Now error disappears.

Another Possible Issue

Sometimes developers accidentally install:

react-router

instead of:

react-router-dom

Make sure correct package exists.

Verify in package.json

"react-router-dom": "^6.x.x"

Recommended TypeScript Setup

Install:

npm install typescript @types/react @types/react-dom

Important Learning

JavaScript libraries work WITHOUT types.

But TypeScript applications need:

  • declarations
  • interfaces
  • type definitions

to provide:

  • autocomplete
  • validation
  • error checking
  • IntelliSense

Final Summary

✔ TS7016 means TypeScript cannot find type definitions
✔ Usually happens with missing @types/... packages
✔ Install correct type definitions
✔ Restart development server after installation
✔ React Router v6+ usually includes types already
✔ Version mismatch can also cause this error

Quick Fix Checklist

Before debugging deeply, check:

✅ react-router-dom installed
✅ correct version installed
✅ @types/react-router-dom installed (for v5)
✅ restart server
✅ delete node_modules and reinstall if needed

🚀 Call to Action

💡 Found this helpful? Subscribe for simple React and TypeScript debugging guides with real-world examples. Happy Coding!

Can We Use Both .js and .tsx Files in a React Project? (Complete Guide)

Many developers moving from JavaScript to TypeScript have this question:

🤔 “Can I use both .js and .tsx files in the same React project?”

The answer is:

✅ YES — absolutely.

In fact, many real-world React applications use a mix of:

  • .js
  • .jsx
  • .ts
  • .tsx

especially during migration from JavaScript to TypeScript.

In this guide, you’ll learn:

  • What .js and .tsx files are
  • Can they work together
  • Real-world usage
  • Benefits and drawbacks
  • Best practices

📌 Understanding File Types

Before understanding mixed usage, let’s quickly understand each file type.

🔹 What is .js?

.js means:

JavaScript file

Example:

function add(a, b) { 
  return a + b;
}

🔹 What is .tsx?

.tsx means:

TypeScript + JSX file

Used when:

  • Writing React components
  • Using TypeScript types

Example:

type Props = { 
     name: string;
};
function User({ name }: Props) {
     return <h1>{name}</h1>;
}

Can They Work Together?

YES ✅

You can absolutely use:

  • .js
  • .jsx
  • .ts
  • .tsx

inside the same React project.

Real-World Scenario

Many companies:

  • Start project in JavaScript
  • Slowly migrate to TypeScript

So they temporarily have:

src/ ├── App.tsx ├── Header.jsx ├── utils.js ├── api.ts └── Dashboard.tsx

👉 This is completely normal.

How Does It Work?

When using TypeScript in React:

👉 TypeScript compiler can understand JavaScript files too.

Important Configuration

In tsconfig.json:

{  
"compilerOptions": {    "allowJs": true  }
}

What Does allowJs Do?

"allowJs": true

👉 Allows TypeScript to compile .js files also.

Without this:

❌ TypeScript may ignore JS files.

Example Project Structure

Example

src/ ├── components/ │    ├── Button.tsx │    ├── Navbar.jsx │ ├── utils/ │    ├── math.js │    ├── api.ts │ └── App.tsx

👉 All these files can work together.

Importing Between JS and TSX

✅ Import JS into TSX

import add from "./utils/math";

✅ Import TSX Component

import Button from "./components/Button";

Why Developers Mix .js and .tsx

✅ 1. Gradual Migration

Big applications cannot migrate instantly.

So teams:

  • Convert slowly
  • File by file

✅ 2. Legacy Code Support

Old JavaScript files may still work perfectly.

✅ 3. Faster Development

Some utility files may remain simple .js.

Important Differences

Feature.js.tsx
Type Safety❌ No✅ Yes
IntelliSenseLimitedBetter
Compile Checks❌✅
React JSX Support✅✅

Benefits of Using .tsx

✅ Better Error Detection

TypeScript catches mistakes early.

✅ Strong Type Safety

type User = {  name: string; };

✅ Better Developer Experience

  • Auto suggestions
  • Safer refactoring
  • Better maintainability

Problems You May Face

❌ 1. Type Errors with JS Files

Sometimes TypeScript cannot understand JS structure properly.

❌ 2. Inconsistent Codebase

Mixing too many styles may confuse developers.

❌ 3. Any-Type Problems

JS files may reduce type safety.

Best Practice (Recommended)

✅ Recommended Approach

If possible:

👉 Gradually move toward TypeScript

🚀 Good Strategy

Step 1

Keep old files in JS.

Step 2

Write new components in TSX.

Step 3

Slowly migrate old files.

Example Migration

Old JS Component

function Button(props) {
     return <button>{props.title}</button>;
}

Migrated TSX Component

type Props = {  title: string;};
function Button({ title }: Props) {
    return <button>{title}</button>;
}

Important Note About .ts vs .tsx

ExtensionPurpose
.tsTypeScript without JSX
.tsxTypeScript with JSX

Interview Question

❓ Can we use .js and .tsx together in React?

👉 Answer:

Yes. React projects can use both JavaScript and TypeScript files together. TypeScript supports gradual migration using allowJs.

Final Summary

✔ .js and .tsx can work together
✔ Common in real-world migration projects
✔ Use allowJs: true in TypeScript config
✔ TSX provides better type safety
✔ Gradual migration is best practice

💡 Found this helpful? Subscribe for simple React and TypeScript guides with real-world examples. Happy Coding!

Type vs Interface in TypeScript: Complete Guide with Examples (Beginner to Advanced)

When working with TypeScript, one of the most common questions is:

🤔 Should I use type or interface?

Both are used to define the structure of data, but they behave differently in certain scenarios.

In this guide, you’ll learn:

  • What type and interface are
  • Key differences
  • All important scenarios with examples
  • When to use each (very important)

What is interface in TypeScript?

An interface is used to define the structure (shape) of an object.

Basic Example

interface User {
  name: string;
  age: number;
}
const user: User = {
  name: "Raju",
  age: 25,
};

What is type in TypeScript?

A type is more flexible and can define:

  • Objects
  • Primitives
  • Unions
  • Tuples
  • Functions

Basic Example

type User = {
  name: string;
  age: number;
};

👉 Works similar to interface for objects

Key Differences (Quick Overview)

Featureinterfacetype
Object structure✅ Yes✅ Yes
Union types❌ No✅ Yes
Intersection types⚠️ Limited✅ Yes
Declaration merging✅ Yes❌ No
FlexibilityMediumHigh

Scenario 1: Object Definition

👉 Both work the same

interface User {
  name: string;
}
type User = {
  name: string;
};

✅ No major difference here

Scenario 2: Declaration Merging (Important)

✅ interface supports merging

interface User {
  name: string;
}

interface User {
  age: number;
}

👉 Result:

{
  name: string;
  age: number;
}

❌ type does NOT support merging

type User = {
  name: string;
};

type User = {
  age: number;
}; // ❌ Error

Scenario 3: Union Types

✅ Using type

type Status = "success" | "error" | "loading";

❌ interface cannot do this

👉 Not supported

Scenario 4: Intersection Types

✅ Using type

type Person = {
  name: string;
};

type Employee = Person & {
  salary: number;
};

⚠️ interface alternative

interface Person {
  name: string;
}

interface Employee extends Person {
  salary: number;
}

Scenario 5: Functions

✅ Using type

type Add = (a: number, b: number) => number;

✅ Using interface

interface Add {
  (a: number, b: number): number;
}

Scenario 6: Extending / Inheritance

interface

interface Person {
  name: string;
}

interface Employee extends Person {
  salary: number;
}

type

type Person = {
  name: string;
};

type Employee = Person & {
  salary: number;
};

Scenario 7: Primitive Types

✅ Only type supports this

type ID = string | number;

👉 interface cannot do this ❌

Scenario 8: Tuples

type Point = [number, number];

👉 Only type supports tuples

Scenario 9: Working with Classes

interface (preferred)

interface User {
  name: string;
}

class Person implements User {
  name = "Raju";
}

When to Use interface

Use interface when:

  • Defining object structure
  • Working with classes
  • Need declaration merging
  • Building large applications

When to Use type

Use type when:

  • Using unions (|)
  • Using intersections (&)
  • Working with primitives
  • Advanced type logic

Best Practice (Very Important)

👉 Use both together:

type Status = "success" | "error";

interface ApiResponse {
  status: Status;
  data: string;
}

Common Mistakes

❌ Using interface for unions

interface Status = "success" | "error"; // ❌

❌ Overusing any

👉 Avoid losing type safety

❌ Confusion between both

👉 Use based on use case

Interview Tip

If asked:

“type vs interface?”

👉 Answer:

“Both define data shapes, but type is more flexible (supports unions, tuples), while interface supports declaration merging and is better for object-oriented design.”

Final Summary

  • Both define structure of data
  • interface → best for objects & classes
  • type → best for advanced types
  • Use both based on need
💡 Found this helpful? Subscribe to get simple TypeScript tutorials, interview questions, and real-world coding tips. Happy Coding!