如何在Typescript 2.2.2中扩展其他文件的类?

时间:2017-04-27 18:11:47

标签: angular inheritance typescript

在你认为我的问题重复之前,我已经尝试过在其他问题中回答的所有内容,但没有成功。让我解释一下我的问题:

我有一个Angular 2应用程序和一个Express API共享一个用Typescript编写的私有包,其中包含我的域的类。所有这些都使用的是Typescript 2.2.2。

在priavte包中有一个类,它在另一个文件中扩展另一个类并且项目编译。当我尝试在我的Angular应用程序中使用该包时会出现问题:一切都中断,控制台显示TypeError: Object prototype may only be an Object or null: undefined

只有在包中存在子类时才会发生这种情况,否则一切正常。

例如:

// child/child.ts

import { Parent } from '../parent/parent';

export class Child extends Parent { }
// parent/parent.ts
export class Parent {
    foo: string;
}
// bar/bar.ts
import { Child } from '../child/child';

export class Bar {
    child: Child;
}

在私有包中,我正在使用Gulp将Typescript编译为Javascript并生成声明文件。

以下是.tsconfig文件:

{
    "compilerOptions": {
        "target": "es5",
        "noImplicitAny": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "experimentalDecorators": true,
        "typeRoots": ["../node_modules/@types"],
        "declaration": true,
        "removeComments": false
    },
    "include": [
        "**/**.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

以下是.gulpfile.js

var gulp = require('gulp');
var ts = require('gulp-typescript');
var merge = require('merge2');
var tsConfig = ts.createProject('tsconfig.json', { declaration: true });

gulp.task("release", [], () => {
    var tsResult = gulp.src('src/**/**.ts')
        .pipe(tsConfig());

    return merge([
        tsResult.dts.pipe(gulp.dest('release/definitions')),
        tsResult.js.pipe(gulp.dest('release/js'))
    ]);
});

我的文件结构:

+ root
|
+--+ bar
|  |
|  +-- bar.ts
|
+--+ child
|  |
|  +-- child.ts
|
+--+ parent
   |
   +-- parent.ts

我已经读过在编译时对类名进行排序可能会出现问题,因为必须在Child之前编译Parent。解决方案是在我的子类中编写指令/// <reference path="parent/parent">,但是当我尝试编译时失败并且说参考指令不存在。如果我编写references而不是reference它会编译,但生成的js文件是相同的,除了那个额外的行,并且不起作用。

1 个答案:

答案 0 :(得分:0)

在您的tsconfig文件中,您没有baseUrl因此打字稿无法解决bar/bar.ts中的此导入问题:import { Child } from 'child/child';

要解决此问题,您需要将导入切换为“孩子”的相对路径。文件。

如果你的目录结构是

root
--bar
----bar.ts
--child
----child.ts

然后您的文件变为:

// bar/bar.ts
import { Child } from '../child/child'; // <---

export class Bar {
    child: Child;
}