TypeError: Ajv不是构造函数

Question

我在这个类中尝试实例化Ajv使用new关键字，我得到了这个错误：

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'

Answer 1

我看到Ajv有一个默认函数，所以我把代码改成这样：

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

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

Answer 2

老问题和老答案，但由于我认为公认的答案并不理想，也留下了未回答的问题，我仍然添加我的$.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构造函数感兴趣，那么将它到Ajv变量而不是对象，该对象包含构造函数作为名为default-然后使用以下命令创建类new Ajv.default语法--这看起来很奇怪。