React js typescript not working in sub folders

Question

I am using typescript with react js. Typescript is working when creating tsx files in src folder. But whenever I am using tsx in a sub folder like ex. components folder typescript is not working.

tsconfig.json:

{"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" }, "include": ["src"] }

Can you try adding "baseUrl": "src" to the tsconfig.json file and try it. — Batuhan Zorbey Zengin, Jul 13 '22 at 06:10
Nothing changed after adding baseUrl. Still getting "Type annotations can only be used in TypeScript files" error in vscode whenever using type annotations in tsx files in sub folder. — Ariyan Ashfaque, Jul 13 '22 at 06:19
Can you review this resource? https://stackoverflow.com/questions/48859169/error-types-can-only-be-used-in-a-ts-file-visual-studio-code-using-ts-che — Batuhan Zorbey Zengin, Jul 13 '22 at 06:22

score 0 · Answer 1 · answered Jul 13 '22 at 06:08

look at newly generated tsconfig using

for web

npx create-react-app my-app --template typescript

for react native

npx react-native init MyApp --template react-native-template-typescript

check the dir on your top imports, when using vscode, there's also an auto suggestion feature when you type component name

Hope it helps

React js typescript not working in sub folders

1 Answers1