TypeError：Ajv 不是构造函数

Posted 2023-02-15

【中文标题】TypeError：Ajv 不是构造函数

【英文标题】：TypeError: Ajv is not a constructor

【发布时间】：2017-06-25 11:50:57

【问题描述】：

我有这个类，我尝试使用 new 关键字实例化 Ajv，但出现此错误：

TypeError: Ajv 不是构造函数

代码：

import * as Ajv from "ajv";

    export class ValidateJsonService 
        validateJson(json, schema) 
            console.log(Ajv);
            let ajv = new Ajv( allErrors: true );
            if (!ajv.validate(schema, json)) 
                throw new Error("JSON does not conform to schema: " + ajv.errorsText())
            
        
    

控制台日志：

这段代码曾经可以工作，这就是 Ajv 的使用方式。来自 Ajv 文档：

最快的验证调用：

var Ajv = require('ajv');
var ajv = new Ajv(); // options can be passed, e.g. allErrors: true
var validate = ajv.compile(schema);
var valid = validate(data);
if (!valid) console.log(validate.errors);

我怎么会收到这个错误？

请参阅本文底部了解我如何导入 Ajv 库 - systemjs.config.js：

(function (global) 
    System.config(
        paths: 
            // paths serve as alias
            'npm:': 'lib/js/'
        ,
        // map tells the System loader where to look for things
        map: 
            app: 'app', 
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
            'angular2-google-maps/core': 'npm:angular2-google-maps/core/core.umd.js',
            'ajv': 'npm:ajv/dist/ajv.min.js',
            'primeng': 'npm:primeng'

【问题讨论】：

从'ajv'导入Ajv

@esp 我最后还是选择了这个。

【参考方案1】：

旧问题和旧答案，但由于我认为已接受的答案并不理想并且还会留下未回答的问题，因此我仍在添加 $.02：

造成这种情况的原因是 ajv 使用 export default 或 export = 语法，而您正在使用 import * as 它从 ajv 模块导入一个包含所有导出成员的对象，其中默认导出是名为default 的属性。

导入默认构造函数最合理的方式是使用：

import Ajv from 'ajv';
const ajv = new Ajv(...);

而不是

import * as Ajv from 'ajv';
const ajv = new Ajv.default(...); // Ajv is an object containing _all_ exports from the ajv module

如果你绝对觉得必须使用import *，那么这至少会更干净，所以Ajv而不是Ajv.default是构造函数：

import * as AjvModule from 'ajv';
const default: Ajv = AjvModule;

如果使用require 而不是import 来访问使用export default 的模块中的导出成员，它的行为类似于import * as Ajv，即，您将获得一个包含default 属性的对象。

所以以下是等价的：

// Pre-ES6 require
const Ajv = require('ajv').default;
const ajv = new Ajv(...);

// Import default
import Ajv from 'ajv';
const ajv = new Ajv(...);

// Import entire module and use default property
import * as Ajv from 'ajv';
const ajv = new Ajv.default(...); // just ugly!

// Import entire module as AjvModule and assign constructor function to Ajv
import * as AjvModule from 'ajv';
const default: Ajv = AjvModule;
const ajv = new Ajv(...);

如果您确实需要导入默认导出和其他导出成员，则无需求助于import * as ：

import Ajv, EnumParams from 'ajv';
const ajv = new Ajv(...);

我个人认为接受的答案有些缺陷，因为如果您只对导入 ajv 构造函数感兴趣，将 it 分配给 Ajv 变量而不是 对象包含构造函数作为一个名为 default 的属性 - 然后使用 new Ajv.default 语法创建类 - 这看起来很奇怪。

【讨论】：

只有接受的答案在 Nodejs 中对我有效，但不适用于 webpack。在 webpack 中，只有你的答案有效，import Ajv from 'ajv'，使用 ajv 7.2.1。

【参考方案2】：

我看到 Ajv 有一个默认功能，所以我将代码更改为：

let ajv = new Ajv.default( allErrors: true );

不是 100% 确定那里发生了什么，但它确实有效。

【讨论】：

我let ajv = new Ajv( allErrors: true );今天工作了。

根据文档 (ajv.js.org/guide/getting-started.html#basic-data-validation)，您还可以拥有： const Ajv = require('ajv').default; const ajv = new Ajv();