Estoy migrando mi código React existente a TypeScript y tengo muchos problemas, uno de ellos es un montón de errores "No se puede encontrar el nombre" cuando creo mis archivos .js en archivos .ts .
Aquí está el código en cuestión:
import React from 'react'; const Footer = ({ children, inModal }) => ( <footer className={'tableBottomPanel' + (inModal ? " in-modal" : "") }> <div> {children} </div> </footer> ); export default Footer; Las cinco líneas de <footer> a </footer> están subrayadas en rojo y me dan varios errores, dependiendo de dónde desplace el mouse, como:
Aquí está mi archivo tsconfig.json :
{ "compilerOptions": { "outDir": "./dist/", // path to output directory "sourceMap": true, // allow sourcemap support "strictNullChecks": true, // enable strict null checks as a best practice "module": "es6", // specify module code generation "jsx": "react", // use typescript to transpile jsx to js "target": "es5", // specify ECMAScript target version "allowJs": true, // allow a partial TypeScript and JavaScript codebase "moduleResolution": "node", "allowSyntheticDefaultImports": true, "lib": [ "es6", "dom" ], "types": [ "node" ] }, "include": [ "./src/" ] }¡Estoy increíblemente confundido y agradecería mucho alguna ayuda!
Typescript no espera ver JSX en su archivo Typescript. La forma más fácil de resolver esto es cambiar el nombre de su archivo de .ts a .tsx .
También me he encontrado con el mismo problema. Esto puede deberse a la extensión que usa, ya que .ts no permite escribir código JSX en él. En lugar de usar la extensión .ts, debe usar la extensión .tsx
Tuve este error en un archivo sin extensión. Era simplemente un nombre de filename sin extensiones, por lo que VSCode asumió que era TS. Cuando cambié el nombre de mi archivo a filename.js , el error desapareció.
Sin embargo, si desea que el archivo esté en mecanografiado y no quiere el error, la respuesta aceptada ( filename.tsx ) es el enfoque correcto.