Tag: .tsx

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!