web-dev-qa-db-fra.com

React Native avec TypeScript 2.8 - Impossible de redéclarer la variable de type console 'console'

Création d'un projet de démarrage réactif natif avec TypeScript pouvant s'exécuter il y a 2 semaines. Maintenant, lorsque j'essaie d'exécuter le projet, une erreur est générée lors de la compilation TypeScript. 

L'utilisation de skipLibraryCheck: true dans tsconfig.json corrige l'erreur. Mais pourquoi génère-t-il des erreurs dans les répertoires ~/.nvm et ./node_modules? 

Error (Mise à jour pour node_modules/.bin/tsc):

>  node_modules/.bin/tsc
node_modules/@types/react-native/index.d.ts(8742,11): error TS2451: Cannot redeclare block-scoped variable 'console'.
node_modules/@types/react-native/index.d.ts(8750,18): error TS2717: Subsequent property declarations must have the same type.  Property 'geolocation' must be of type 'Geolocation', but here has type 'GeolocationStatic'.
node_modules/@types/react-native/index.d.ts(8753,11): error TS2451: Cannot redeclare block-scoped variable 'navigator'.
node_modules/redux-thunk/index.d.ts(4,47): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux-thunk/index.d.ts(8,20): error TS2428: All declarations of 'Dispatch' must have identical type parameters.
node_modules/redux/index.d.ts(115,18): error TS2428: All declarations of 'Dispatch' must have identical type parameters.
node_modules/redux/index.d.ts(161,13): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux/index.d.ts(283,42): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux/index.d.ts(283,53): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux/index.d.ts(302,66): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux/index.d.ts(302,77): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux/index.d.ts(303,38): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux/index.d.ts(384,95): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux/index.d.ts(389,33): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux/index.d.ts(391,106): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux/index.d.ts(396,34): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/TypeScript/lib/lib.es6.d.ts(21612,13): error TS2451: Cannot redeclare block-scoped variable 'navigator'.
node_modules/TypeScript/lib/lib.es6.d.ts(21788,13): error TS2451: Cannot redeclare block-scoped variable 'console'.

Détails du projet: 

❯ react-native info
  Environment:
  OS: macOS High Sierra 10.13.4
  Node: 9.11.1
  Yarn: 1.6.0
  npm: 6.0.0
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 2.3 AI-162.3934792

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.3 => 0.55.3

package.json

{
  "name": "hello-world-rn",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "build": "npm run clean && npm run tsc --",
    "clean": "rimraf lib",
    "lint": "tslint src/**/*.ts",
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "native-base": "2.4.3",
    "react-native": "0.55.3",
    "react-redux": "5.0.7",
    "redux": "4.0.0",
    "redux-thunk": "2.2.0"
  },
  "devDependencies": {
    "@types/jest": "22.2.3",
    "@types/react": "16.3.13",
    "@types/react-native": "0.55.8",
    "@types/react-redux": "5.0.19",
    "@types/react-test-renderer": "16.0.1",
    "babel-core": "6.26.3",
    "babel-jest": "22.4.3",
    "babel-preset-react-native": "4.0.0",
    "concurrently": "3.5.1",
    "eslint": "4.19.1",
    "jest": "22.4.3",
    "react": "16.3.1",
    "react-test-renderer": "^16.3.0-alpha.1",
    "rimraf": "2.6.2",
    "tslint": "5.9.1",
    "tslint-config-prettier": "1.12.0",
    "tslint-eslint-rules": "5.1.0",
    "tslint-react": "3.5.1",
    "TypeScript": "2.8.3"
  },
  "jest": {
    "preset": "react-native",
    "testRegex": "lib/.+\\.(test|spec).js$",
    "coverageDirectory": "coverage",
    "coverageReporters": [
      "text-summary",
      "html"
    ]
  },
  "collectCoverageFrom": [
    "lib/**/*.js",
    "!lib/**/*.spec.js",
    "!lib/**/*.index.js"
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "jsx": "react-native",
    "sourceMap": true,
    "outDir": "./lib",
    "strict": true,
    "types": ["react", "react-native", "jest"],
    "esModuleInterop": true,
    "skipLibCheck": false
  },
  "compileOnSave": false,
  "exclude": ["./Android/*", "./ios/*", "./lib/*", "./node_modules/*"],
  "filesGlob": ["typings/index.d.ts", "src/**/*.ts", "src/**/*.tsx"],
  "types": ["react", "react-native", "jest"]
}
typescriptreact-native
10
Sugesh

