反应打字稿打字不起作用

Posted 2023-03-13

【中文标题】反应打字稿打字不起作用

【英文标题】：React typescript typings not working

【发布时间】：2017-02-20 21:45:27

【问题描述】：

通过打字安装后，我在终端中收到以下错误

终端错误

error TS2320: Interface 'Element' cannot simultaneously extend types 'ReactElement<any>' and 'ReactElement<any>'.
  Named property 'type' of types 'ReactElement<any>' and 'ReactElement<any>' are not identical.

ERROR in /Users/ajvivek/Dev/ES6/motionize-code/typings/globals/react/index.d.ts
(2375,5): error TS1036: Statements are not allowed in ambient contexts.

ERROR in /Users/ajvivek/Dev/ES6/motionize-code/typings/globals/react-dom/index.d.ts
(69,5): error TS2309: An export assignment cannot be used in a module with other exported elements.

ERROR in /Users/ajvivek/Dev/ES6/motionize-code/node_modules/@types/react-dom/index.d.ts
(19,31): error TS2315: Type 'DOMAttributes' is not generic.

ERROR in /Users/ajvivek/Dev/ES6/motionize-code/node_modules/@types/react-dom/index.d.ts
(44,60): error TS2315: Type 'DOMAttributes' is not generic.

ERROR in /Users/ajvivek/Dev/ES6/motionize-code/node_modules/@types/react/index.d.ts
(2368,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'a' must be of type 'htmlProps<HTMLAnchorElement>', but here has type 'HTMLProps<HTMLAnchorElement>'.

ERROR in /Users/ajvivek/Dev/ES6/motionize-code/node_modules/@types/react/index.d.ts
(2369,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'abbr' must be of type 'HTMLProps<HTMLElement>', but here has type 'HTMLProps<HTMLElement>'.

index.d.ts /// <reference path="globals/react/index.d.ts" /> /// <reference path="globals/react-dom/index.d.ts" />

tsconfig.json

  "compilerOptions": 
    "module": "commonjs",
    "sourceMap": true,
    "noImplicitAny": true,
    "target": "es5",
    "jsx": "react"
  ,
  "files": [
    "./app/app.tsx",
    "./app/Hello.tsx",
    "typings/index.d.ts"
  ],
  "exclude": [
      "node_modules"
  ]

我已按照https://www.typescriptlang.org/docs/handbook/react-&-webpack.html中提供的文档进行操作

不确定我错过了什么？

有人遇到这个问题吗？

【问题讨论】：

为什么要排除“typings/index.d.ts”？这是所有类型的入口点，你也不需要指定文件部分，webpack 会自动搜索项目目录中的 .ts 和 .tsx 并编译它们

你总是可以使用样板的，只需 google react typescript 样板

您确定您完全按照教程进行操作吗？它不再使用打字，而您的 tsconfig.json 似乎使用打字。虽然它也是隐式的，但它旨在使用 TypeScript 2.0。 （你也不应该同时需要一个“文件”字段和一个“排除”字段 - 一个会被忽略）。

@DanielRosenwasser 之前使用了类型，所以坚持使用它。打字稿版本是 2.0.3。我已从排除中删除了打字稿文件。还是一样的问题

@abhirathore2006 目的是使用 webpack 构建具有一些自定义要求的样板

【参考方案1】：

我终于解决了这个问题。

我继续通过 tsd 安装类型一次，然后通过 typings 安装导致重复输入的类型。

删除了 @types 文件夹以解决我的问题。

【讨论】：

我进行了一些更改以使项目正常运行，您可以提供对 [e-mail] /abhirathore2006 的访问权限，以便我可以推送更改

@abhirathore2006 您可以签出 dev 分支并将 PR 从您的分支提高到 dev。任何帮助表示赞赏。干杯。

好的，但是我检查了你的 master 分支，你的实现完全不同，我将它设置为纯开发，我的 webpack 配置也不同

我已经删除了 types 文件夹并得到了`TS7026：JSX 元素隐式具有类型'any'，因为不存在接口'JSX.IntrinsicElements'。`

【参考方案2】：

以防万一其他人偶然发现此问题，当我的 @types/react 和 @types/react-dom 包之间不匹配时，我也会收到此错误。我最终只是删除了package.json 中的@types/react 条目，因为它自动包含在@types/react-dom 中。

【讨论】：

看克里斯托弗戴维斯。为我解决了问题！

这适用于我使用"@types/react-dom": "15.5.1",