如何在Typescript中将import语句与import all语句组合？

Question

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

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

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

import MouseEvent, * as React from 'react'

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

出于某种原因，打字稿认识到MouseEvent在import { MouseEvent } from 'react'接受类型仿制药，但MouseEvent在import MouseEvent, * as React from 'react'不。

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

Answer 1

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

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

import React, { MouseEvent } from 'react'

不利的一面是，该包装已完全导入捆绑包中，无法利用摇树的作用。

一种安全的方法是：

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

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

Answer 2

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