@types/react

  1. error TS2717: Subsequent property declarations must have the same type.  Property 'legend' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>'.
  2. error TS2717: Subsequent property declarations must have the same type.  Property 'li' must be of type 'DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>', but here has type 'DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>'.
  3. error TS2717: Subsequent property declarations must have the same type.  Property 'link' must be of type 'DetailedHTMLProps<LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement>', but here has type 'DetailedHTMLProps<LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement>'.
  4. error TS2717: Subsequent property declarations must have the same type.  Property 'main' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
  5. error TS2717: Subsequent property declarations must have the same type.  Property 'map' must be of type 'DetailedHTMLProps<MapHTMLAttributes<HTMLMapElement>, HTMLMapElement>', but here has type 'DetailedHTMLProps<MapHTMLAttributes<HTMLMapElement>, HTMLMapElement>'.
  6. error TS2717: Subsequent property declarations must have the same type.  Property 'mark' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
  7. error TS2717: Subsequent property declarations must have the same type.  Property 'menu' must be of type 'DetailedHTMLProps<MenuHTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<MenuHTMLAttributes<HTMLElement>, HTMLElement>'.
  8. //...

猜测出现了两个依赖版本不一致的问题，所以会出现这个错误，提示有两次重复的定义。

  1. npm ls @types/react
  1. └─┬ dumi@1.1.23
  2.   ├─┬ @umijs/preset-dumi@1.1.23
  3.   │ └─┬ @umijs/runtime@3.5.13
  4.   │   ├─┬ @types/react-router@5.1.12
  5.   │   │ └── @types/react@17.0.15  deduped
  6.   │   └─┬ @types/react-router-dom@5.1.7
  7.   │     ├── @types/react@17.0.15 
  8.   │     └─┬ @types/react-router@5.1.16
  9.   │       └── @types/react@17.0.15  deduped
  10.   └─┬ umi@3.5.13
  11.     └─┬ @umijs/preset-built-in@3.5.13
  12.       ├─┬ @types/react-router-config@5.0.2
  13.       │ └── @types/react@17.0.15  deduped
  14.       ├─┬ @umijs/renderer-mpa@3.5.13
  15.       │ ├── @types/react@16.14.11 
  16.       │ └─┬ @types/react-dom@16.9.14
  17.       │   └── @types/react@16.14.11 
  18.       └─┬ @umijs/renderer-react@3.5.13
  19.         ├── @types/react@16.14.11 
  20.         └─┬ @types/react-router-config@5.0.3
  21.           └── @types/react@17.0.15

这时候你需要改成同样的版本。去看看 yarn.lock 的表现。

  1. "@types/react@*":
  2.   version "17.0.15"
  3.   resolved "https://registry.nlark.com/@types/react/download/@types/react-17.0.15.tgz?cache=0&sync_timestamp=1627124654713&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Freact%2Fdownload%2F%40types%2Freact-17.0.15.tgz#c7533dc38025677e312606502df7656a6ea626d0"
  4.   integrity sha1-x1M9w4AlZ34xJgZQLfdlam6mJtA=
  5.   dependencies:
  6.     "@types/prop-types" "*"
  7.     "@types/scheduler" "*"
  8.     csstype "^3.0.2"
  10.  "@types/react@^16", "@types/react@^16.9.43":
  11.   version "16.14.11"
  12.   resolved "https://registry.nlark.com/@types/react/download/@types/react-16.14.11.tgz?cache=0&sync_timestamp=1627124654713&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Freact%2Fdownload%2F%40types%2Freact-16.14.11.tgz#992a0cd4b66b9f27315042b5d96e976717368f04"
  13.   integrity sha1-mSoM1LZrnycxUEK12W6XZxc2jwQ=
  14.   dependencies:
  15.     "@types/prop-types" "*"
  16.     "@types/scheduler" "*"
  17.     csstype "^3.0.2"

可以看到有一个依赖是*，所以安装了最新的版本，将 version，resolved，integrity 的都改成下面的 16.14.11 的版本即可。再试一下，发现报错没有了。

ResizeObserverEntry

  1. error TS2717: Subsequent property declarations must have the same type.  Property 'contentRect' must be of type 'DOMRectReadOnly', but here has type 'DOMRectReadOnly'.

搜索了一下所有的 node_modules ，发现resize-observer-polyfill 和 typescript 下都有关于contentRect 的声明。

在项目根目录的 TS 配置文件 tsconfig.json 中新增 skipLibCheck 属性。

  1. {
  2.   "compilerOptions": {
  3.          //....
  4.     "skipLibCheck": true   <---- 增加该配置
  5.   }
  6. }

这个问题相当于绕过去了，有网友提出了一个比较绝的方法，就是通过脚本去直接注释。详情