Je ne peux pas vraiment vous dire ce qui s'est passé de temps en temps et qui a cassé les dactylographes, je peux surtout donner des indices ...

  • Lorsque vous appelez tsc à partir du terminal, il utilisera la version globale de TypeScript, y compris ses typages principaux, d'où vous obtenez les erreurs ".nvm". Il est recommandé d'utiliser une version locale (node_modules/.bin/tsc).
  • Je vous suggère d’ajouter "moduleResolution: node". Je ne sais pas pourquoi, essayez-le, peut-être que ça corrige quelque chose.
  • Je ne suis pas sûr que les saisies de redux-thunk fonctionnent correctement avec le nouveau [email protected]. Peut-être la source de vos erreurs.

Habituellement, je laisse simplement "skibLibCheck" activé, nous ne savons jamais quand les bibliothèques ont été écrites avec les anciennes versions de TS en tête, ni même sans l'indicateur "strict".

EDIT DE COMMENTAIRES

  • Semble react-native ajoute sa propre version des saisies javascript de base. Vous pouvez ainsi désactiver celles qui sont vérifiées par TS via l'indicateur lib afin qu'elles ne soient pas en conflit.
4
wkrueger

Je suis tombé sur le type "doit être de type 'Géolocalisation'". Nous essayons toujours de comprendre comment résoudre ce problème, mais dans @ types/react-native, la géolocalisation est définie comme un alias de GeolocationStatic, mais la géolocalisation est également un type TypeScript, et il doit s'agir du type TypeScript, et non des types/type de réaction natif. Il semble que le seul endroit dans @ types/react-native/index.d.ts l'alias de géolocalisation utilisé soit

interface Navigator {
    readonly product: string;
    readonly geolocation: Geolocation;
}

La géolocalisation est attribuée

export var Geolocation: GeolocationStatic;
export type Geolocation = GeolocationStatic;

Commenter ces gars après avoir exécuté npm install le fait fonctionner. Je le mets dans un script npm postinstall powershell.

Oui, oui, c'est hacky, et je suis convaincu qu'il existe une solution simple et efficace à ce problème. Mais si vous voulez simplement que cela fonctionne et que vous n’en dépendiez pas ailleurs, cela pourrait fonctionner. Une autre solution potentielle serait simplement de les renommer. 

Est-ce que c'est la recommandation officielle pour le moment? Je dois aimer les corrections de hacky! https://github.com/DefinitelyTyped/DefinitelyTyped/issues/24573

1
Grey Haven

Si quelqu'un d'autre tombe sur cette question en utilisant react-native et react-native-TypeScript-transformer:

Vous pouvez obtenir le même problème lorsque vous utilisez react-native-TypeScript-transformer et noEmit, étant donné que la déclaration de type globale react-native/index.d.ts est en conflit avec TypeScript/lib/lib.es6.d.ts.

Extrait du numéro sur github :

... définir les typages de base ES6 avec l'option lib semble être suffisant pour résoudre ce problème ...

... l'option noEmit requise par le transformateur reactScript-TypeScript qui est à l'origine de ce problème.

Solution

Spécifiez dans tsconfig.json les fichiers de bibliothèque valides à inclure dans la compilation. React Native est construit sur ES6, donc ce serait suffisant: "lib": [ "es6" ] dans votre package.json.

0
lucascaro