web-dev-qa-db-fra.com

Typescript - Erreurs "Impossible de trouver le nom" dans les composants React

Je migre mon code React code vers TypeScript et je rencontre beaucoup de problèmes, l'un d'eux étant un grand nombre d'erreurs "Impossible de trouver le nom" lorsque je fais mon .js des dossiers .ts des dossiers.

Voici le code en question:

import React from 'react';

const Footer = ({ children, inModal }) => (
    <footer className={'tableBottomPanel' + (inModal ? " in-modal" : "") }>
        <div>
            {children}
        </div>
    </footer>
);

export default Footer;

Les cinq lignes de <footer> à </footer> sont soulignés en rouge et me donnent diverses erreurs, selon l'endroit où je passe la souris, telles que:

  • Impossible de trouver le nom "pied de page".
  • '>' attendu
  • Impossible de trouver le nom "div"
  • Littéral d'expression régulière non terminé
  • L'opérateur "<" ne peut pas être appliqué aux types "booléen" et "RegExp"

Voici mon tsconfig.json fichier:

{
    "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/"
    ]
}

Je suis incroyablement confus et apprécierais grandement de l'aide!

reactjstypescript
20
noblerare

J'ai également rencontré le même problème. Cela peut être dû à l'extension que vous utilisez car .ts ne permet pas d'y écrire du code JSX. Au lieu d'utiliser l'extension .ts, vous devez utiliser l'extension .tsx

0
Sachin