Question

我正在使用打字稿编写一个小游戏引擎，当我将其编译为javascript时，运行javascript时出错。它编译时没有错误。

我的主要输入文件（ main.ts ）以这两行开头：

require('./core/Obj');
require('./core/Component');

它构建得很好，但是当我运行它时，第二个需要有一些问题，并给出了这个错误：

未捕获的TypeError：类扩展值undefined不是函数或null

芯/ Obj.ts

namespace GameEngine {
    export class Obj {
        // Some functions/methods
    }
}

芯/ Component.ts

namespace GameEngine {
    export class Component extends Obj {
    }
}

然后一旦编译，它看起来像这样：

(function (exports, require, module, __filename, __dirname, process, global) { (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[
    function(require,module,exports){
        var GameEngine;
        (function (GameEngine) {
            class Component extends GameEngine.Obj { // Error is here
            }
            GameEngine.Component = Component;
        })(GameEngine || (GameEngine = {}));
    },{}],
    5:[function(require,module,exports){
        var GameEngine;
        (function (GameEngine) {
            class Obj {
            }
            GameEngine.Obj = Obj;
        })(GameEngine || (GameEngine = {}));
    },{}]
});

这是我正在运行的gulp任务：

gulp.task('compile-engine', function () {
    return browserify()
        .add('./GameEngine/main.ts')
        .plugin(tsify, {})
        .bundle()
        .on('error', function (error) { throw error; })
        .pipe(source('gameEngine.js'))
        .pipe(buffer())
        .pipe(gulp.dest('build/'));
});

Answer 1

每个模块都有自己的GameEngine命名空间 - 因为模块不会污染全局范围。（在您的问题的编译包中，您可以看到它们是分开的。）有一个解释名称空间和模块的答案here。

在使用tsify时，您正在使用（外部）模块。如果您取消命名空间，事情可以变得更简单。 TypeScript Handbook有关于使用带有模块的命名空间的说法：

TypeScript中模块的一个关键特性是两个不同的模块永远不会为同一范围提供名称。因为模块的使用者决定分配它的名称，所以不需要主动地将命名空间中的导出符号包装起来。

您可以将导出和导入更改为以下内容：

`core/Obj.ts`

export class Obj {
    // Some functions/methods
}

`core/Component.ts`

import { Obj } from "./Obj";
export class Component extends Obj {
}

`main.ts`

import { Component } from "./core/Component";
// Do something with Component

编译后，命名空间未定义

1 个答案:

`core/Obj.ts`

`core/Component.ts`

`main.ts`