【问题标题】:How to generate typescript interfaces/definitions for breeze entities如何为微风实体生成打字稿接口/定义
【发布时间】:2014-02-17 23:02:42
【问题描述】:

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

【问题讨论】:

  • 我们使用 typelite type.litesolutions.net,它使用 t4 模板来生成 typescript 接口。它大多运作良好。 (我知道的老问题)

标签: entity-framework knockout.js typescript breeze durandal


【解决方案1】:

我们正在努力解决这个问题,但还没有发布版本,但很快...如果您想加入我们的测试版列表,请通过 Breeze@ideablade.com 联系我们。

【讨论】:

    【解决方案2】:

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

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

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

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

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

    然后您可以使用微风执行查询并将结果投射到员工数组中,如下所示:

    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>
    

    【讨论】:

    • Tnx 寻求帮助。我是这项技术的新手,我不确定如何在我的项目中使用此代码?我试图将新的 html 文件添加到项目并在运行时访问它,但没有生成任何内容。您能帮我如何使用此代码并预览生成的实体吗?
    • 我已经用一个完整的 html 文件更新了答案,您可以将其放入任何站点。
    • 现在可以了 ;) Tnx 用于分享。如果我可能会问,我现在想知道如何将查询结果从微风转换为生成的实体。我可以复制字段值,但实体会与微风模型断开连接?
    • 我更新了答案,详细说明了如何使用生成的接口。
    • Tnx 为您解答——我什至不认为简单的演员阵容就足够了 ;)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-08-29
    • 1970-01-01
    • 2023-01-05
    • 2016-04-04
    • 2016-12-28
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多