Question

我正在研究一个打字稿框架，以在angularjs之上开发单页面应用程序。作为开发实践，框架内的每个类都已实现为单独的文件，而后者又成为打字稿外部模块。我正在开发的开发IDE是VS2015，其中包含typescript 1.5。

square.ts

export class Square {
    constructor(color) {
    }
}

triangle.ts

export class Triangle {
    constructor(color: number) {
    }
}

rectangle.ts

export class Rectangle {
    constructor(color: number) {
    }
}

我想将框架部署为单个js文件而不是不同的外部模块。所以我使用了grunt + browserify + tsify组合来捆绑框架。例如，所有上述文件都已编译并组合到framework-production.js（CommonJS模块）中，如下所示。

var config = {
    client: {
        outDir: './',
        out: 'framework-production.js',
        options: {
            browserify: {
                entries: './framework.ts',
                extensions: ['.ts'],
                debug: true
            },
            tsify: {
                target: 'ES5',
                removeComments: true
            }
        }
    }
};

现在我想使用这个库（framework-production.js）来开发一个打字稿客户端应用程序。

为此，我需要开发一个类型定义文件。 tsc生成的默认类型定义文件是外部模块。而不是将它作为单独的外部模块.d.ts文件提供，我想将它组合成一个文件。我们称之为framework-production.d.ts。

问题1.是否有可用于组合d.ts文件的工具？

问题2.我看到angular2生成了一个合并的d.ts文件。任何身体都可以帮助我理解angular2（非角度1.x）是如何实现的吗？

我手动组合/重新分解了d.ts文件并生成了framework.d.ts，如下所示。

问题3.这是定义d.ts文件的正确方法吗？

declare module framework {
    class Rectangle {
        constructor(color: number);
    }

    class Triangle {
        constructor(color: number);
    }

    class Square {
        constructor(color: any);
    }
}

declare module "framework" {
    export = framework;
}

当我尝试使用framework-production.js并实例化＆＃39; Square＆＃39;下面给出的课程;

<script src="framework-production.js"></script>
<script data-main="/app" src="/Scripts/require.js" type="text/javascript"></script>

app.ts

/// <reference path="framework-production.d.ts" />
new framework.Square(1);

它会抛出一个错误;

Unhandled exception at line 20, column 1 in http://localhost:59182/app.js
0x800a1391 - JavaScript runtime error: 'framework' is undefined

问题4.你能指导我找出我正在做的错误吗？

如何捆绑（用于浏览器）打字稿外部模块，生成d.ts并在客户端应用程序中使用？

0 个答案: