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

Question

我目前正在将 React 与 TypeScript 和 TSLint 一起使用，直到现在我将 React 导入为：

import * as React from 'react';

我想将其切换为：

import React from 'react';

这样我就不需要额外的行和 const 声明来解构像 useCallback、useEffect 或 useRef:

这样的钩子

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

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

Misnamed import. Import should be named 'react' but found 'React' (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 中所述：

Since version 2.0.9 it is possible to configure this rule with a list of exceptions.

For example, to allow underscore to be imported as _, add this configuration:

 'import-name': [ true, { 'underscore': '_' }]

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

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

虽然 "esModuleInterop": true 应该自动设置 "allowSyntheticDefaultImports": true（因此没有必要同时定义两者），但有一个 issue，一些工具可能会检查这些标志的值，因此如果使用预修复的 TypeScript 版本，您可能需要同时设置两者。

有关详细信息，请参阅 。

来自docs：

--allowSyntheticDefaultImports: Allow default imports from modules with no default export. This does not affect code emit, just typechecking.

--esModuleInterop: Emit __importStar and __importDefault helpers for runtime babel ecosystem compatibility and enable --allowSyntheticDefaultImports for typesystem compatibility.

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

如果不设置，会出现以下错误：

Module '".../node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

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