网站搜索

reactjs - TypeScript 编译失败，因为 lib.dom.d.ts 和 react-native 之间存在重复的标识符

我正在尝试编写一个 React 组件（使用 TS），作为一个独立的包供我的另一个项目使用。目前，我使用安装在本地 NAS 上的 Verdaccio 来托管我的包，这部分运行良好。

我的问题是，当我尝试编译我的组件（其实很简单）时，TypeScript 会因为类型文件中的问题让我头疼。

我的组件只使用了 React 和 Styled-components，以及我的另一个包（它本身只使用 React 并且可以正确编译）。在 VS Code 中，我没有遇到任何错误或警告。

当我运行 tsc 时，我得到以下错误：

../../../../../.npm-global/lib/node_modules/typescript/lib/lib.dom.d.ts(5196,11): error TS2300: Duplicate identifier 'FormData'.
../../../../../.npm-global/lib/node_modules/typescript/lib/lib.dom.d.ts(5206,13): error TS2300: Duplicate identifier 'FormData'.
../../../../../.npm-global/lib/node_modules/typescript/lib/lib.dom.d.ts(16513,11): error TS2320: Interface 'Window' cannot simultaneously extend types 'GlobalFetch' and 'WindowOrWorkerGlobalScope'.
  Named property 'fetch' of types 'GlobalFetch' and 'WindowOrWorkerGlobalScope' are not identical.
