Question

我有这个类，我尝试使用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'

Answer 1

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

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

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

Answer 2

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

造成这种情况的原因是 ajv 使用 export default 或 export = 语法，而您使用的是 import * as，它导入一个对象，其中包含所有从 {{1} 导出的成员}} 模块，其中默认导出是一个名为 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

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

TypeError：Ajv不是构造函数

2 个答案: