使用 Typescript 2.8 React Native - 无法重新声明块范围变量“控制台" [英] React Native with Typescript 2.8 - Cannot redeclare block-scoped variable 'console'

问题描述

使用 Typescript 创建了一个 react-native 入门项目，该项目可以在 2 周前运行.现在，当我尝试运行该项目时，它会在打字稿编译期间出错.

Created a react-native starter project with Typescript which could run 2 weeks ago. Now when I try to run the project it gives error during the typescript compilation.

在 tsconfig.json 中使用 skipLibraryCheck: true 修复了错误.但是为什么它会从 ~/.nvm 和 ./node_modules 目录中抛出错误?

Using skipLibraryCheck: true in tsconfig.json fixes the error. But why is it throwing errors from ~/.nvm and ./node_modules directories?

错误(针对 node_modules/.bin/tsc 更新):

Error (Updated for 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'.

项目详情:

❯ 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

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

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

推荐答案

我真的不能告诉你时不时发生了什么破坏了打字的事情，我只能给出提示......

I can't really tell you what went through now and then which broke the typings, I can mostly give hints...

• 当您从终端调用 tsc 时，它将使用打字稿的全局版本，包括其核心类型，这是您收到.nvm"错误的地方.建议您使用本地版本 (node_modules/.bin/tsc).
• 我建议您尝试添加moduleResolution: node".我不知道为什么，试试吧，也许它可以解决一些问题.
• 我不确定 redux-thunk 类型是否能与新的 redux@4.x 一起正常工作.可能是您错误的根源.

• When you call tsc from the terminal, it will use the global version of typescript, including its core typings, this is from where you are getting the ".nvm" errors. It is recommended that you use a local version (node_modules/.bin/tsc).
• I suggest you try adding "moduleResolution: node". I don't know why, just try it, maybe it fixes something.
• I'm not sure redux-thunk typings properly work with the new redux@4.x. Might be the source of your errors.

我通常只打开skibLibCheck"，我们永远不知道什么时候编写库时考虑到了旧版本的 TS，甚至没有考虑到严格"标志.

I usually just leave "skibLibCheck" on, we never know when libs were written with older versions of TS in mind, or even without the "strict" flag in mind.

从评论中编辑

• 似乎 react-native 添加了他自己版本的基本 javascript 类型，因此您可以通过 lib 标志禁用 TS 禁止的类型，因此它们不会发生冲突.

• Seems react-native adds his own version of the base javascript typings, so you can disable the ones probided by TS through the lib flag, so they don't conflict.

这篇关于使用 Typescript 2.8 React Native - 无法重新声明块范围变量“控制台"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！