require statement not part of import statement.eslint@typescript-eslint/no-v

这个错误信息是由 ESLint 插件 @typescript-eslint/no-var-requires 触发的，它提示你在 TypeScript 代码中使用了 require 语句，而不是推荐的 import 语句。这个规则的目的是鼓励使用 ES6 模块语法，因为它提供了更好的静态分析和树摇（tree shaking）能力。

基础概念

• ES6 模块：使用 import 和 export 关键字的模块系统。
• CommonJS 模块：使用 require 和 module.exports 的模块系统，常见于 Node.js 环境。

优势

• 静态分析：import 允许编译器在编译时进行更好的优化和错误检查。
• 树摇：现代打包工具可以利用 import 语法来移除未使用的代码，减少最终包的大小。
• 异步加载：import() 可以用于动态导入模块，支持代码分割。

类型

• 静态导入：import { something } from 'module';
• 默认导入：import something from 'module';
• 导入整个模块：import * as module from 'module';
• 导入并重命名：import { originalName as newName } from 'module';

应用场景

• 前端框架：如 React, Vue, Angular 等通常推荐使用 ES6 模块。
• Node.js 后端：虽然 Node.js 支持 CommonJS，但越来越多的库和项目开始支持 ES6 模块。

解决方法

如果你遇到这个错误，可以通过以下几种方式来解决：

1. 使用 import 替换 require

// 错误示例
const express = require('express');

// 正确示例
import express from 'express';

2. 如果你必须使用 require，可以关闭这条规则

在你的 .eslintrc 或相应的配置文件中添加以下配置：

{
  "rules": {
    "@typescript-eslint/no-var-requires": "off"
  }
}

3. 对于动态导入的情况，可以使用 import()

// 动态导入模块
const modulePath = './path/to/module';
import(modulePath).then((module) => {
  // 使用模块
});

示例代码

假设你有一个 TypeScript 文件 app.ts，原本使用 require：

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

修改为使用 import：

import express from 'express';
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

这样就可以避免 ESLint 报错，并且利用了 ES6 模块的优势。