打破编译的单个给定库的多个声明文件

Question

使用TypeScript和React Transition Group处理React项目时，由于TypeScript为React编写了两个不同的定义文件，我得到了编译错误。

已安装模块的部分列表：

• react
• react-dom
• react-transition-group
• @types/react
• @types/react-dom
• @types/react-transition-group

问题：

我导入<Transition />组件，如下所示：import Transition from 'react-transition-group/Transition';。 TypeScript抱怨，说JSX element type 'Transition' is not a constructor function for JSX elements.

这是完整的错误： [ts] JSX element type 'Transition' is not a constructor function for JSX elements. [ts] JSX element type 'Transition' is not a constructor function for JSX elements. Types of property 'render' are incompatible. Type '() => string | number | false | Element | Element[] | null' is not assignable to type '{ (): false | Element | null; (): string | number | false | Element | Element[] | null; (): strin...'. Type 'string | number | false | Element | Element[] | null' is not assignable to type 'false | Element | null'. Type 'string' is not assignable to type 'false | Element | null'.

我的猜测

我的组件的import * as React from 'react'和<Transition />组件的import { Component } from 'react'没有针对相同版本的React声明文件而导致冲突。

是否有办法强制TypeScript对任何给定的React导入使用特定的声明文件？

Answer 1

  

是否有办法强制TypeScript对任何给定的React导入使用特定的声明文件？

所有反应组件应该不 @types/react为dependency。它应该只是devDependency。这是正确的解决方案。