如何在 Typescript 中将 import 语句与 import all 语句结合起来？答案

【问题标题】：How to combine import statements with an import all statement in Typescript?如何在 Typescript 中将 import 语句与 import all 语句结合起来？
【发布时间】：2019-08-09 04:35:51
【问题描述】：

我有以下使用 Typescript 的 import 语句：

import * as React from 'react';
import { MouseEvent } from 'react'

Typescript 抱怨我应该合并这些多个导入。我尝试了以下方法，但导入的 MouseEvent 不同：

import MouseEvent, * as React from 'react'

在此组合导入语句中，MouseEvent 与通过import { MouseEvent } from 'react' 导入的不同。

出于某种原因，Typescript 识别出 import { MouseEvent } from 'react' 中的 MouseEvent 接受类型泛型，但 import MouseEvent, * as React from 'react' 中的 MouseEvent 不接受。

如何在保留具有泛型的MouseEvent 的同时合并导入语句？

【问题讨论】：

请不要描述错误信息，但要准确引用。它将帮助其他读者找到这个问题。我很肯定这不是 TypeScript 而是 TSLint 错误。

标签： javascript reactjs typescript import

【解决方案1】：

TypeScript 不能抱怨这些 import 语句，因为它们是正确的。正是 TSLint 可以抱怨它们并导致错误。

没有办法将它们缩短为一行。一种常见的方法是使用 React 还提供的默认导出：

import React, { MouseEvent } from 'react'

一个缺点是包被完全导入到包中，不能使用摇树。

一个安全的方法是：

import * as React from 'react';
import { MouseEvent } from 'react'

如果这导致 TSLint 错误，则需要禁用相应的规则。

【讨论】：

【解决方案2】：

当您使用import * as React from 'react' 时，您将整个模块导入到一个名为React 的变量中。因此，您可以通过React 命名空间：React.MouseEvent 访问MouseEvent。由于您已经将所有内容导入到单个变量中，因此您无法再导入特定的内容。

【讨论】：