草庐IT

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

coder 2024-05-11 原文

如果我在我的项目中添加@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/

styled-componentsjavascriptreact39node_modulesreactjstypescript

有关javascript - @types/styled-components 重复标识符 FormData的更多相关文章

  1. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  2. ruby-on-rails - Rails 单表继承 : How to override the value written to the type field - 2

    在我的系统中，我已经定义了STI。Dog继承自Animal，在animals表中有一个type列，其值为"Dog"。现在我想让SpecialDog继承自dog，只是为了在某些特殊情况下稍微修改一下行为。数据还是一样。我需要通过SpecialDog运行的所有查询，以返回数据库中类型为Dog的值。我的问题是因为我有一个type列，rails将WHERE"animals"."type"IN('SpecialDog')附加到我的查询中，所以我不能获取原始的Dog条目。所以我想要的是以某种方式覆盖rails在通过SpecialDog访问数据库时使用的值，使其表现得像Dog。有没有办法覆盖用于类型

  3. ruby-on-rails - 如何从过时的 TZInfo 标识符中获取 Rails TimeZone 名称？ - 2

    已经有一个问题回答了如何将“America/Los_Angeles”转换为“PacificTime(US&Canada)”。但是我想将“美国/太平洋”和其他过时的时区转换为RailsTimeZone。我无法在图书馆中找到任何可以帮助我完成此任务的东西。 最佳答案 来自RailsActiveSupport::TimeZonedocs:TheversionofTZInfobundledwithActiveSupportonlyincludesthedefinitionsnecessarytosupportthezonesdefinedb

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby-on-rails - 为什么方法 column_types 在 Rails 5.0 中未定义？ - 2

    我正在为一个类赋值，它在rspec测试中使用了column_types方法。it"Userdatabasestructureinplace"doexpect(User.column_names).toinclude"password_digest","username"expect(User.column_types["username"].type).toeq:stringexpect(User.column_types["password_digest"].type).toeq:stringexpect(User.column_types["created_at"].type).t

  6. ruby - 正则表达式 - 保存重复捕获的组 - 2

    这就是我做的a="%span.rockets#diamonds.ribbons.forever"a=a.match(/(^\%\w+)([\.|\#]\w+)+/)putsa.inspect这是我得到的#这就是我想要的#帮助？我尝试过但失败了:( 最佳答案 通常，您不能获得任意数量的捕获组，但如果您使用扫描，您可以为您想要捕获的每个标记获得一个匹配:a="%span.rockets#diamonds.ribbons.forever"a=a.scan(/^%\w+|\G[.|#]\w+/)putsa.inspect["%span","

  7. ruby - Formtastic，拥有 :as input type - 2

    如何将自己的字段类型添加到formtastic中？例如，我需要一个自定义的日期时间输入，我想要这样的东西::my_date%>这显然是行不通的，因为formtastic不知道:my_date(只有:boolean、:string、:datetime等等...)但是我怎样才能添加额外的输入类型呢？ 最佳答案 您需要添加自定义输入法:classMyCustomFormtasticFormBuilder这非常适合新的HTML5输入类型。你可以这样使用它:MyCustomFormtasticFormBuilderdo|f|%>:my_dat

  8. ruby - 如何从 nokogiri 对象获取标识符(例如 xpath)？ - 2

    遍历nokogiri并使用xpath选择元素相当容易。我需要这个反之亦然，意思是:我需要例如在nokogiri节点上调用.to_xpath以获取元素的完整xpath以将其存储在记录中。有人知道这样做的方法吗？ 最佳答案 我能想到的最简单的方法是:Nokogiri::CSS.xpath_fornode.css_path编辑:您也可以尝试使用path方法。 关于ruby-如何从nokogiri对象获取标识符(例如xpath)？，我们在StackOverflow上找到一个类似的问题：

  9. ruby-on-rails - 我可以用鸭子类型(duck typing)改进这种方法吗？ - 2

    希望我没有误解“ducktyping”的含义，但从我读到的内容来看，这意味着我应该根据对象如何响应方法而不是它是什么类型/类来编写代码。代码如下:defconvert_hash(hash)ifhash.keys.all?{|k|k.is_a?(Integer)}returnhashelsifhash.keys.all?{|k|k.is_a?(Property)}new_hash={}hash.each_pair{|k,v|new_hash[k.id]=v}returnnew_hashelseraise"CustomattributekeysshouldbeID'sorPropertyo

  10. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

随机推荐