如何在 TypeScript 中使用 no-typescript React 组件？

Question

我是 React 和 Typescript 的初学者。 我在使用 React 组件时遇到问题，例如在打字稿中使用https://www.npmjs.com/package/react-toggle-button 。

我通过 Visual Studio 生成类型。

顺便说一句， import ToggleButton from 'react-toggle-button'; 错误 :/ClientApp/types/react-toggle-button"' 没有默认导出。

所以，我以这种方式导入：

import * as ToggleButton from 'react-toggle-button';


 <ToggleButton
                        value={this.state.influencer.billingVATPayer || false}
                        onChange={(e: any) => { console.log(e) }}
                    />

我的错误：(TS) JSX 元素类型“index”不是 JSX 元素的构造函数。 “索引”类型中缺少属性“上下文”。

可以以某种方式导入 no-typescript 模块吗？

我的打字稿版本：3.2.4 我的 React 版本：16.7.0

提前谢谢

Answer 1

有时，包有一个“@types/”版本你可以安装，而不是包含你需要/想要导入的项目类型的普通版本（例如https://www.npmjs.com/package/@types/react ）。 如果这不是一种选择，您可以：

A) 创建您自己的 .d.ts 文件并为您尝试导入的包创建您自己的类型，如提到的@hazardous 。

或者你可以

B) 编辑您的 tsconfig.json 文件并添加属性"allowJs"并将其设置为true ，这允许将 JS 文件导入到 Typescript 文件中，而不会出现 linter 或编译器的抱怨。 这对于正在过渡到 Typescript 并且无法立即将所有文件/组件转换为 Typescript 的大型代码库（甚至是小型代码库）特别有用。 也向@Juraj Kocan 大喊大叫，因为他也提到了这一点。