如果我在我的项目中添加@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"
]
},
...
}
但我觉得这个解决方案不太好。还有其他解决办法吗?
最佳答案
更新 21/12/2020
将 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 包,这仍然比必须设置类型更容易:[] in tsconfig.json。
(从拉取请求中复制的解决方案)
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
这个问题仍然存在超过 1 年,您会发现一些解决方法。
关于这个问题,@types/styled-components 似乎需要@types/react-native,这会导致 DOM 库出现问题。这意味着如果你在网络上使用 React,你将会因为 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 .
您可以在此 issue 中找到更多信息在 Github 上。
关于javascript - @types/styled-components 重复标识符 FormData,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54706594/