@types/styled-components 重复标识符 FormData

Question

如果我在我的项目中添加@types/styled-components，我会在构建输出中出现一堆错误：

ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(36,15):
TS2300: Duplicate identifier 'FormData'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(81,5):
TS2717: Subsequent property declarations must have the same type.  Property 'body' must be of type 'BodyInit', but here has type 'string | ArrayBuffer | DataView | Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array | Blob | FormData'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(107,14):
TS2300: Duplicate identifier 'RequestInfo'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(126,13):
TS2403: Subsequent variable declarations must have the same type.  Variable 'Response' must be of type '{ new (body?: BodyInit, init?: ResponseInit): Response; prototype: Response; error(): Response; redirect(url: string, status?: number): Response; }', but here has type '{ new (body?: string | ArrayBuffer | DataView | Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array | Blob | FormData, init?: ResponseInit): Response; prototype: Response; error: () => Response; redirect: (url: string, status?: number) => Res...'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(196,5):
TS2717: Subsequent property declarations must have the same type.  Property 'abort' must be of type 'ProgressEvent', but here has type 'Event'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(197,5):
TS2717: Subsequent property declarations must have the same type.  Property 'error' must be of type 'ProgressEvent', but here has type 'Event'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(198,5):
TS2717: Subsequent property declarations must have the same type.  Property 'load' must be of type 'ProgressEvent', but here has type 'Event'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(199,5):
TS2717: Subsequent property declarations must have the same type.  Property 'loadend' must be of type 'ProgressEvent', but here has type 'Event'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(200,5):
TS2717: Subsequent property declarations must have the same type.  Property 'loadstart' must be of type 'ProgressEvent', but here has type 'Event'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(201,5):
TS2717: Subsequent property declarations must have the same type.  Property 'progress' must be of type 'ProgressEvent', but here has type 'Event'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(202,5):
TS2717: Subsequent property declarations must have the same type.  Property 'timeout' must be of type 'ProgressEvent', but here has type 'Event'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(206,5):
TS2717: Subsequent property declarations must have the same type.  Property 'onabort' must be of type '(this: XMLHttpRequest, ev: ProgressEvent) => any', but here has type '(this: XMLHttpRequest, ev: Event) => any'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(207,5):
TS2717: Subsequent property declarations must have the same type.  Property 'onerror' must be of type '(this: XMLHttpRequest, ev: ProgressEvent) => any', but here has type '(this: XMLHttpRequest, ev: Event) => any'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(208,5):
TS2717: Subsequent property declarations must have the same type.  Property 'onload' must be of type '(this: XMLHttpRequest, ev: ProgressEvent) => any', but here has type '(this: XMLHttpRequest, ev: Event) => any'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(209,5):
TS2717: Subsequent property declarations must have the same type.  Property 'onloadend' must be of type '(this: XMLHttpRequest, ev: ProgressEvent) => any', but here has type '(this: XMLHttpRequest, ev: Event) => any'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(210,5):
TS2717: Subsequent property declarations must have the same type.  Property 'onloadstart' must be of type '(this: XMLHttpRequest, ev: ProgressEvent) => any', but here has type '(this: XMLHttpRequest, ev: Event) => any'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(211,5):
TS2717: Subsequent property declarations must have the same type.  Property 'onprogress' must be of type '(this: XMLHttpRequest, ev: ProgressEvent) => any', but here has type '(this: XMLHttpRequest, ev: Event) => any'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(212,5):
TS2717: Subsequent property declarations must have the same type.  Property 'ontimeout' must be of type '(this: XMLHttpRequest, ev: ProgressEvent) => any', but here has type '(this: XMLHttpRequest, ev: Event) => any'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(243,6):
TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/index.d.ts(9297,14):
TS2300: Duplicate identifier 'require'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/index.d.ts(9315,11):
TS2451: Cannot redeclare block-scoped variable 'console'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/index.d.ts(9323,18):
TS2717: Subsequent property declarations must have the same type.  Property 'geolocation' must be of type 'Geolocation', but here has type 'GeolocationStatic'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/index.d.ts(9326,11):
TS2451: Cannot redeclare block-scoped variable 'navigator'.
  ERROR in /Users/me/projects/react/node_modules/@types/webpack-env/index.d.ts(203,13):
TS2300: Duplicate identifier 'require'.
  ERROR in /Users/me/projects/react/node_modules/typescript/lib/lib.dom.d.ts(5196,11):
TS2300: Duplicate identifier 'FormData'.
  ERROR in /Users/me/projects/react/node_modules/typescript/lib/lib.dom.d.ts(5206,13):
TS2300: Duplicate identifier 'FormData'.
  ERROR in /Users/me/projects/react/node_modules/typescript/lib/lib.dom.d.ts(16513,11):
