英文:
TypeScript how to solve - 'require' call may be converted to an import
问题
以下是翻译好的内容：
在我的TypeScript文件中，我从node_modules导入了两个包和一个JSON文件：
const axios = require('axios').default;
const cors = require('cors');
const creds = require('../utils/credentials.json');
第一行没有突出显示语法错误，但第二行和第三行显示以下消息：
'require'调用可以转换为import.ts(80005)
如果我按照建议去做，最终会得到以下结果：
const axios = require('axios').default;
import cors from 'cors';
import creds from '../utils/credentials.json';
但我不想这样做，因为它在同一个文件中将require和import结合在一起。
另一个问题是，未使用变量的语法突出显示仅在我使用import时显示。
我已经在编译选项中添加了"resolveJsonModule": true，但似乎没有改变任何东西。
如果我从第1行中删除.default，然后建议将所有行更改为使用import：
import axios from 'axios';
import cors from 'cors';
import creds from '../utils/credentials.json';
这种方式可以正常工作，我还可以获得未使用变量的语法突出显示。
请问有人可以解释为什么有建议要切换到使用import而不是require吗？
英文:
In my Typescript file I am importing two packages from node_modules and one json file:
const axios = require('axios').default;
const cors = require('cors')
const creds = require('../utils/credentials.json');
There are no syntax errors highlighted for the first line, however the second and third line shows this message:
'require' call may be converted to an import.ts(80005)
If I follow the suggestion I end up with this
const axios = require('axios').default;
import cors from 'cors';
import creds from '../utils/credentials.json';
Which I do not want because it combines require with import in the same file.
Another issue is that the syntax highlighting for unused variables only shows when I use import.
I have already added "resolveJsonModule": true, to my compiler options but that doesn't seem to change anything.
If I remove the .default from line 1 then I get the suggestion to change all lines to use import:
import axios from 'axios';
import cors from 'cors';
import creds from '../utils/credentials.json';
This way it works fine and I also get the syntax highlighting for unused variables.
Can someone please explain why there are suggested changes for switching to use import and not require?
答案1
得分: 2
require 是 CommonJS 导入模块或其他 JavaScript 文件的方式。在 TypeScript 中应该这样写：
import cors = require("cors");
（它会编译为 const cors = require("cors");）
import 是一种更现代的导入模块或其他 JavaScript 文件的方式。
如果你的 tsconfig 的 module 是 commonjs，那么所有的 import 语句都会被转换成 require。然而，require 不会被转换成 import，这就导致了 import x = require(x) 与 module: 'ESNext' 选项不兼容。
那么，为什么 TS80005 不适用于 .default？这是因为没有干净的方式来进行转换。
如果你将代码更改为：
const { default: axios } = require('axios');
那么你可以得到 TS80005 来将其转换为：
import { default as axios } from 'axios';
这可以正常工作，但你可能希望将其更改为经典的默认导入：
import axios from 'axios';
ES 模块与 CommonJS 模块不同，如果直接导入，它们会返回其 default。如果你想要像从 CommonJS 模块那样获取整个作用域，你需要这样做：
import * as axiosAll from 'axios';
const axios = axiosAll.default;
英文:
require is CommonJS way to import modules or other js files.
In typescript it should be written as
import cors = require("cors");
(which transpiles to const cors = require("cors");)
import is a more modern way to import modules or other js files.
If your tsconfigs module is commonjs then all your imports will be converted to require.
Hovewer, requires won't be converted to imports, making import x = require(x) incompatible with module: 'ESNext' option
So, why TS80005 does not work with .default?
That's because there is no clean way to convert is
If you change the code to
const { default: axios } = require('axios');
then you'll get TS80005 to convert it to
import { default as axios } from 'axios';
This works well, but you may want to change it to classical default import
import axios from 'axios';
The ES modules, unlike CommonJS modules, return their default if imported directly.
If you want to get the whole scope like you would get from CommonJS ones, you'll need
import * as axiosAll from 'axios';
const axios = axiosAll.default
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论