如果您知道如何解决问题,请改为发出拉取请求。
[x] 我尝试使用@types/styled-components
包并遇到问题,因为自 v.4.1.9 以来添加了另一个冲突的依赖项(@types/react-native)并与 @types/node 冲突。 查看提交
[x] 我尝试使用 tsc 的最新稳定版本 (3.3.3333)。 https://www.npmjs.com/package/typescript
[x] [提及](https://github.com/blog/821-mention-somebody-they-re-notified) 作者(见Definitions by:
中的index.d.ts
)所以他们可以回应。
通过命令全新安装反应应用程序yarn create react-app my-app-ts --scripts-version=react-scripts-ts
yarn add styled-components
yarn add -D @types/styled-components
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {ThemeProvider} from "styled-components";
import App from './App';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<ThemeProvider theme={{}}>
<App />
</ThemeProvider>,
document.getElementById('root') as HTMLElement
);
registerServiceWorker();
yarn start
根据与lib.dom冲突的许多定义,有很多失败
同样在这里
为什么要添加@types/react-native? 我有一个 react web 项目,为什么我必须安装我不使用的类型?
通过手动设置 compilerOptions.types 修复
{
"compilerOptions": {
...
"types": ["react", "jest"]
}
...
}
我也有同样的问题。
同样的问题在这里。
由于我的项目中有多个类型定义,因此我将@types/styled-components
依赖项设置为以前的版本。
我认为将类型显式添加到tsconfig.json
是一个糟糕的解决方案。
对于 web 和 native,最好将styled-components
的类型分开。
我有这个 FormData 的问题,我使用typescript: 3.3.333
这里是我的package.json
和tsconfig.json
包 JSON
"dependencies": {
"@material-ui/core": "^3.9.2",
"@types/react-loadable": "^5.5.0",
"@types/react-router-dom": "^4.3.1",
"prettier": "^1.16.4",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-loadable": "^5.5.0",
"react-router-dom": "^5.0.0",
"react-scripts-ts": "3.1.0",
"styled-components": "^4.1.3"
},
"devDependencies": {
"@types/jest": "^24.0.11",
"@types/node": "^11.11.3",
"@types/react": "^16.8.8",
"@types/react-dom": "^16.8.2",
"@types/styled-components": "^4.1.12",
"eslint": "5.3.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-plugin-import": "^2.14.0",
"typescript": "^3.3.3333"
}
TCONFIG JSON
{
"compilerOptions": {
"baseUrl": ".",
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"importHelpers": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"esModuleInterop": true,
"types": ["styled-components", "react", "react-dom", "jest"]
},
"exclude": [
"node_modules",
"build",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts"
]
}
我也有同样的问题。 幸运的是,我能够通过将@types/styled-components
的版本锁定为4.1.8
同样在这里,我不得不回滚到以前的版本,或者添加一个安装后脚本以从 node_modules 中删除 react-native
如果默认情况下依赖项与 dom 库发生冲突,您甚至应该如何在 Web 上使用样式组件?!
疯了吧!
我有同样的问题,我还注意到并非所有作者都收到了通知。 缺少这两个: @eps1lon @flavordaaave
@ArthurBrito谢谢,作者名单已更新。
这个问题也发生在我身上。 @types/react-native 不应成为 Web 项目中的依赖项。 这些类型应该分开
将版本固定到 4.1.8 对我有用
这里有解决这个问题的公关吗? 奇怪的是你不能在 web 项目中使用样式组件。
遇到了同样的问题,确实是关于@types/styled-component
。
my-app git:(master) ✗ npm ls @types/react-native
[email protected] /Users/devniel/dev/electron/my-app
└─┬ @types/[email protected]
└── @types/[email protected]
该问题有任何更新吗?
创建一个.yarnclean
文件,内容如下:
@types/react-native
解决问题🎉
半年了,这个问题还是没有更新?
真的没更新???
我认为,最好的解决方案是让 @types/react-native 成为对等依赖,但据我所知types-publisher
目前不支持这些。 请其中一位维护者验证我实际上是对的并且 peerDep 是一个解决方案吗? 如果我们准备好的话,我可能会在周末花一些时间为 types-publisher 添加 peerDep 支持。
我认为,最好的解决方案是让 @types/react-native 成为对等依赖
嗯,如果@types/react-native
是对等 dep,我需要将其声明为依赖项,以便在非 React Native 项目中使用@types/styled-components
。 那并不理想。
理想情况下,非 React Native 项目不需要@types/react-native
; 而且我特别不应该_declare_它作为依赖项。
你的意思是让它成为一个 optionalDependency 吗?
@paulmelnikow ,是的,你说得对,我把两者混淆了。 您仍然不需要将@types/react-native
为依赖项来使用@types/styled-components
,但是您会收到一个讨厌的警告,所以 optionalDeps 是一个更好的解决方案,当然。 types-publisher
也不支持它们,我会尝试研究一下
降级到 "@types/styled-components": "4.0.0" 解决了这个问题。
不,它不能解决。 它扫除地毯下的问题
不,它不能解决。 它扫除地毯下的问题
让我们说它再次编译? ;-)
创建一个
.yarnclean
文件,内容如下:@types/react-native
解决问题🎉
有与 npm 等效的吗?
在这个问题上有什么进展吗?
它使样式组件无法与打字稿一起使用。
深入研究此 repo 的实际代码,您可以清楚地看到@types/react-native
仅在 React Native 集成的实际.d.ts
和测试文件中才需要。 我认为更合适的解决方案是将与 React Native 相关的任何内容拆分为它自己的子模块/可选/对等依赖项,与styled-components
实际工作方式的行为一致,您导入styled-components/native
如果你想要 React Native 的东西。 您不会导入styled-components
并在运行时获取整个 React Native 内容丛林,因此仅导入styled-components
我不应该同时获取整个@types/react-native
丛林
我认为与此同时,应该从这个包的 NPM 发布版本中删除 react-native 集成,并作为它自己的包发布。 就目前而言,这令人尴尬地被破坏了,并使整个 TypeScript 看起来很糟糕
请解决这个问题。 尽快取出本机类型。 这使得原本出色的打字项目几乎无法使用。
深入研究此 repo 的实际代码,您可以清楚地看到
@types/react-native
仅在 React Native 集成的实际.d.ts
和测试文件中才需要。 我认为更合适的解决方案是将与 React Native 相关的任何内容拆分为它自己的子模块/可选/对等依赖项,与styled-components
实际工作方式的行为一致,您导入styled-components/native
如果你想要 React Native 的东西。 您不会导入styled-components
并在运行时获取整个 React Native 内容丛林,因此仅导入styled-components
我不应该同时获取整个@types/react-native
丛林
👍
我认为与此同时,应该从这个包的 NPM 发布版本中删除 react-native 集成,并作为它自己的包发布。
我认为这可能是一个解决方案,但也想知道是否有办法将它们放在同一个包中,就像#32843 的主旨一样,而不会导致这个问题。
只是一个友好的说明,要解决此问题的最佳方法是挖掘并打开带有解决方案的 PR,或者找到专门投资于 Styled Components 可以修复的人。
肯定类型为包社区提供了很棒的服务,这里有维护人员,尽管他们的工作不是维护所有类型。 在这个项目(或 TypeScript)上动摇你的拳头无济于事。
我转向情感
它们包括自己的打字稿定义,并具有完全相同的界面,因此迁移很容易找到并替换所有内容。
此外,捆绑包的大小要小一些。
我们如何恢复#32843 中引入的更改,因为它破坏了超过 90% 的用户的类型并迫使他们使用过时的版本或本线程中提到的一些黑客。
我们如何恢复#32843 中引入的更改,因为它破坏了超过 90% 的用户的类型并迫使他们使用过时的版本或本线程中提到的一些黑客。
如果它使打字对绝大多数用户更好地工作,那可能是一个合理的解决方案。 我不确定 PR 是否会获得批准,但如果您认为这是最好的解决方案,请随时进行 PR。
我认为,如果要完成此还原,则应该在包中添加一些注释,说明之后如何使其与 react-native 一起使用。 我还没有尝试过,但是对于本机用户来说,使用declare module
声明将删除的类型复制并粘贴到他们的项目中并让事情继续工作可能是可能的。 尽管显然必须让本机用户这样做是一种耻辱。
尽管 tbh,我希望 TypeScript 团队能够提供有关如何处理此类问题的任何官方指导,因为似乎有人最终在所有解决方案中“失败”。
IMO,这应该恢复 - 主要是因为 Web 样式的组件生态系统更大。
我不再知道它是如何工作的所有细节,但过去对于 React Native,你会通过使用不同的路径获得一组不同的类型,这对我来说似乎是一个很好的妥协。 嗯,看来这就是带来的。 说回吧。
我想知道是否可能有一种方法可以让人们通过三重斜杠导入导入一个环境模块,该模块添加了 react-native 特定类型?
+1 在这里,但不仅仅是抱怨,如果有我想参与的行动计划并帮助解决这个问题。
我来到这里,在一些评论中加上我的加一。 意识到我已经这样做了......上次我遇到这个问题。
这就是为什么我恳求其他库维护者保留他们的类型。 它强制库根据它们的类型进行内联更新。 我喜欢 def typed 在很多方面帮助社区,但是当 lib 维护者有能力自己输入它(甚至在 ts 中重写)时,它会让世界变得更安全。
我也对这个问题保持冷静和冷静,因为我能够通过本地克隆解决这个问题,但我认为世界各地的人们已经受够了这个问题(超过 6 个月)。 我希望修复这个关键和严重的问题,并允许非技术精通打字稿用户重新加入。
是否有任何等待批准的 PR? 我是否应该更改一行代码以删除无效的react-native
全局依赖项(就像我在私有 npm 存储库中所做的那样)?
另外,是否有应该安装react-native
并与全局命名空间冲突的原因? 请加入并分享您的想法。 (但我想知道那些无意破坏我们工作的人是否会读到这个问题,因为他们会很高兴,因为他们应该对我们的损害一无所知。我不能说我从来没有站在这种情况的另一端前。)
此外,其他软件包如何处理此类问题? 我对此一无所知,所以有点犹豫要不要制作一个_“简单”_ PR 来解决这个问题。
虽然我认为应该恢复此更改,但我们无需启用skipLibCheck
即可完成此工作: https :
我认为恢复此更改不是一个好的选择。 很多人需要为 react-native 打字,我们应该修复导致错误的事情,而不是删除所有的 react-native 打字。
如果目前没有解决方案? 我们至少应该为非本地用户提供一个版本,因为它目前已经完全崩溃并且已经有一段时间了,我敢于猜测非本地用户也占大多数。
有任何更新吗?
@dawick需要输入react-native
可以手动安装它们。
为什么他们需要?
我认为恢复此更改不是一个好的选择。 很多人需要为 react-native 打字,我们应该修复导致错误的事情,而不是删除所有的 react-native 打字。
需要为react-native
打字的人应该通过安装@types/react-native
来获得它们。
我仍然强烈认为与react-native
相关的所有内容都应该从@types/styled-components
删除并移动到不同的包/路径,例如@types/styled-components/native
以与人们的实际情况保持一致使用styled-components
; 想要react-native
支持的人通过使用import styled from 'styled-components/native'
明确获得它,你不会通过在网络中执行import styled from 'styled-components'
来获得所有react-native
丛林的全部项目,因此关联的@types/
包的行为不应有任何不同
我在周末尝试以更系统的方式解决这个问题,这适用于任何包装 web + react native 类型的仓库。 https://github.com/microsoft/types-publisher/pull/655
这个怎么没解决。。。
严重地? 还是没有修复?
@givethemheller @sanex3339在https://github.com/microsoft/types-publisher/pull/655的工作和讨论中有一个修复
作为临时解决方案,只需从 node_modules 中删除@types/react-native
:
rm -rf node_modules/@types/react-native
并将其添加到.yarnclean
@types/react-native
随着 TypeScript 3.7 的发布,我们现在发现自己处于 3.7 用户_被迫_升级他们的类型定义的情况,因为以前工作的 v4.1.8 现在与 TS 3.7 不兼容,但唯一与 TS 3.7 兼容的版本完全坏了对于每个 React-web 开发人员(肯定是绝大多数)。 😕
.yarnclean
解决方法对于那些使用 Yarn 的人来说可能就足够了,Yarn 比所有人都少。 修改compilerOptions
根本不是一个可扩展的长期解决方案。
我不知道这里的最佳解决方案是什么。 作为权宜之计,我绝对赞成发布一个单独的版本,专门排除react-native
事情。
作为非纱线用户,您可以通过将其添加到您的 npm 脚本来解决它:
"postinstall": "rm -rf node_modules/@types/react-native"
将导致 NPM 在安装它们后立即删除本机类型。 对于甚至不应该成为问题的问题仍然是一个hacky解决方法,但它有效。
也在这里添加我自己。 我们需要一个解决方案,比编辑大量安装后脚本更好......
这个问题基本上影响了样式组件的所有打字稿用户一年多(!!!)。
我们是否有任何官方解决方案(不包括 .yarnclean 的黑客攻击)? 有没有拦截器?
我想把它分成两个包(或者可能是三个,一个基本的,包含用于 react-native 和 react 的通用内容,一个用于 React,另一个用于 RN,让后者使用第一个和通用的东西)会成为处理这个问题的最简单和最快的方法。
我非常愿意提供帮助,如果我们只是缺乏贡献者,我只是希望可以更轻松地将样式组件和打字稿一起使用,而不必修改周围的东西😄
我只是想让它更容易一起使用样式组件和打字稿,而不必修改周围的东西 😄
撞! 必须有更好的类型定义实现...
我从 node_modules 中删除了@types/react-native
,但仍然出现相同的错误。 为什么即使是黑客?
@ArnaudJeannin如果您手动删除它,每次运行npm i
/ yarn
时都会重新添加它
要通过安装使删除持久化,请按照我之前的评论通过 NPM postinstall
删除它,或者如果您使用 Yarn 将其添加到.yarnclean
应该可以正常工作。
我所做的并不适合所有人,但我通过从 styled-components 切换到emotion来“解决”了这个问题。 我对任何一个库的使用都非常基本——只是用 CSS 包装组件并继承样式——但我发现 Emotion 有一个与样式组件类似的 API,用于我需要的功能。 这是一个轻松的过渡。 6 个月后,到目前为止,我还没有遇到任何重大问题。 Emotion 包括内置的 TS 类型,因此@types
没有不同步的问题。
如上所述,切换 CSS 库不适用于许多项目,但对我而言,切换比解决样式组件 TS 问题更容易。 天啊。
yarn
用户的更简单的解决方法,这将让您使用当前版本的样式组件。 在 package.json 中:
"resolutions": {
"@types/react-native": "link:./empty-package"
},
设置一个作为上述解决方案目标的什么都不做的包:
mkdir empty-package
cd empty-pacakge
yarn init -y
touch index.d.ts
为我工作。
@arimah @GabrielDuarteM ,你能解释一下你的反对意见吗? 你试过这个,发现它不起作用吗? 请发表评论,以便我可以提供帮助,如果是这样,其他人可能会受益。 这似乎比目前唯一可用的其他解决方法(删除类型模块的安装后脚本)的侵入性小得多。 或者,如果我没有意识到这种解决方法有一些强烈的负面影响,我想修改或删除评论。
@jamietre我相信downvotes是虽然这可能有效,但这不是正确的解决方案,并且不会改变类型需要拆分(或者可能是对等依赖项)以用于react-native的事实
@jamietre我相信downvotes是虽然这可能有效,但这不是正确的解决方案,并且不会改变类型需要拆分(或者可能是对等依赖项)以用于react-native的事实
没有意识到变通方法不受欢迎。 在等待真正的修复时,我总是发现它们非常有帮助。 这个问题已经存在一年多了。 工作还需要完成。 🤷♂
@jamietre我认为只是您将其定义为“解决方案”,但事实并非如此,并且将其构建为这样的框架可能会让维护者认为这仍然不是影响大多数用户的荒谬问题。
@jamietre我认为只是您将其定义为“解决方案”,但事实并非如此,并且将其构建为这样的框架可能会让维护者认为这仍然不是影响大多数用户的荒谬问题。
将“解决方案”更改为“解决方法”......实际上我只是想帮助人们能够使用带有打字稿的样式组件。 否决票意味着它不起作用。 争论语义似乎没有帮助,但可以肯定。
在Appsome Solutions 中,我们遇到了同样的问题,我们在 tsconfig.json 文件中使用"skipLibCheck": true,
规则解决了它。
@pumanitro像许多其他建议一样,不幸的是,这不是解决方案,而只是一种解决方法。
@SamHH已更改单词已解决以变通。
这就是在 CRA 中使用 typescript 完成的方式,但您说得对,这不是解决方案。 尽管如此,它仍然可以帮助人们。
从https://github.com/DefinitelyTyped/DefinitelyTyped/pull/32843#issuecomment -605921101 转发我的评论
解决方法是在您的tsconfig.json
中有一个compilerOptions.types
数组,它会阻止打字稿在类型检查时自动读取每个@types/*
包。 Typescript 只会自动导入types
数组中命名的包类型; 例如, "types": ["node"]
(如果您使用buffer
或path
等内置模块加载@types/node
), "types": ["node", "jest"]
(如果您重新编写玩笑测试); 甚至只是"types": []
以防止打字稿自动加载任何未直接导入的包或/// <reference types="..." />
来自您的代码。
我真的不能说拥有@types/styled-components-native
是否会更好; 这至少是不寻常的,并且可能不需要compilerOptions.types
“解决方法”,但是 IMO 将compilerOptions.types
为仅需要自动加载其类型的包(没有import
s) 是最佳实践。
总而言之,问题是 TypeScript 会自动加载@types/react-native
类型,尽管您根本没有直接或间接引用它们,因为默认行为是加载所有@types/*
包。 设置compilerOptions.types
可防止该默认值并仅加载您列出的软件包 + 您import
的软件包。
我不敢相信这仍然是一个问题! 去年夏天遇到了这个问题,我刚刚更新了这个包,因为我认为从那时起这会被修复😠
谁是 @types/styled-components 的维护者? 因为我们需要一个新人
@Jessidhia与compilerOptions.types
提议对我有用。 非常感谢! 我也认为这是最佳实践。 到目前为止,我没有遇到任何缺点。 我可以想象它也更快。
@sbusch的缺点是,如果您使用compilerOptions.types
您的所有类型都需要在此处列出,因为此列表中未包含的任何内容都将被排除在外。 因此,对于已安装的提供类型的软件包,您需要手动管理此配置
是的,在 types 中列出所有类型不是一种选择。
如果你从模块中导入一些东西,你仍然会得到 TypeScript 类型。 types
选项用于自动导入全局声明的类型。 这不是经常需要的,因此手动将这些模块添加到types
应该不会太糟糕。 我是这样理解的。 在将types
数组设置为[]
之后,我们具有非常严格的 TS 设置的相当大的 TS 代码库仍然有效。
缺点是如果您使用
compilerOptions.types
您的所有类型都需要在此处列出,因为此列表中未包含的任何内容都将被排除。 因此,对于已安装的提供类型的软件包,您需要手动管理此配置
正如@sbush所说,这不是真的。 该选项仅适用于全局类型, import
ed libs 的类型将毫无问题地使用。 @Jessidhia的提议是无害的。
我不认为一个单一的包装应该迫使消费者打破惯例,即不理会该领域。 与其他所有事情一样,这不是解决方案,而是一种变通方法。
🙏🏻 @types/styled-components": "4.1.8"
🙏🏻
如果您使用 yarn monorepos,@ nahumzs提出的解决方案是可行的。 在这种情况下,我们防止 react-native 污染全局 node_packages 文件夹,防止重复从而引发错误。
我们在什么时候才说 React Web 用户比 React Native 用户多,并去掉 React Native 支持?
在这个问题上有任何进展吗? 我们目前使用的是@types/styled-components 的 4.1.8 版本,因为我们无法在没有解决方案的情况下进行更新或使用变通方法,例如在 npm post install 命令中删除 node_modules/@types/react-native。
Oh f**k,这个问题真的让我很痛苦。
现在我遇到了这里描述的问题。 所以,如果我升级到更新的 Typescript,我什@types/[email protected]
不能使用
无论如何,这似乎是https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33015的副本
在Appsome Solutions 中,我们遇到了同样的问题,我们在 tsconfig.json 文件中使用
"skipLibCheck": true,
规则解决了它。
如果有人有同样的感觉:我不想启用skipLibCheck
只是为了解决这个问题。 但是现在我改变了主意,因为最近的更改为新的 TypeScript 项目启用了skipLibCheck
- 显然是出于性能原因,但也可以想象也是因为我们在这里看到的问题。
也许有人可以通过非常肮脏的黑客攻击,您可以添加到您的package.json
脚本部分:
"postinstall": "rm -rf node_modules/@types/react-native"
不是一个很好的解决方案,但这应该有效。
OMG,这个问题即使对于 5.1.1 仍然存在
1- 在项目根目录中添加.yarnclean
。
2- 插入以下内容: @types/react-native
。
至少在我等待官方解决方案时,这里解决了这个问题。
这种情况已经持续了 1.5 年以上。 无论如何,我认为我的问题是相关的,并且我收到了更多“重复标识符”错误。 共 36 个。
配置文件
{
"compilerOptions": {
"allowJs": true,
"baseUrl": ".",
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react",
"module": "CommonJS",
"moduleResolution": "Node",
"noEmit": true,
"sourceMap": true,
"target": "ES6"
},
"include": [
"src/**/*"
],
}
使用tsc
编译的结果:
总计:38 个错误。 其中只有 2 个来自我的实际项目源src/**.*
文件。 其他 36 个错误来自由.d.ts
引起的@types/styled-components
.d.ts
冲突。
注意:如果我添加"skipLibCheck": true
标志,错误就会消失。 此外,如果我删除@types/styled-components
,错误也消失了。
我不会在这里发布完整的日志,但这里有一些例子。
error TS2300: Duplicate identifier 'AbortController'.
../../../AppData/Roaming/npm/node_modules/typescript/lib/lib.dom.d.ts:1939:11
../../../AppData/Roaming/npm/node_modules/typescript/lib/lib.dom.d.ts:1950:13
node_modules/@types/react-native/globals.d.ts:363:15
error TS2300: Duplicate identifier 'AbortSignal'.
../../../AppData/Roaming/npm/node_modules/typescript/lib/lib.dom.d.ts:1960:11
node_modules/@types/react-native/globals.d.ts:350:15
../../../AppData/Roaming/npm/node_modules/typescript/lib/lib.dom.d.ts:1972:13
error TS2300: Duplicate identifier 'FormData'.
../../../AppData/Roaming/npm/node_modules/typescript/lib/lib.dom.d.ts:5548:11
node_modules/@types/react-native/globals.d.ts:40:15
../../../AppData/Roaming/npm/node_modules/typescript/lib/lib.dom.d.ts:5558:13
error TS2300: Duplicate identifier 'URL'.
error TS2300: Duplicate identifier 'URLSearchParams'.
error TS2300: Duplicate identifier 'RequestInfo'.
error TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.
error TS2717: Subsequent property declarations must have the same type. Property 'body'
must be of type 'string | ArrayBuffer | ArrayBufferView | Blob | FormData | URLSearchParams | ReadableStream<Uint8Array> | null | undefined',
but here has type 'string | ArrayBuffer | DataView | Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | ... 8 more ... | undefined'.
error TS2717: Subsequent property declarations must have the same type. Property 'signal' must be of type 'AbortSignal | null | undefined', but here has type 'AbortSignal | undefined'.
error TS2300: Duplicate identifier 'RequestInfo'.
我此时采用的解决方案是删除@types/styled-components
并继续我的项目(这是一个 React Web 应用程序)。
最有用的评论
通过手动设置 compilerOptions.types 修复