TSLint `import-name` 抱怨 import React from 'react' 并将其变为小写答案

【问题标题】：TSLint `import-name` complains about import React from 'react' and turns it lowercaseTSLint `import-name` 抱怨 import React from 'react' 并将其变为小写
【发布时间】：2020-04-04 05:00:19
【问题描述】：

我目前正在使用带有 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 收到以下错误：

错误的导入。导入应该命名为 'react' 但发现 'React' (import-name) tslint(1)

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

import react from 'react';

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

我正在使用 TypeScript 3.5.1 和 TSLint 5.17.0。

【问题讨论】：

标签： javascript reactjs typescript babeljs tslint

【解决方案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 版本。

来自docs：

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

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

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

如果不设置，会报如下错误：

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

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

【讨论】：