React with TypeScript - 如何导入方法答案

【问题标题】：React with TypeScript - how to import methodsReact with TypeScript - 如何导入方法
【发布时间】：2019-02-13 15:58:29
【问题描述】：

在 React with TypeScript 中，我收集到您使用 import * as React from 'react'; 导入。

例如，如果我想使用useState 和Fragment，我知道我可以使用React.useState 和React.Fragment。但是，有什么方法可以解构导入中的那些？我知道没有 TypeScript 你会这样做......

import react, { useState, Fragment } from 'react';

您是否必须进行两次导入，例如....

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

或者那会导入两次？看起来也有点笨重。

【问题讨论】：

【解决方案1】：

从 TypeScript 2.7 开始，您可以在 .tsconfig 文件中打开 esModuleInterop，以便像在普通 JavaScript 中一样进行导入。出于向后兼容性的原因，默认情况下禁用此功能，但 release notes 说：

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

【讨论】：

【解决方案2】：

将这些选项添加到您的tsconfig.json：

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

然后你可以这样做：

import React, { Fragment } from 'react';

【讨论】：

我认为您不需要两者都需要 - 只需 esModuleInterop 应该适用于较新版本的 TypeScript。据我了解，allowSyntheticDefaultImports 只是禁用错误（迫使您依赖模块加载器/捆绑器来发出兼容性代码），而即使您只使用 TypeScript，esModuleInterop 也可以工作。跨度>
啊哈，我刚刚看了list of compiler options - 显然esModuleInterop 隐式启用allowSyntheticDefaultImports。所以你不需要指定它，但这样做也没有什么坏处:)