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

Question

I've the following import statements using Typescript:

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

Typescript complains that I should combine these multiple imports. I've tried the following, but that MouseEvent being imported is different:

import MouseEvent, * as React from 'react'

In this combined import statement, the MouseEvent is different from the one imported through import { MouseEvent } from 'react' .

For some reason, Typescript recognises that the MouseEvent in import { MouseEvent } from 'react' accepts type generics but the MouseEvent in import MouseEvent, * as React from 'react' doesn't.

How can I combine the import statements while still keeping the MouseEvent which has generics?

Answer 1

TypeScript cannot complain about these import statements because they are correct. It is TSLint that can complain about them and cause an error.

There's no way to shorten them to one line. A common way to do this is to use default export that React also provides:

import React, { MouseEvent } from 'react'

A downside is that the package is imported entirely into the bundle and cannot make use of tree shaking.

A safe way to do this is:

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

In case this causes TSLint error, respective rule needs to be disabled.

Answer 2

When you're using import * as React from 'react' , you import the whole module into a single variable called React . Therefore, you can access MouseEvent via the React namespace: React.MouseEvent . As you have already imported everything into a single variable, you can't import something specific in addition.