如何在 TypeScript 中使用无 typescript React 组件？答案

【问题标题】：How can I use no-typescript React component in TypeScript?如何在 TypeScript 中使用无 typescript React 组件？
【发布时间】：2019-06-27 17:22:06
【问题描述】：

我是 React 和 Typescript 的初学者。我在使用反应组件时遇到问题，例如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 元素类型“索引”不是 JSX 元素的构造函数。 “索引”类型中缺少属性“上下文”。

可以以某种方式导入无打字稿模块吗？

我的 Typescript 版本：3.2.4 我的 React 版本：16.7.0

提前谢谢

【问题讨论】：

通常对于非 ts 组件，作者或社区在 @types 存储库中创建 d.ts 文件。目前该组件不存在。您可以自己创建一个。也许结帐@types/react-toggle 以获得类似的示例。或者您可以尝试在组件的 repo 中提出问题，要求开发人员提供问题。
在你的 ts.config 中尝试 "allowJs": true
好的。我会尝试。谢谢

标签： javascript reactjs typescript components

【解决方案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 大声疾呼，让他们也提到这一点。

【讨论】：