Question

打字稿版本2.2.2

我在UserRoutzr.ts中写了这个要求

const users = <IUser[]> require(path.join(process.cwd() + "/data"));

TSLint提出以下警告：

require statement not part of an import statement

如果我将其更改为：

import users = <IUser[]> require(path.join(process.cwd() + "/data"));

然后它引发了一个错误：

TS1003 Identifier expected

我该如何重写这个要求？感谢您的反馈

Answer 1

TypeScript模块是ES6模块的一种实现。 ES6模块是静态的。您的问题来自动态路径：path.join(process.cwd() + "/data")。编译器无法确定编译时它是哪个模块，并且linter不喜欢导致any的原因。

您应该使用模块的静态路径。在编译时，TypeScript解析它。它会影响正确的导出类型（IUser[]）到users。

import users = require("./yourModuleThatExportsUsers");

注意：如果您的模块data仅包含数据，您可以考虑将其更改为JSON文件，该文件可以加载（Node.js）或捆绑（Webpack）。

更新（自2019年5月起） - 也可以使用dynamic import，TypeScript接受静态和动态路径：

const users = await import("./yourModuleThatExportsUsers");

另请参阅：TypeScript 2.4 Release Notes

Answer 2

可能需要dynamic module loading，代码如下：

import {IUser} from './lib/user';
const users:IUser[] = require(path.join(process.cwd() + "/data"));

Answer 3

需要使用provide插件，但对我来说既不需要输入也不需要动态导入，此构造可以帮助：

module.exports = {
  // ..
  chainWebpack: (config) => {
    config.plugin('provide').use(require('webpack').ProvidePlugin, [
      // ..
    ])
  },

Answer 4

如果您可以正确运行代码，但报告错误，则可以在错误代码上方添加/* eslint-disable */ 像这样


/* eslint-disable */
const path =  require("path");
module.exports = {
    lintOnSave: false,
    chainWebpack: config => {

        const dir = path.resolve(__dirname, "src/assets/icons");

        config.module
            .rule("svg-sprite")
            .test(/\.svg$/)
            .include.add(dir).end() // 包含 icons 目录
            .use("svg-sprite-loader").loader("svg-sprite-loader").options({extract: false}).end();
        /* eslint-disable */
        config.plugin("svg-sprite").use(require("svg-sprite-loader/plugin"), [{plainSprite: true}] || []);
        config.module.rule("svg").exclude.add(dir); // 其他 svg loader 排除 icons 目录
    }
};

Typescript：require语句不是import语句的一部分

4 个答案: