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

Question

在带有TypeScript的React中，我收集您使用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';

还是会两次导入？似乎也有些笨拙。

Answer 1

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

  

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

Answer 2

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

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

然后您可以这样做：

import React, { Fragment } from 'react';