如何在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 。 由於您已經將所有內容都導入到單個變量中，因此您不能再導入特定內容。