Reactjs 使用TypeScript进行反应-如何导入方法

在React with TypeScript中，我收集您使用

import*作为React从'React'导入

例如，如果我想使用
useState
和
Fragment
，我知道我可以使用
React.useState
和
React.Fragment
。但是，是否有任何方法可以分解导入中的内容？我知道没有打字稿你会

import react，{useState，Fragment}来自“react”

你需要做两次导入吗，比如

import * as React from 'react';
import { useState, Fragment } from 'react';

还是会把这些东西导入两次？似乎也有点笨重。
将这些选项添加到您的
tsconfig.json
：

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        ...
    },
    ...
}

然后你可以做：

import React, { Fragment } from 'react';

从TypeScript 2.7开始，您可以在.tsconfig文件中打开
esModuleInterop
，以便使导入像在普通JavaScript中一样工作。出于向后兼容性的原因，默认情况下禁用此选项，但

我们强烈建议将其应用于新项目和现有项目

我不认为两者都需要-只要
esModuleInterop
可以用于较新版本的TypeScript。据我所知，
allowSyntheticDefaultImports
只是禁用了错误（迫使您依赖模块加载器/绑定器来发出兼容代码），而
esModuleInterop
即使您仅使用TypeScript也可以工作。啊哈，我刚才查看了-显然
esModuleInterop
隐式启用了
allowSyntheticDefaultImports
。因此，您不需要指定它，但这样做也不会有什么坏处：）这是一个很好的提示，谢谢Joe