TS2320: Interface 'Window' cannot simultaneously extend types 'GlobalFetch' and 'WindowOrWorkerGlobalScope'.
  Named property 'fetch' of types 'GlobalFetch' and 'WindowOrWorkerGlobalScope' are not identical.
  ERROR in /Users/me/projects/react/node_modules/typescript/lib/lib.dom.d.ts(17406,13):
TS2451: Cannot redeclare block-scoped variable 'navigator'.
  ERROR in /Users/me/projects/react/node_modules/typescript/lib/lib.dom.d.ts(17510,13):
TS2451: Cannot redeclare block-scoped variable 'console'.
  ERROR in /Users/me/projects/react/node_modules/typescript/lib/lib.dom.d.ts(17819,6):
TS2300: Duplicate identifier 'RequestInfo'.
  ERROR in /Users/me/projects/react/node_modules/typescript/lib/lib.dom.d.ts(17992,6):
TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.

由于某种原因，它添加了 @types/react-native，这与我的 react 应用有一些冲突。

我有下一个tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "outDir": "./production/",
    "sourceMap": true,
    "noImplicitAny": true,
    "lib": ["esnext", "dom"],
    "resolveJsonModule": true
  },
  "include": [
    "./src/**/*"
  ]
}

问题可以通过将 type 属性中的确切类型添加到 tsconfig.json 中来解决：

{
  "compilerOptions": {
    ...
    "types": [
      "jest",
      "jest-diff",
      "react",
      "react-dom",
      "react-intl",
      "react-redux",
      "react-router-dom",
      "webpack-env",
      "styled-components"
    ]
  },
  ...
}

但是这个解决方案对我来说并不好看。还有其他解决办法吗？

Answer 1

我也遇到过这个。只需从最新版本的@types/styled-components 降级即可。 4.0.3（没有 ^），它似乎可以解决问题。

（发现一堆其他人过去使用 @types/node 引用了类似的错误，这提供了类似的解决方案）。

Answer 2

2020 年 12 月 21 日更新

将 styled-components/native 类型从 @types/styled-components 中移出并放入它自己的包 (@types/styled-components-react-native)。如果有人想使用 styled-components/native，他们需要做的就是安装 @types/styled-components-react-native，它会自动增加 styled-components 类型（因为 TypeScript 自动包含任何已安装的 @types 包）。

这使得主导出（即，从 'styled-components' 导入样式）可以开箱即用（这是最常见的用法）。为了获得 styled-components/native，您需要做的就是安装另一个 @types 包，这仍然比在 tsconfig.json 中设置 types: [] 更容易。

（从拉取请求复制的解决方案）

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/49914

旧

我遇到了同样的问题，我解决了将 @types/styled-components 降级到 4.1.8 的问题。

您可以通过以下方式实现此目的：npm i @types/styled-components@4.1.8 --save-dev --save-exact

这个问题仍然存在一年多，你会发现一些解决方法。

关于这个问题，@types/styled-components 似乎需要@types/react-native，这导致 DOM lib 出现问题。这意味着如果你使用 react for web 你会因为 DOM lib 的 react-native 类型而发生冲突。如果您使用的是 React-Native，则无需降级。如果您不想降级，请尝试以下方法：

对于 NPM 用户，一个可能的解决方法 mentioned in Github 正在添加：

"postinstall": "rm -rf node_modules/@types/react-native"

在您的 package.json 中删除安装后的类型。

对于 yarn 用户，您可以创建一个 .yarnclean 文件并添加以下内容：

@types/react-native

如上所述here。

您可以在 Github 上的 issue 中找到更多信息。

Answer 3

在tsconfig.json 文件中将"skipLibCheck": true 添加到compilerOptions 为我解决了这个问题。该解决方案来自另一个由较新的create-react-app 创建的项目。

注意："skipLibCheck": true 跳过所有声明文件 ( *.d.ts ) 的类型检查。

Answer 4

Arthur Brito 描述的解决方案是有效的，但如果您愿意：

1. 使用最新版本
2. 并使用yarn of @types/styled-components

考虑

1. 从node_modules 中删除
2. 并将@types/styled-components 添加到.yarnclean

如建议here

Answer 5

npm + Yarn 用户：

1. 删除node_modules/@types/react-native
2. 在node_modules/@types/styled-components/package.json 中删除依赖关系"@types/react-native": "*"
3. 删除dist（outDir文件夹从tsconfig.json）

---

(1) 将删除重复的全局类型。 (2) 将防止@types/react-native 被重新安装。 (3) 对我来说也是必要的。其他解决方案不能满足我的所有要求：

- use latest styled-components packages (+ TS 3.7 compatible)
- can be used with npm
- does not commit hack to VCS
- manually setting "types" in tsconfig.json isn't scalable
- --skipLibCheck creates weak types (it omits all `.d.ts` files type checks)

问题：

• DefinitelyTyped #1
• DefinitelyTyped #2
• Allow using dev dependencies in a package json