與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中一樣工作。 出於向后兼容性原因，默認情況下禁用此功能，但發行說明中說：

我們強烈建議將其應用於新項目和現有項目。

Answer 2

將這些選項添加到tsconfig.json ：

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

然后你可以這樣做：

import React, { Fragment } from 'react';