如果我在我的项目中添加@types/styled组件,我的构建输出中会出现一系列错误:

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

这个问题可以通过向tsconfig中添加type属性中的确切类型来解决.json:

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

但这个解决方案在我看来并不好.还有别的办法吗?

推荐答案

Update 21/12/2020

将样式化组件/本机类型移出@types/styled components,并放入其自己的包中(@types/styled components react native).如果有人想使用styled components/native,他们需要做的就是安装@types/styled components react native,它会自动增加styled components类型(因为TypeScript会自动包含任何已安装的@types包).

这使得主导出(即从"样式化组件"导入样式)可以开箱即用(这是最常见的用法).为了获得样式化组件/本机,您只需安装另一个@types包,这比在tsconfig中设置类型更容易.json.

(从拉取请求复制的解决方案)

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

Old

我也遇到了同样的问题,我解决了将@types/styled组件降级到4.1.8的问题.

你可以通过:npm i @types/styled-components@4.1.8 --save-dev --save-exact

这个问题已经有一年多的时间了,你能找到的只是一些解决办法.

关于这个问题,@types/styled组件似乎需要@types/react native,这导致了DOM库的问题.这意味着,如果您在web上使用react,您将因为react-native 类型与DOM库发生冲突.如果您使用的是React Native,则无需降级.Try those below if you don't want to downgrade:

对于NPM个用户,一个可能的解决方案mentioned in Github是添加:

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

package.json中,在安装类型后删除它们.

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

@types/react-native

如前所述.

你可以在Github上的issue中找到更多信息.

Typescript相关问答推荐

如何为ViewContainerRef加载的Angular组件实现CanDeactivate保护?

在NextJS中获得Spotify Oauth,但不工作'

类型{}上不存在属性&STORE&A;-MobX&A;REACT&A;TYPE脚本

React重定向参数

如何使用WebStorm调试NextJS的TypeScrip服务器端代码?

如何使默认导出与CommonJS兼容

如何避免推断空数组

如何编写在返回函数上分配了属性的类型安全泛型闭包

是否可以强制静态方法将同一类型的对象返回其自己的类?

在正常函数内部调用异步函数

Angular 16将独立组件作为对话框加载,而不进行布线或预加载

将布尔值附加到每个对象特性

回调函数中的TypeScrip类型保护返回Incorect类型保护(具有其他未定义类型的返回保护类型)

如何使用警告实现`RecursiveReadonly<;T>;`,如果`T`是原语,则返回`T`而不是`RecursiveReadonly<;T>;`

为什么受歧视的unions 在一种情况下运作良好,但在另一种非常类似的情况下却不起作用?

TypeScript中的这些条件类型映射方法之间有什么区别?

如何通过nx找到所有受影响的项目?

TS2532:对象可能未定义

当受其他参数限制时,通用参数类型不会缩小

从接口推断模板参数?