我是 SPA 的新手,我正在用 durandal 和 Breeze 学习它。最近我将我的解决方案切换到 Typescript,我想知道有没有什么好的解决方案可以基于服务器上的 EF 模型在 TypeScript 中生成类型化的 Breeze 实体。我唯一发现的是这篇文章 Breeze.js typed entities 但这只是一小段代码,甚至不是一个真正的项目。我想知道这个问题有没有更好的解决方案?

最佳答案

下面是一个页面,您可以放入您的站点以生成 typescript 接口(interface)定义。该页面获取 Breeze 元数据,然后遍历所有类型并为每种类型输出一个 typescript 接口(interface)声明。然后可以将此页面的输出粘贴到任何 typescript 文件 (*.ts) 或 typescript 定义文件 (*.d.ts) 中。如果您想命名接口(interface),请将结果包含在模块声明中: declare module northwind { ... paste interfaces here... }

在使用该页面之前,您需要进行一次编辑:将实体管理器的 Controller url 从“api/northwind”更改为您的 Breeze Controller 的 url。

生成的接口(interface)依赖于 Knockout.js typescript 定义,您可以在此处获取:https://github.com/borisyankov/DefinitelyTyped/tree/master/knockout/

使用 learn.breezejs.com 中的北风示例,此定义生成器页面的输出将如下所示:

export interface Employee extends breeze.Entity {
    FirstName: KnockoutObservable<string>;
    LastName: KnockoutObservable<string>;
}

然后,您可以使用 Breeze 执行查询并将结果转换为一组员工,如下所示:
var manager = new breeze.EntityManager('api/northwind');

var query = new breeze.EntityQuery()
    .from("Employees");

manager.executeQuery(query).then(data => {
    // ***cast the results to a strongly typed array of Employee***
    var employees = <Employee[]>data.results;
}).fail(e => {
    alert(e);
});

下面是定义生成器页面 - 将一个新的 html 文件添加到名为“definitions.html”的项目中,运行该项目并导航到该页面。
<html>
<head>
    <title>Typescript Definition Generator</title>
    <style>
        code {
            white-space: pre;
        }
    </style>
    <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/q.js/1.0.0/q.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/breezejs/1.4.4/breeze.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var entityManager = new breeze.EntityManager('api/northwind');
            entityManager.fetchMetadata()
                .then(function () {
                    var html = '',
                        types = entityManager.metadataStore.getEntityTypes(),
                        type,
                        i,
                        j,
                        property,
                        crlf = String.fromCharCode(13),
                        code = document.createElement('code'),
                        script = document.createElement('script');

                    function getJSType(metadataType) {
                        if (/(Int64)|(Int32)|(Int16)|(Byte)|(Decimal)|(Double)|(Single)|(number)/.test(metadataType))
                            return 'number';
                        else if (/(DateTime)|(DateTimeOffset)|(Time)|(Date)/.test(metadataType))
                            return 'Date';
                        else if (/(Boolean)/i.test(metadataType))
                            return 'boolean';
                        return 'string';
                    }

                    for (i = 0; i < types.length; i++) {
                        // type declaration
                        var type = types[i];
                        html += 'export interface ' + type.shortName;

                        // base type
                        html += ' extends ';
                        if (type.hasOwnProperty('baseEntityType')) {
                            html += type.baseEntityType.shortName;
                        } else {
                            html += 'breeze.Entity';
                        }
                        html += ' {' + crlf;

                        // data properties
                        for (j = 0; j < type.dataProperties.length; j++) {
                            property = type.dataProperties[j];
                            if (type.baseEntityType && type.baseEntityType.dataProperties.filter(function (p) { return p.name === property.name; }).length > 0)
                                continue;
                            html += '    ' + property.name;
                            //if (property.isNullable)
                            //    html += '?';
                            html += ': KnockoutObservable&lt;';
                            html += getJSType(property.dataType.name);
                            html += '&gt;; //' + property.dataType.name + crlf;
                        }

                        // navigation properties
                        for (j = 0; j < type.navigationProperties.length; j++) {
                            property = type.navigationProperties[j];
                            if (type.baseEntityType && type.baseEntityType.navigationProperties.filter(function (p) { return p.name === property.name; }).length > 0)
                                continue;
                            html += '    ' + property.name;
                            //if (property.isNullable)
                            //    html += '?';
                            if (property.isScalar)
                                html += ': KnockoutObservable&lt;';
                            else
                                html += ': KnockoutObservableArray&lt;';
                            html += property.entityType.shortName;
                            html += '&gt;;' + crlf;
                        }

                        html += '}' + crlf + crlf;
                    }

                    code.innerHTML = html;

                    $(code).addClass('prettyprint');

                    document.body.appendChild(code);

                    script.setAttribute('src', '//google-code-prettify.googlecode.com/svn/loader/run_prettify.js');
                    document.body.appendChild(script);
                })
                .fail(function (reason) {
                    alert(reason);
                });
        });
    </script>
</head>
<body>
</body>
</html>

关于entity-framework - 如何为 Breeze 实体生成 typescript 接口(interface)/定义,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21375246/

10-12 06:48