../../../../../.npm-global/lib/node_modules/typescript/lib/lib.dom.d.ts(17406,13): error TS2451: Cannot redeclare block-scoped variable 'navigator'.
../../../../../.npm-global/lib/node_modules/typescript/lib/lib.dom.d.ts(17510,13): error TS2451: Cannot redeclare block-scoped variable 'console'.
../../../../../.npm-global/lib/node_modules/typescript/lib/lib.dom.d.ts(17819,6): error TS2300: Duplicate identifier 'RequestInfo'.
../../../../../.npm-global/lib/node_modules/typescript/lib/lib.dom.d.ts(17992,6): error TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.
node_modules/@types/react-native/globals.d.ts(36,15): error TS2300: Duplicate identifier 'FormData'.
node_modules/@types/react-native/globals.d.ts(81,5): error TS2717: Subsequent property declarations must have the same type.  Property 'body' must be of type 'string | ArrayBuffer | ArrayBufferView | Blob | FormData | URLSearchParams | ReadableStream<Uint8Array> | null | undefined', but here has type 'string | ArrayBuffer | DataView | Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array | Blob | FormData | null | undefined'.
node_modules/@types/react-native/globals.d.ts(107,14): error TS2300: Duplicate identifier 'RequestInfo'.
node_modules/@types/react-native/globals.d.ts(126,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'Response' must be of type '{ new (body?: string | ArrayBuffer | ArrayBufferView | Blob | FormData | URLSearchParams | ReadableStream<Uint8Array> | null | undefined, init?: ResponseInit | undefined): Response; prototype: Response; error(): Response; redirect(url: string, status?: number | undefined): Response; }', but here has type '{ new (body?: string | ArrayBuffer | DataView | Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array | Blob | FormData | null | undefined, init?: ResponseInit | undefined): Response; prototype: Response; error: () => Response; redirect: (url: ...'.
node_modules/@types/react-native/globals.d.ts(196,5): error TS2717: Subsequent property declarations must have the same type.  Property 'abort' must be of type 'ProgressEvent', but here has type 'Event'.
node_modules/@types/react-native/globals.d.ts(197,5): error TS2717: Subsequent property declarations must have the same type.  Property 'error' must be of type 'ProgressEvent', but here has type 'Event'.
node_modules/@types/react-native/globals.d.ts(198,5): error TS2717: Subsequent property declarations must have the same type.  Property 'load' must be of type 'ProgressEvent', but here has type 'Event'.
node_modules/@types/react-native/globals.d.ts(199,5): error TS2717: Subsequent property declarations must have the same type.  Property 'loadend' must be of type 'ProgressEvent', but here has type 'Event'.
node_modules/@types/react-native/globals.d.ts(200,5): error TS2717: Subsequent property declarations must have the same type.  Property 'loadstart' must be of type 'ProgressEvent', but here has type 'Event'.
node_modules/@types/react-native/globals.d.ts(201,5): error TS2717: Subsequent property declarations must have the same type.  Property 'progress' must be of type 'ProgressEvent', but here has type 'Event'.
node_modules/@types/react-native/globals.d.ts(202,5): error TS2717: Subsequent property declarations must have the same type.  Property 'timeout' must be of type 'ProgressEvent', but here has type 'Event'.
node_modules/@types/react-native/globals.d.ts(206,5): error TS2717: Subsequent property declarations must have the same type.  Property 'onabort' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) => any) | null', but here has type '((this: XMLHttpRequest, ev: Event) => any) | null'.
node_modules/@types/react-native/globals.d.ts(207,5): error TS2717: Subsequent property declarations must have the same type.  Property 'onerror' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) => any) | null', but here has type '((this: XMLHttpRequest, ev: Event) => any) | null'.
node_modules/@types/react-native/globals.d.ts(208,5): error TS2717: Subsequent property declarations must have the same type.  Property 'onload' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) => any) | null', but here has type '((this: XMLHttpRequest, ev: Event) => any) | null'.
node_modules/@types/react-native/globals.d.ts(209,5): error TS2717: Subsequent property declarations must have the same type.  Property 'onloadend' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) => any) | null', but here has type '((this: XMLHttpRequest, ev: Event) => any) | null'.
node_modules/@types/react-native/globals.d.ts(210,5): error TS2717: Subsequent property declarations must have the same type.  Property 'onloadstart' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) => any) | null', but here has type '((this: XMLHttpRequest, ev: Event) => any) | null'.
node_modules/@types/react-native/globals.d.ts(211,5): error TS2717: Subsequent property declarations must have the same type.  Property 'onprogress' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) => any) | null', but here has type '((this: XMLHttpRequest, ev: Event) => any) | null'.
node_modules/@types/react-native/globals.d.ts(212,5): error TS2717: Subsequent property declarations must have the same type.  Property 'ontimeout' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) => any) | null', but here has type '((this: XMLHttpRequest, ev: Event) => any) | null'.
node_modules/@types/react-native/globals.d.ts(243,6): error TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.
node_modules/@types/react-native/index.d.ts(3838,49): error TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
node_modules/@types/react-native/index.d.ts(3859,42): error TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
node_modules/@types/react-native/index.d.ts(9318,11): error TS2451: Cannot redeclare block-scoped variable 'console'.
node_modules/@types/react-native/index.d.ts(9326,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(9329,11): error TS2451: Cannot redeclare block-scoped variable 'navigator'.

这是我的 tsconfig.json：

{
  "compilerOptions": {
    "outDir": "./lib",
    "declaration": true,
    "target": "es5",
    "jsx": "react",
    "strict": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

以及我的 package.json:

{
  "name": "@hpi_components/card",
  "version": "1.0.4",
  "main": "./lib/index.js",
  "types": "./lib/index.d.ts",
  "publishConfig": {
    "registry": "http://10.0.0.102:32768"
  },
  "dependencies": {
    "@hpi_components/application_theme_context": "^1.0.8",
    "@types/react": "^16.8.3",
    "@types/styled-components": "^4.1.10",
    "react": "^16.8.2",
    "react-dom": "^16.8.2",
    "styled-components": "^4.1.3"
  }
}

我完全不知道为什么我有这些问题，尤其是不明白为什么会提到 React Native…

谢谢你的帮助！

答案＃1

查看这个帖子了解描述和可能的解决方案 https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33015

“这应该是一个 peerDependency” 对于几乎所有在 DT 中有相互依赖的包都是正确的 😭

* 版本是一个黑客手段。

无论如何，你可能可以通过在 tsconfig.json 中设置你的 compilerOptions.types 来在本地解决这个问题。将其设置为 []，或者 [‘node’]，或者仅设置为需要在不导入的情况下自动可用的类型列表。

相关文章