web-dev-qa-db-ja.com

@ types / styled-components重複する識別子FormData

プロジェクトに@ 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が追加されますが、これは私の反応アプリといくつかの衝突があります。

次の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"
    ]
  },
  ...
}

しかし、このソリューションは私にはよく見えません。他の修正はありますか？

javascriptreactjstypescriptstyled-components
20
Dmitry Maksakov

npm + Yarnユーザー：

  1. 削除node_modules/@types/react-native
  2. 依存関係を削除"@types/react-native": "*" in node_modules/@types/styled-components/package.json
  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)

問題：

0
ford04