Question

我目前正在使用带有TypeScript和TSLint的React，直到现在我将React导入为：

import * as React from 'react';

我想将其切换为：

import React from 'react';

这样我就不需要额外的行和const声明来解构诸如useCallback，useEffect或useRef之类的钩子：

import React, { useCallback, useEffect, useRef } from 'react';

但是我从TSLint收到以下错误：

导入错误。导入应命名为“反应”，但应找到“反应”（import-name）tslint(1)

使用fix: true运行时，它将自动转换为：

import react from 'react';

该错误将消失，但我想将其保留为React。

我正在使用TypeScript 3.5.1和TSLint 5.17.0。

Answer 1

要使该错误消失，您需要将此rule添加到tslint.json中：

"import-name": [true, { "react": "React" }],

如docs中所述：

自2.0.9版以来，可以使用例外列表配置此规则。

例如，要允许下划线作为_导入，请添加以下配置：
 'import-name': [ true, { 'underscore': '_' }]

然后，在tsconfig.json中，您需要添加：

"esModuleInterop": true,
"allowSyntheticDefaultImports": true,

虽然"esModuleInterop": true应该自动设置"allowSyntheticDefaultImports": true（因此不需要同时定义两者），但其中有一个issue，并且某些工具可能正在检查这些标志的值，因此如果使用前缀TypeScript版本，则可能需要同时设置两者。

有关更多信息，请参见Do I ever need explicit allowSyntheticDefaultImports if esModuleInterop is true configuring TypeScript transpilation?。

来自docs：

--allowSyntheticDefaultImports ：允许从模块进行默认导入，而没有默认导出。这不会影响代码的发出，只影响类型检查。

--esModuleInterop ：发出__importStar和__importDefault帮助程序以实现运行时babel生态系统兼容性，并启用--allowSyntheticDefaultImports以实现类型系统兼容性。

此外，在TypeScript allowSyntheticDefaultImports中添加了1.8，而在TypeScript esModuleInterop中添加了2.7，因此，根据所使用的版本，您必须坚持使用{ {1}}。有关更多信息，请参见https://devblogs.microsoft.com/typescript/announcing-typescript-2-7/

如果不设置它们，将出现以下错误：

只能使用'esModuleInterop'标志默认导入模块'“ ... / node_modules / @ types / react / index”'

如果将其中一个或两个设置为allowSyntheticDefaultImports时仍然出现错误，则可能值得一看：https://github.com/microsoft/TypeScript/issues/27329。

TSLint`import-name`抱怨从'react'导入React，并将其变成小写

1 个答案: