J'ai les instructions import suivantes en utilisant Typescript :

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

Typescript se plaint que je devrais combiner ces importations multiples. J'ai essayé ce qui suit, mais ce MouseEvent importé est différent :

import MouseEvent, * as React from 'react'

Dans cette déclaration d'importation combinée, le MouseEvent est différent de celui importé via import { MouseEvent } from 'react'.

Pour une raison quelconque, Typescript reconnaît que le MouseEvent dans import { MouseEvent } from 'react' accepte les types génériques, mais pas le MouseEvent dans import MouseEvent, * as React from 'react'.

Comment puis-je combiner les instructions d'importation tout en conservant le MouseEvent qui a des génériques ?

0
Carven 18 mars 2019 à 21:12

2 réponses

Meilleure réponse

TypeScript ne peut pas se plaindre de ces instructions d'importation car elles sont correctes. C'est TSLint qui peut s'en plaindre et provoquer une erreur.

Il n'y a aucun moyen de les raccourcir à une seule ligne. Une façon courante de procéder consiste à utiliser l'exportation par défaut que React fournit également :

import React, { MouseEvent } from 'react'

Un inconvénient est que le package est entièrement importé dans le bundle et ne peut pas utiliser le secouage des arbres.

Un moyen sûr de le faire est :

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

Si cela provoque une erreur TSLint, la règle respective doit être désactivée.

3
Estus Flask 18 mars 2019 à 22:00

Lorsque vous utilisez import * as React from 'react', vous importez l'ensemble du module dans une seule variable appelée React. Par conséquent, vous pouvez accéder à MouseEvent via l'espace de noms React : React.MouseEvent. Comme vous avez déjà tout importé dans une seule variable, vous ne pouvez pas importer quelque chose de spécifique en plus.

1
christianost 18 mars 2019 à 18:17